图片优化须知的8个小技巧

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

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

　　咱们要思考一下，访客的搜索习惯是什么？会搜索哪些关键词？最好能够再看一下谷歌统计里面的关键词数据，看看有无遗漏。基本上来讲，访客更倾向于搜索品牌词+产品系列的词组组合和变化，那么alt标签的结构化规则就出来了，能够写为：alt=”{品牌词}{产品系列}-{产品型号}”。对于产品图片的描述来讲，不建议写过多冗余内容，保持数据结构化，作到关键词辨识度高，关键词信息丰富就能够了，千万不要作关键词堆积。

　　2. 图片拍摄角度问题

　　基本上拍摄产品照片不会只拍一个角度，访客确定不会知足于只有一张正面照，多角度的去展现图片才能更好的吸引访客在你的网站上停留更多的时间，才能够去激发起他们的购买欲望，因此天然须要拍摄物体的正面，背面，侧面，细节等等，这个时候如何写alt标签？

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

• alt={品牌词}{产品系列}-{产品型号}-正面

• alt={品牌词}{产品系列}-{产品型号}-背面

• alt={品牌词}{产品系列}-{产品型号}-侧面

　　保持主干“{品牌词}{产品系列}-{产品型号}”不变，可让搜索引擎充分确认当前图片系列或是页面就是关于那个关键词，从而让这些图片被图片搜索引擎搜索到的概率大大增长。单枪匹马必定倒下。

　　3. 关于大图的显示问题

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

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

　　4. 给图片减减肥

　　先看看这些数据，

• 大部分台式机或是笔记本用户不会等待超过3秒的网站加载速度

• …在移动设备上不会等待超过5秒钟

• 亚马逊发现若是他们的网站加载速度慢了1秒钟，他们一年将损失16亿美圆

• 搜索引擎将网站加载速度列入了排名算法之中

　　若是你大量的网站图片很是臃肿，这将严重影响网站加载速度，若是超过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你要十分当心，看仔细了。

　　经过对比相同体积下（都是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来建立一些特殊效果，而非图片。

• 不建议为网站设置背景图片，若是必定要有的话，在保证清晰度的前提下最大程度去压缩体积。你还能够把背景图当中镂空或保持透明来压缩体积。