电商网站图片优化8大技巧

2018-06-09 11:01

如果你运营在线商城又或是大型电商网站，图片优化是你必须要掌握的。不仅仅是从吸引潜在消费者，还是增加图片搜索流量，又或是提升网站加载速度，图片优化扮演者非常关键的角色。但说到图片优化，很多传统意义上的SEO人会说，图片要加alt标签，图片要压缩…这样的粗线条显然是不行的。

　　1、用结构化数据写产品图片ALT

　　我们很容易使用照相机默认的图片编号当做图片们的命名，这样的话对于搜索引擎来说，可能就没有办法辨识图片的内容，从而我们就失去了从图片搜索那块儿带来的流量，这是非常可惜的，特别是当你的产品有数以万计的话。通常我们可以制定结构化数据规则让技术人员设计程序批量替换图片的alt属性，而无需我们手工操作。

　　对于产品图片的描述来说，不建议写过多冗余内容，保持数据结构化，做到关键词辨识度高，关键词信息丰富就可以了，千万不要做关键词堆积。

　　2、图片拍摄角度问题

　　基本上拍摄产品照片不会只拍一个角度，访客肯定不会满足于只有一张正面照，多角度的去展示才能更好的吸引访客在你的网站上停留更多的时间，这个时候如何写alt标签?

　　最好的方法也是保持alt标签的结构化，继承主图的格式，千万不要去给这些图片一个全新的写法。

　　3、关于大图的显示问题

　　如果你希望提供更大的图片让用户爽一下，这个思路很好，但要非常小心，不建议将大图直接放在网页上然后用css将图片缩小，虽然你看上去图片变小了，但是图片的尺寸还是实实在在存在的，这会影响加载速度。相反，你可以先放一张较小的图片，然后提供查看大图功能的选项，不管是点击弹出大图还是另外新页面显示。

　　当然，还有一些人会把大图切成一张张小图做拼接，这样做可以让图片快速显示，但同时一张图片切成小图之后，服务器的请求数会增加，从而会影响网页加载速度。所以，如果图片的体积实在过大的话，建议为图片专门配置新服务器。

　　4、给图片减减肥

　　如果你大量的网站图片非常臃肿，这将严重影响网站加载速度，如果超过10秒钟，那你等着和你的客户说byebye把。

　　图片文件应该多大?

　　有些理论说图片的大小应该保持在70kb以下，不过这个有时候是很困难的，特别对于大图片来说几乎是不可能的，除非你不求清晰度。我个人倒是觉得，不要用一个标准去限制每一张图片的大小，关键在于，我们有没有去执行，有没有看到我这篇博文后去真正压缩图片，这才是关键。

　　5、用对图片格式

　　目前有三种非常流行的图片格式，他们是JPEG，GIF，和PNG。让我们来看看他们有何不同，

　　JPEG (或者说 .jpg) 是最常用的图片压缩格式，支持最高级别的压缩。通常，对于显示要求比较高的图片来说，JPEG格式展示的图片效果较GIF和PNG有明显的优势。

　　GIFs (.gif) 的图片显示质量要比JPEGs逊色很多，通常用作非常简单的图片展示，比如素材或者装饰性图案，gif也可以用来制作动画。gif不适合用作高显示质量的图片。

　　PNG图片是比gif更好的选择，因为PNG图片支持的色彩要比GIFs多。此外，和JPEG一样，PNG反复保存也不会影响图片质量，而且对于小图来说，PNG占用的体积极小，PNG完美支持透明背景，所以一般logo或一般装饰性图案都会选择PHG格式。注意PNG-24图片体积要超3倍地大于同样情况下的PNG-8版本，对待PNG你要十分小心，看仔细了。

　　6、正确看待缩略图

　　大部分电商网站都有缩略图展示，它可以让访客迅速的扫描到尽可能多的商品样式而不需要再去点击一个额外的页面。

　　缩略图很棒，但是要小心，他们可能是你网站的速度杀手。他们通常会出现在关键的购物流程之中，若因此影响了购物流程的流畅性，额… 就可能又损失了一个顾客。

　　尽可能压缩缩略图体积，缩略图的图片不要过高的追求显示质量，当用户点击到下一层详情页面的时候再给他一张高质量的图片。

　　尽量不要为缩略图设置alt标签，通常我们并不希望搜索引擎索引的是缩略图而应是产品详情页的高质量原图。

　　7、使用图片地图

　　如果你的网站用JS做图片效果来更好的提升用户体验，你是否担心图片是否还能收录?当然通常来说蜘蛛是不会爬取不显示在源代码里面的图片文件的，但是谷歌对于这点已经很有经验了，通过图片地图的提交，即把图片地址一个个老老实实地列出来，搜索引擎就可以爬行了。

　　8、留心装饰性图片

　　如果只是一些边框类的、或是简单的样式图片，使用PNG-8或者GIFs，你可以创建非常好看的图片并且只占几百bytes的体积。

　　如果可能的话，尽量使用css来创建一些特殊效果，而非图片。

　　不建议为网站设置背景图片，如果一定要有的话，在保证清晰度的前提下最大程度去压缩体积。还可以把背景图当中镂空或保持透明来压缩体积。