干货分享之如何让淘宝手机端详情显示高清图片 --艺灵设计
当前位置：&>>&&&干货分享之如何让淘宝手机端详情显示高清图片
干货分享之如何让淘宝手机端详情显示高清图片
摘要：　　这篇文章来源于@苦労猫的分享，该看官分享了鲜为人知的关于淘宝手机详情显示高清图片的方法，快来学习新技能吧！.....
申明：本文原创作者为@苦労猫，原作者在经艺灵详谈后愿意将经验整理成文档并分享给各位看官，文章最终由艺灵代发表。
一、思考问题
淘宝手机端详情页图片显示不清晰，尤其是文字部分、小字糊得很严重，像是加了BLUR滤镜。那么怎样让手机端图片变清晰呢？为什么网页和别的软件显示都很清晰，可到了淘宝里就不行了呢？
先别急着要解决方案，我们首先要了解一个概念--- 什么是Retina屏。
二、什么是Retina屏
Retina显示屏已经是现在主流移动设备的标准显示器了，包括最新几代的iPad，iPhone和三星Galaxy手机等，都装配有Retina显示屏，为了在这些设备上展示高质量的图片，有必要了解一下这种屏幕的特性。
按照苹果公司给出的Retina标准，正常视线距离内，肉眼很难看到像素的屏幕，被称为Retina屏幕。
三、如何高清
它是如何做到肉眼很难看到像素的高清显示呢？答案很简单—— 提高分辨率！
以Retina版MacBook Pro为例，工作时显卡会渲染出个像素，其中每四个像素一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的分辨率显示屏相同，但精细度却是原来的4倍！（也可以简单理解为，用4个像素来显示原来的1个像素。）举例说，原来一个图标大小为32x32px，那么为了适应retina屏幕，图标就要变成原来的4倍，也就是64x64px。下图左为Retina屏幕显示效果，放大后像素仍然很难察觉，文字如印刷字体般清晰。下图右为普通手机显示效果，可以清楚的看出像素。配图：
那么，了解到新一代设备如此惊人的4倍高清显示机能之后，再反思一下，自己上传到淘宝的图片是多少像素的呢？
一般美工在设计淘宝详情页的时候，图片宽度都是设置在750像素以内（淘宝电脑端详情模块的最大宽度为750px）。与此同时，iPad mini2的分辨率都已经达到像素了，在如此高分辨率的设备上显示如此低分辨率的图片，当然会虚得一塌糊涂！没错，淘宝前端工程师的思路还停留在最大屏幕分辨率为像素的万恶旧社会！它那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格式，px的PNG图片可能大小都不超过50K。但是，淘宝系统不管你，只要超宽了，它就会把这个图片自动转换成小尺寸的JPG，同时很可能经过它”压缩“的文件大小反而变大了，甚至超过了100k……所以，可以说这个自动压缩图片的设定，简直是没用至极又缺心眼到爆，可谓槽点满满。
四、高清实战！
那么，为了避免我们精心设计输出好的@2x大图被淘宝自动压缩，只好另辟蹊径了。下面跟我一起操作：我们要把本来是1400px像素宽的一个图，从正中间对半切成两个700px宽的图片。为了便于观看及区分，我们分别命名为left.jpg和right.jpg。之后再在网页上把它们拼合在一起，分别设定其显示宽度为350px。这样图片就不会被淘宝系统自动压缩了。大家还是把示例文件上传到图片空间，并插入详情页中，分别设置图片的宽度。示例代码：
示例代码一：
&!--复制开始--&&img src=&left.jpg& style=&width:350& &&img src=&right.jpg& style=&width:350& &&!--复制结束--&
同时，为了避免在PAD上显示错位，我们要把这两张图片包在一个DIV容器里，并设定容器的宽度，这里用的是350x2，也就是700px。代码如下：
代码优化：
&!--复制开始--&&div style=&width:700& &&img src=&left.jpg& style=&width:350& &&img src=&right.jpg& style=&width:350& &&/div&&!--复制结束--&
效果配图：
之后在下面再加上一个传统低分辨率图作为效果对比图：
普通代码：
&!--复制开始--&&img src=&all_in_one.jpg& style=&width:700& &&!--复制结束--&
效果配图：
最后，发布详情，换各种设备浏览，对比之下是不是发现，按大部分淘宝设计现有的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格网站的。优秀的设计师，不仅需要良好的审美，同时也需要合适的技术手段来配合实现对美的诉求，在此还望淘宝前端工程师们多多努力，早日离开万恶旧社会。
再次感谢@苦労猫的经验分享。如果看官也有经验想分享给更多人，可以联系艺灵。艺灵将为看官代发文章以服务于更多看官。
----------完----------
转载声明：　　若亲想转载本文到其它平台，请务必保留本文出处！本文链接：http://www.yilingsj.com/code//391.html若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。
上一篇: 　　　下一篇:有什方法能让手机淘宝里面的字放大?_百度知道
有什方法能让手机淘宝里面的字放大?
有什方法能让手机淘宝里面的字放大?...
有什方法能让手机淘宝里面的字放大?
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
三星问答服务知道合伙人
三星产品问答服务
三星问答服务
知道合伙人
三星产品使用咨询服务支持
手机网页字体大小调节方式：1.双指拉伸双指靠拢，向外侧移动，可以放大页面；双指分开，向内侧移动，可以缩小页面。2.双击屏幕轻敲两下屏幕，可以放大页面大小，再次轻敲两下屏幕，可以缩小页面大小。3.若无效，打开互联网-更多（右上角）-设置-手动变焦（手动缩放）-滑动开启（无论网页如何设置，都可用双指放大画面）。4.互联网-更多-设置-高级设定-图片和文本-文字缩放-滑动调节需要的字体大小。注：若使用自己下载的浏览器，建议查看下载的浏览器本身的设置菜单。
三星问答服务知道合伙人
三星产品问答服务
三星问答服务
知道合伙人
三星产品使用咨询服务支持
手机调节文字字体大小方法：设定-字体-字体大小-根据需求选择或调节合适的字体。部分机型：设定-显示（显示或墙纸）-字体-字体大小-选择适用的字体。
乐聪乐健小伴侣知道合伙人
来自知道合伙人认证行家
乐聪乐健小伴侣
知道合伙人
育儿类行家
采纳数：10726
获赞数：26949
潍坊爱乐食品有限公司企业法人，从事母婴冻干食品行业多年，具有丰富的母婴饮食健康知识和育儿经验。
可以设置自己的手机文字显示，把字调大就行
颐和这人知道合伙人
擅长：暂未定制
截图在自己图库里放大
其他1条回答
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。手机淘宝的字体怎么改_字体吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：161,113贴子：
手机淘宝的字体怎么改
求大神解答~
千库网为您提供500万精品PNG字体免费下载,200万海报背景素材,700万精品模板素材字体免费下载电商素材,平面素材,APP/UI素材,H5素材.海报背景Banner素材
改不了吧゜　○。○゜。Ｏ°ｏ○。ｏ゜○。゜Ｏ○。°咕噜○ｏ°○ｏ○゜ ｏ。Ｏ゜○。゜。泡泡゜Ｏ○。°○ｏ°○ｏ○゜ｏ。Ｏ゜○。 ゜。゜Ｏ○。°○ｏ°. 冒泡泡゜○。○゜。Ｏ°ｏ○。ｏ゜○。 ゜Ｏ○。°咕噜○ｏ°○ｏ○゜ｏ。Ｏ゜○。゜。泡泡゜Ｏ○。 °○ｏ°○泡泡゜○。○゜。Ｏ°ｏ○。ｏ
不要看不起我... 我是个好孩子
贴吧热议榜
使用签名档&&
保存至快速回贴【疑难杂症】 - 淘宝手机端为什么不能设置文字格式？？？
&&&&& 为什么手机里面的文字不能有格式呢？不能加粗，不能变颜色，而我的宝贝详情主要是文字，都换成图片的话，太多图了，加载起来太慢，还会影响搜索排名，为什么淘宝不能让手机端也能编辑文字格式呢？？？
&&&&&& 对我们这种做服务的企业来说，太不公平了，买家看到大段没有格式的文字肯定看不下去，但是我们有必须写大段文字，这样才能让买家更了解我们的服务，淘宝能不能也考虑下我们呢？
相关推荐：
手机阿里扫一扫，随时随地看商友圈
深圳市明新知识产权管理企业（普通合伙）淘宝无线端详情页原来要这样做?_Hi商学院
淘宝无线端详情页原来要这样做?
|HiShop|阅读量：
导读：关于淘宝无线端详情页，我希望大家一定要明白的是，现在还有很多的店铺把时间浪费在首页的修修改改中，浪费在PC端的详情页的一次次优化中。现在店铺流量组成早就不同了，有些店...
淘宝无线端详情页原来要这样做?
　　关于淘宝无线端详情页，我希望大家一定要明白的是，现在还有很多的店铺把时间浪费在首页的修修改改中，浪费在的一次次优化中。现在店铺流量组成早就不同了，有些店铺无线端占比高达80%，却还在执迷于让美工每个星期花二三天时间去修改只有5%的访客会看的店铺PC端首页。如果按我的做法，我建议店铺首页直接找个好的模板，全部套用模板把宝贝搞上去就行了，而让美工把90%的精力花在优化淘宝无线端详情页和活动图上。
　　1.有人统计的数据，浏览3屏以上的不会超过50%，浏览超过10屏的不会超过15%，大多数人浏览了前3屏就关闭页面离开了，这个数据值得我们好好思考下，如何描述无线端详情页。如果你不想办法在正式内容的前三屏(不算小海报和关联模块)打动一个买家，你很可能就失去了这个买家。
　　2.以卖点为中心，制作整个，前期卖点需要自己提炼，后期根据成交热词来调整，成交热词是买家对你的产品价格特点的归类选择，详情页一定要对这些词，加大篇幅去深入体现，让买家们通过这些成交热词进入宝贝后可以清楚地看到他们所想要知道的，。
　　3.提取宝贝最核心的卖点，最好不要超过五个字，太长就没那么容易让人在二秒内接受并理解，比如一件衣服，它最重要的卖点就是精致印花，或者性感露肩等。有的时候卖点不是那么容易提取，或者开始提取的是错的，我们就要及时修正了，比如一款连衣裙，性感上衣的点击率甚至转化率远高于气质连衣裙，那我们一开始定在气质为卖点的就是错的，要及时更换。
　　4.一个买家决不决定在你这里购买，开始的15到30秒最为重要，也是决定她是否愿意继续浏览你家详情的关键，所以如何把握这最开始的30秒，就极为重要。这时候我们就要研究买家打开宝贝的最初的想法了，她在想这衣服我穿合不合适，这个价格是不是合理的，其他买过的人是怎么评价的，在这家店铺购买放不放心，售后如何&&只要解决好这些问题，她自然愿意留下来继续看后面的详情，并和在其他家浏览的宝贝对比，直到收藏或购买，就算最后仍然离开没有购买，这增加的停留时长对宝贝的权重也是有益的。
　　5.不要想着做个所有人都喜欢看的详情页，你的宝贝价格和款式，点击的关键词就锁定了它的目标客户群，你要做的讨好这个客户群，做出他们喜欢看的页面，营造出他们愿意购买的场景。有一点一定要注意，我们常常为了提高主图点击率，重做宝贝背景，甚至用一些奇怪角度的图片，而实际详情页的内容跟主图所表达出来的差距甚远，这样引来的流量转化肯定也不会高了。
　　6.要有购物感，不要文艺的让人看三遍都不明白你是要卖东西还是卖节操。对于大多数店铺来说，我建议就用卖东西的风格来打造详情页，把晦涩难懂的文案都扔掉，简单明了告诉买家我这个宝贝怎么样，就是好东西，你不买就是错过。
　　8.有时候，产品到了买家手里我们才发现存在哪里问题，比如衣服短了，一抬手就露肚脐了，或者太厚太薄，或者原以为修身的很多人反映不修身，这时候就要及时修正宝贝标题属性卖点了，之前我这有一款毛衣，年前上架的，在我们看来是常规款，但因为薄导致了很多差评和退货。这种情况下，我就把属性从常规修改为薄款，并在标题上加上薄款，在PC端和手机端的最前面都用文字表明：这是薄款毛衣，适合冬天打底，春秋单穿。经过这些改动后，再也没有因为薄而导致的差评了，退货率也降下来了。
　　9.分析竞争对手热销宝贝的评价，从中找出买家最关注的问题，在我们的宝贝中帮他们先解决掉，比如担心会缩水，会掉毛，或者外装饰容易掉，尺码不准，担心不是正品，对健康不利之类的痛点，我们分析出来，在自己的详情页和评价里解决掉这些问题，转化率一定可以大大提高的。
　　10.适当加文字，可以增加买家对宝贝的了解和延长停留时长，但要注意淘宝搜索只从标题，宝贝属性处抓取关键词，是不会对详情页的文字进行抓取的，因为如果还对详情页进行抓取，必定会极大地加重搜索引擎的负担，影响体验，而且容易被人钻空子，还有副标题，无线端文字详情都是不抓取的。但码数那的是属于属性的，是会有机会抓取的。我曾无意中看到有个搜索&恢复正常发货女装&这个词进来的流量，我分析了下就是在码数那添加了：2月26日起已恢复正常发货。
　　11.敢把宝贝本身存在的无法解决的问题在详情页用文字说清楚，如这个款会轻微脱色，掉毛，起球之类的，是为了让愿意购买的有心理准备，不至于收到后才来吹毛求疵(这个也要看类目，不是每个类目或价位都可以这样做的)。如果有客户在评价说了难听的话，我们首先不是去心里想着骂回去，而是去思考下她为什么会这样评价，我们该如何避免，如果有条件，应该打电话给她，道歉或提供补偿，赢回客户，有时候不是质量有多好，而你是有多诚心，你在服务客户所牺牲的利益，一定会在其他地方被补偿回来的。
　　12.关于详情页的图片大小，一般控制在150-200KB之间比较好，有利于加载，提高浏览体验。淘宝之前推荐说图片高度800像素，实际上800像素对于大多数电脑来说都不可能在一屏看完整张图片的，如果可以尽量把高度控制在500像素左右，使之更符合买家们的屏幕尺寸。
　　13.更换淘宝无线端详情页和上面提到的更换差不多，其实我从来不是一点点更换详情页，都是整个详情直接全部更换，因为新的详情页肯定是做的更精美，更吸引人的。反正到目前为止，我还没有遇到因为更换详情页导致流量大跌的情况。
　　14.在淘宝无线端详情页中要时不时突出自己的品牌名，一个陌生的品牌只看一二次很难让人有印象，如果看了六七次以上，至少知道有这个品牌，以后再通过搜索流量付费流量吸引她们进店，让品牌名持续占据她们的脑海，加深印象，如果店铺产品质量确实很不错，服务也周到，对于这群人来说，这就是品牌。
　　如果要总结淘宝无线端详情页的话，我觉得应该是，打消买家顾虑，解决买家最关心的问题，坚定买家购买决心。判断一个详情页做的好不好，除了停留时长和跳失率，还应该关注静默转化率，只要你把客户可能咨询的问题都在详情页里解释清楚了，相信转化率特别是静默转化率不会低。若你还是不知道怎么做详情页，去收集一些卖得好的同行宝贝，多分析，多比较，你一定可以明白详情页原来要这样做。
文章分享到：
2017淘宝嘉年华上双11价格多少?双十一淘宝嘉年华什么价?还有两个月就是双十一了，双十一嘉年华海选招商报名在9月2日已经
关注HiShop