摘要：
　　这篇文章来源于@苦労猫的分享，该看官分享了鲜为人知的关于淘宝手机详情显示高清图片的方法，快来学习新技能吧！.....

申明：本文原创作者为@苦労猫，原作者在经艺灵详谈后愿意将经验整理成文档并分享给各位看官，文章最终由艺灵代发表。

一、思考问题

淘宝手机端详情页图片显示不清晰，尤其是文字部分、小字糊得很严重，像是加了BLUR滤镜。那么怎样让手机端图片变清晰呢？为什么网页和别的软件显示都很清晰，可到了淘宝里就不行了呢？

先别急着要解决方案，我们首先要了解一个概念--- 什么是Retina屏。

二、什么是Retina屏

Retina显示屏已经是现在主流移动设备的标准显示器了，包括最新几代的iPad，iPhone和三星Galaxy手机等，都装配有Retina显示屏，为了在这些设备上展示高质量的图片，有必要了解一下这种屏幕的特性。

按照苹果公司给出的Retina标准，正常视线距离内，肉眼很难看到像素的屏幕，被称为Retina屏幕。

三、如何高清

它是如何做到肉眼很难看到像素的高清显示呢？答案很简单—— 提高分辨率！

以Retina版MacBook Pro为例，工作时显卡会渲染出2880x1800个像素，其中每四个像素一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度却是原来的4倍！（也可以简单理解为，用4个像素来显示原来的1个像素。）举例说，原来一个图标大小为32x32px，那么为了适应retina屏幕，图标就要变成原来的4倍，也就是64x64px。下图左为Retina屏幕显示效果，放大后像素仍然很难察觉，文字如印刷字体般清晰。下图右为普通手机显示效果，可以清楚的看出像素。配图：

那么，了解到新一代设备如此惊人的4倍高清显示机能之后，再反思一下，自己上传到淘宝的图片是多少像素的呢？

一般美工在设计淘宝详情页的时候，图片宽度都是设置在750像素以内（淘宝电脑端详情模块的最大宽度为750px）。与此同时，iPad mini2的分辨率都已经达到2048×1536像素了，在如此高分辨率的设备上显示如此低分辨率的图片，当然会虚得一塌糊涂！没错，淘宝前端工程师的思路还停留在最大屏幕分辨率为1024x768像素的万恶旧社会！它那750像素的图片宽度，连小米手机看见都要笑了。

那么，为了适应新一代设备，我们应当如何输出图片呢？很简单：把原有的图片尺寸长宽都直接乘以2再输出，就OK了！

3.1、案例讲解

举例子，原来是750px宽的一张图片，现在我们只要输出成1500px宽即可，这就是那些app开发团队的UI设计师们经常提到的@2x图片，其实手机端的应用老早年就开始使用4倍分辨率图片了（长宽都乘2以后，分辨率就变成原来的4倍）。

接下来，我们就来试试具体如何应用@2x高清图片吧。

首先，把下面两个图片上传到你的图片空间。然后把它们插入详情页，图片宽度都设置成width:375px，发布出来后换不同设备来浏览。是不是发现，在配有retina屏幕的电脑和手机上，右边的@2X图片超级清晰！！！简直可以媲美iPhone手机自带文字渲染效果有木有！！！感受什么是高科技吧！！！配图：

讲到这里，发达的美利坚新世界研究的这个顺应时代的技术，大家应该就算都了解了，也算是会正确使用iPhone手机了。但是不要急着应用，下面还有两个坑要跨过去！

3.2、坑一：淘宝的自动生成手机页面。

千万不要点击发布手机端页面，之后页面会变得特别丑，页边距会消失，并且会丧失所有的样式可控性。连图片的宽度也不能设置了，还玩个屁@2x图片！

要习惯一切都在电脑端编辑好，之后系统会默认手机也使用电脑端一样的显示效果，这样至少能保证这个页面样式还是可编辑的。（至于哪些HTML标签手机版被禁了，哪些CSS样式手机版会失灵，我只能说，亲慢慢试去吧，淘宝不会有文档告诉你的。）

3.3、坑二：淘宝的自动压缩功能。

淘宝的系统有一个特别讨厌的功能，它会自动监测手机端发布的图片，如果图片宽度超过1000px，那么系统会对其进行自动压缩，而且是超高压缩比的JPG方式压缩，经过缩后的图片简直是惨不忍睹。就算你发布的图片是优化极其合理的PNG格式，1000x1000px的PNG图片可能大小都不超过50K。但是，淘宝系统不管你，只要超宽了，它就会把这个图片自动转换成小尺寸的JPG，同时很可能经过它”压缩“的文件大小反而变大了，甚至超过了100k……所以，可以说这个自动压缩图片的设定，简直是没用至极又缺心眼到爆，可谓槽点满满。

