分享做图片优化的8个技巧图片优化该怎么做( 二 ) _生活百科

通过对比相同体积下（都是24kb）不同格式的图片显示效果，经过测试可以看到，JPEG 是获胜者，在同样的体积下，GIFs和PNGs必须以牺牲图片质量为代价。不过话又说回来，如果对于非常小的图片来说（比如小于5K），PNG是比较好的选择，相比GIF，PNG可以在体积很小的情况下依然不会让图片失真。
当我们选择图片格式时，如下一些tips供大家参考，
对于电商网站来说，产品图片的质量要求极高，JPEGs毫无疑问是首选，他们有相对高质量的图片显示且不会占用太大的体积。
绝对不要用GIFs来当做产品大图。不然的话文件尺寸会非常大，也没有很好的办法去压缩它（一压缩就失真）。可以用GIFs做动画或是装饰性小图。
PNG可以作为JPEGs和GIFS的替代，如果你想把产品图片做成PNG格式，尽量用PNG-8而非PNG-24 。PNGs同时也擅长处理简单地装饰图而只需很小的体积，PNG将会变得越来越流行。
顺便提一句，大部分的图片编辑软件可以转换以上三种形式的图片格式。
6. 正确看待缩略图
大部分电商网站都有缩略图展示，它可以让访客迅速的扫描到尽可能多的商品样式而不需要再去点击一个额外的页面。
缩略图很棒，但是要小心，他们可能是你网站的速度杀手。他们通常会出现在关键的购物流程之中，若因此影响了购物流程的流畅性，额… 那你就可能又损失了一个顾客。关于缩略图，我个人有如下两点建议：
尽可能压缩缩略图体积，缩略图的图片不要过高的追求显示质量，当用户点击到下一层详情页面的时候再给他一张高质量的图片。
尽量不要为缩略图设置alt标签，通常我们并不希望搜索引擎索引的是缩略图而应是产品详情页的高质量原图。
7. 使用图片地图
如果你的网站用JS做图片效果来更好的提升用户体验，你是否担心图片是否还能收录？当然通常来说蜘蛛是不会爬取不显示在源代码里面的图片文件的，但是谷歌对于这点已经很有经验了，通过图片地图的提交，即把图片地址一个个老老实实地列出来，搜索引擎就可以爬行了。
对于图片地图，我就不多说了，因为谷歌有许多指导文档来帮助你提升图片的搜索排名，看这里。
8. 留心装饰性图片
非产品类的图片比如背景图、按钮图，边框图等都可算作装饰图，作为一个优化者，你需要仔细去检查这些图片的体积是否过大，是否会影响网站载入速度。
这里有一些关于如何压缩装饰图的建议：
如果只是一些边框类的、或是简单的样式图片，使用PNG-8或者GIFs，你可以创建非常好看的图片并且只占几百bytes的体积。
如果可能的话，尽量使用css来创建一些特殊效果，而非图片。
【分享做图片优化的8个技巧图片优化该怎么做】不建议为网站设置背景图片，如果一定要有的话，在保证清晰度的前提下最大程度去压缩体积。你还可以把背景图当中镂空或保持透明来压缩体积。

分享做图片优化的8个技巧 图片优化该怎么做( 二 )

分享做图片优化的8个技巧图片优化该怎么做( 二 )