玩转淘宝网店图片格式的选择技巧

liuzongyang

【如内容违法或虚假，请联系上述邮件删除】

网页设计中，切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择合适的图片格式不但能够将让设计得到合理的显现效果、以至还能够有效的控制图档的档案大小，俭省下载时间、有效的减少效劳器的担负。

　　以设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「贮存为网页用…」的功用。与默许的存盘方式不同，在这个方式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项。
　　置信许多人都知道网页设计中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非一切的人都知道他们之前的实践差别跟到底何时该选择何种格式。经常发作的状况是，选择 GIF 后的输出结果看起来变得很糟，于是 PNG (24)似乎忽然间盛行了起来，不论图档尺寸是不是因而多了好几倍。
　　JPEG
　　由于旧型计算机系统以及文件系统的限制，计算机档案文件名与扩展名被规则为 8.3 的格式，因而 JPEG 的附档名被缩写为 .JPG。JPEG能够说是人们最熟习的图档格式了，置信在数字相机提高的往常，简直每台数字相机、照相手机都能够(以至只能)输出 JPEG 格式的图档。JPEG是一种很典型的运用破坏性紧缩(lossy compression)的图档格式，也就是说运用者每次中止 JPEG 的存档动作后，图档的内容都会遭到破坏，这个特性在肉眼辨识下并不明显，但却能够有效的降低图档的档案大小。
　　就如这些运用 JPEG 的设备一样，JPEG 十分合适作为贮存像素颜色丰厚的图片、例如照片等等，这些图片即便有些微的失真也不容易随意的察觉：而反过来说 JPEG 并不合适用来贮存线条图、图标或文字等等有明晰边缘的图片。
　　多次重复中止 JPEG 的图档的贮存将会永世性地破坏图片中的细节。
　　GIF：
　　Gif 在许多特性与表现上都与 JPEG 有着相对的特性。GIF 运用无损紧缩格式(Lossless Compression)，但却限制了颜色表现才干、能够有效地俭省档案尺寸。GIF 只具有 8 位的颜色深度信息，所谓的 8 位是指 2 的 8 次方也就是 256 色，当你的图片中呈现的颜色在 256 色以内时，运用 GIF 能够得到相当好的输出质量、同时统筹了档案大小。因而 GIF 十分合适用来表现图标、 UI接口、线条插画、文字等部分的输出。
　　另外 GIF 同时还支持透明背景、以及动画图档格式，并且简直不用担忧支持性的问题：简直 100% 的阅读器都支持它。
　　由于 JPEG 与 GIF 有着如此不同的特性，因而我们能够很随意的选择何时该用哪一种格式来输出我们需求的图档。当图片具有丰厚的颜色时，并且没有明显锐利反差的边缘线条时，选择 JPEG 能够得到最好的输出结果，像是照片就是最好的例子：

(左图：Photoshop 输出 JPEG 默许值：质量：高，紧缩质量 60%、优化输出。右图：Photoshop 输出 GIF 默许值：256色、扩散性混色)
　　当图片是具有明白边缘的线条图、没有运用太多颜色、以至可能需求透明背景时，GIF 是很圆满的选择，档案小、画质又精巧。

　(上图：Photoshop 输出 GIF：64色、扩散性混色。下图：Photoshop 输出 JPEG 默许值：质量：高，紧缩质量 60%、优化输出)
　　PNG：
　　PNG 最初的开发目的是为了作为 GIF 的替代计划的，作为做新开发的影像传输文件格式，PNG 同样运用了无损紧缩格式，事实上 PNG 的开发就是由于 GIF 所运用的无损紧缩格式专利问题而降生的。PNG 分为 PNG-8 以及 PNG-24 两种格式，PNG-8 的特性很接近 GIF ，支持 256 色以及透明背景的特性。
　　而 PNG-24 则支持了多达 160 万个颜色。固然 PNG 不支持动画，但是 PNG-24 支持了Alpha 透明效果，这能够说是 PNG-24 最令人眼睛一亮的中央了。也就是说运用 PNG 输出图档时，能够有效的支持不同的透明度效果了。这对网页设计师来说无疑是一个好音讯，像这张图片其实是运用了三张 PNG-24 的图片在网页中排版出来的效果：

   在大部分的状况下，设计师必需依据图片需求来选择不同的图档格式，并且对其做恰当的调整。固然 PNG-24 看起来很圆满，但是相应的当然就是档案大小的增加。另外还有就是阅读器支持度的问题，固然往常简直大部分的阅读器都支持了 PNG-24 格式，但不幸的是 IE6 是不支持透明 PNG 图档的，往常依然有相当的运用者在运用 IE6 或更早的版本，固然比例会越来越少，但是设计师多少必需将其思索其内，能否思索运用 GIF 替代，或是在程序端透过 script 的方式来支持透明 PNG 格式。


(关注老榕树网络旗下“网络思维”微信公众号:wlsw360 (每天都有好文章)

 

                                                   本帖如有虚假或违法，请联系邮箱删除，本社区删贴不收任何费用，欢迎举报。老榕树社区属老榕树网络旗下网站，旨在为老榕树用户提供创业咨询、网站建设技术交流、源码下载、提供各种实用工具。如有部分帖子涉及违法、虚假，请你第一时间与社区联系，把需要删除的社区链接提供给我们，我们核实之后，第一时间删除。邮箱：125175998@qq.com