四、高清实战！

那么，为了避免我们精心设计输出好的@2x大图被淘宝自动压缩，只好另辟蹊径了。下面跟我一起操作：我们要把本来是1400px像素宽的一个图，从正中间对半切成两个700px宽的图片。为了便于观看及区分，我们分别命名为left.jpg和right.jpg。之后再在网页上把它们拼合在一起，分别设定其显示宽度为350px。这样图片就不会被淘宝系统自动压缩了。大家还是把示例文件上传到图片空间，并插入详情页中，分别设置图片的宽度。示例代码：

示例代码一：

<!--复制开始-->
<img src="left.jpg" style="width:350px;" >
<img src="right.jpg" style="width:350px;" >
<!--复制结束-->

同时，为了避免在PAD上显示错位，我们要把这两张图片包在一个DIV容器里，并设定容器的宽度，这里用的是350x2，也就是700px。代码如下：

代码优化：

<!--复制开始-->
<div style="width:700px;" >
<img src="left.jpg" style="width:350px;" >
<img src="right.jpg" style="width:350px;" >
</div>
<!--复制结束-->

效果配图：

之后在下面再加上一个传统低分辨率图作为效果对比图：

普通代码：

<!--复制开始-->
<img src="all_in_one.jpg" style="width:700px;" >
<!--复制结束-->

效果配图：

最后，发布详情，换各种设备浏览，对比之下是不是发现，按大部分淘宝设计现有的700px宽输出的图片all_in_one.jpg效果简直弱爆了？连新设备一半的机能都没有利用到呀！！！

友情提示：为了能看到更明显的效果，建议看官将图片下载后上传到自己店铺，然后复制上面代码进行代码实战，方能体会到区别。

至此，在手机端使用@2x高清图片的所有要点都介绍完了，坑也跨过去了。但是要注意，@2x的图片是传统图片分辨率的4倍，文件大小会大幅增长，所以，为了提升浏览速度和改善用户体验，图片一定要经过合理的压缩和优化。切图的时候，也要尽量利用压缩的特性来切图。用PS保存文件时请一定使用Save for Web来保存，而不是Save或Save as。大面积单色区域的图片要保存成PNG格式，并根据实际使用的颜色数来压缩。jpg格式的文件质量尽量不要高于50%，以单张图片拼合后的所有文件大小总和尽量不超过150k为佳。专业的设计师，首先要了解的就是文件格式，不懂的话还请快去参考基础的软件使用手册。

五、扩展阅读

最后给大家推荐一款好用的UI设计软件——SKETCH，它能够自动输出@2x图片，而且它自带的文字渲染引擎比PS好太多。低版本的SKETCH还支持次像素文字渲染（subpixel rendering），虽然已经是苹果淘汰多年的技术，不过使用在淘宝这种前端机能极其落后的平台上还是有价值的。尤其是制作淘宝手机版自定义页面图片的时候，它那个动辄限制图片宽度到400，500px的蛋疼设定会导致文字极端的不清晰。这时候为了保证文字能清晰显示，我们只好跟着淘宝一起退回旧社会，重拾苹果十多年前的次像素渲染技术，或者直接使用1982年日本NEC出品的PC98电脑那种汉字点阵字（比如zpix字体）。在这种低分辨率条件下，甚至也可以对图片进行过度的锐化处理，来达到一个相对合理的清晰展示效果。

关于SKETCH这款软件，可参阅http://sketchcn.com来了解更多。关于Retina屏、@2x、字体渲染、次像素渲染（subpixel rendering）等概念，可参看维基百科或知乎上的科普文章。

当然上面提到这些概念和技术的主要使用者、推动者都是苹果公司，有兴趣的可以亲自打开www.apple.com网站，看看苹果的设计师是如何利用这些技术来设计文字纤细、图片清晰的高B格网站的。优秀的设计师，不仅需要良好的审美，同时也需要合适的技术手段来配合实现对美的诉求，在此还望淘宝前端工程师们多多努力，早日离开万恶旧社会。

六、结束

再次感谢@苦労猫的经验分享。如果看官也有经验想分享给更多人，可以联系艺灵。艺灵将为看官代发文章以服务于更多看官。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2016-05-03/391.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。