图像优化和图像压缩 图像的alt标签和Title标签的设置

图片搜索在百度和谷歌搜索引擎中越来越重要。图片搜索有两种方式：一种是输入图片的相关文字，得到相应的图片搜索结果，另一种是直接使用图片进行对比搜索。比如百度可以直接用拍下来的图片作为搜索元素，淘宝和阿里也有类似的图片搜索功能。

图片优化的三个方面

图片alt标签:让搜索引擎读懂图片，提升图片关键词在图片搜索的排名

早期的搜索引擎无法识别图片的内容，alt标签是为了让搜索引擎读取图片，并告诉它们是关于什么的。当网站图片无法加载时，图片位置会出现替代文字。

图片title标签:更好的用户体验

当鼠标放在图片上时，有时图片上会显示文字。这是标题标签。当鼠标离开图片时，提示文字消失。

图片命名：包含关键词

图片src 属性中的图片名称，命名关键词相关，可以提升图片的关键词排名。图片目录层级也可以按照栏目关键词名称方式来命名。

注意：无论是title还是alt标签，不能恶意堆砌关键词，一般调用图片名称或者页面一个关键词即可。

图片压缩

图片相对于文字，占据较大空间，同时也使得流量成本增加，同时大的图片加载耗时长，影响网站加载速度，影响用户体验。所以图片压缩是图片优化的关键环节。

图片压缩方法一：简单压缩软件

如Windows的画图功能，可以通过缩减像素和比例来减小图片尺寸。另外网上本身有很多图片压缩软件，百度搜索以下即可在线使用。

图片压缩方法二：图片懒加载

图片懒加载技术对于大型电商网站十分重要，如淘宝网和京东网站，首页产品种类繁多，就是采用了图片懒加载，先展示首屏图片，鼠标下滑时再展示其他屏的图片。

图片懒加载使用的前端技术思路：将页面里所有img属性src属性用data-xx代替，当鼠标滑动到该图片出现时，用js取到该图片的data-xx的值赋给src。

图片压缩方法三：启用Gzip压缩

Gzip压缩成本较低，可以达到网站80%以上的压缩比例。

图片压缩方法四：CSS Sprites  

合并诸多小图片到一张图片。实际操作中这个较少用到，尤其是大型团队合作，每次修改小图片都比较麻烦。图片压缩值得一提的是谷歌的WebP格式图片，可以在很大程度上压缩图片而不失真，但是目前只支持Chrome浏览器，对别的浏览器支持效果不佳。