图片优化既是一门艺术,也是一门科学,图片优化是一门艺术,是因为单个图片的压缩不存在最好的特定性方案,而图片优化之所以是一门科学,是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置,需要按照许多维度进行认真分析:格式能力、编码数据内容、像素尺寸等。
很多SEO优化人员进行网站优化的时候,在内容上下足了功夫,往往却忽视了图片优化。今天我们一起来谈谈图片优化对SEO优化的重要性。
一. 图片优化的重要性
你是喜欢看全篇都是文字的文章,还是喜欢看图文并茂的文章?May相信很多人都会比较喜欢看图文并茂的文章,这样不会太枯燥。好的图片能缓解用户视力疲劳,也能提高用户浏览体验;那搜索引擎呢?图片也是给搜索引擎看的,但是搜索引擎不能识别图片上的内容,图片需要优化后才能帮助搜索引擎更好地理解图片上的内容。
二. 图片优化格式
不同的图片格式具有各自不同的特点,选择图片格式是图片优化的第一步。
图片格式 | 压缩方式 | 透明度 | 动画 | 浏览器兼容 | 适应场景 |
JPEG | 有损压缩 | 不支持 | 不支持 | 所有 | 复杂颜色及形状,尤其是照片 |
PNG | 无损压缩 | 支持 | 不支持 | 所有 | 透明背景 |
GIF | 无损压缩 | 支持 | 支持 | 所有 | 简单颜色,动画 |
APNG | 无损压缩 | 支持 | 支持 | Firefox, Safari, Safari iOS | 半透明效果的动画 |
WebP | 有损压缩 | 支持 | 支持 | Chrome, Opera Android, Chrome Android Browser | 复杂颜色及形状,浏览器有限制 |
SVG | 无损压缩 | 支持 | 支持 | 所有(IE8以上) | 简单图形,良好的放缩体验,动态控制图片特效 |
1. 需要颜色丰富的图片,JPEG(JPG)是通用的选择:
JPG在压缩率不高的情况下保留的细节还是不错的;
人眼的结构很适合查看JPG压缩后的图片,可以充分的忽略压缩后的部分并在脑中补齐细节;
WebP能够比JPG减少30%的体积,但目前存在兼容性差的问题。
2. 需要透明背景的图片,PNG比较好
PNG可以为原图像定义256个透明层次,使得彩色图像的边缘能与任何背景平滑地融合,从而彻底地消除锯齿边缘。
3. 需要较通用的动画,GIF是唯一的选择
GIF格式的图片已经变成人们心目中约定俗成的动画格式,有多张图片保存为一个图片,形成动画的效果。
如果你实在是很难分清楚图片的格式,请记住:透明找PNG,动画找GIF,其他找JPG。
三. 图片优化尺寸
很多时候我们会很纠结,图片太大,打开的速度就会很慢;图片太小,看上去不是很清晰,影响用户体验。这时候往往需要我们来把握一个度,在尽可能保持图片清晰的前提下,让图片尽可能小。其中有一个需要我们特别注意的地方就是我们一定要控制图片的大小恰好是显示所需的尺寸,图片的大小恰好是显示所需的尺寸,图片的大小恰好是显示所需的尺寸,重要的事情说三遍!怎么理解?举个例子来说明,你上传的图片大小为200*200px,但显示的时候调整为100*100px,图片在展示时缩小,一方面图片给人的感觉是不清晰;另一方面浏览器需要先加载完200*200px大小的图片后再将图片缩小为100*100px,其中200*200-100*100=30000个像素是浪费的,影响了加载时间。再次提醒:图片大小恰好是显示所需的尺寸!
四. 图片优化属性
首先,我们要知道图片使用的是img标签,其中有五大属性:width、height、src、alt、title。正规的写法是将图片的五大属性写完整。我们有时候偷懒将一些属性忽略了,细节决定成败,完整地写好五大属性,无形中对图片进行了优化,对SEO优化有很重要的作用。
1. width和height属性分别定义图片的宽和高,搜索引擎在抓取的时候,就是根据width和height属性值来判断图片的尺寸。
2. src是定义图片的链接地址,可以是相对路径,也可以是绝对路径,各有优缺点,考虑以后可能会更换域名就使用相对路径;而绝对路径的优势就在于减少识别时间,有利于快速加载和SEO优化。
3. alt属性,到目前位置,搜索引擎蜘蛛还无法识别图片内容,alt属性值是给搜索引擎看的,是帮助搜索引擎更好地理解图片内容。在alt属性优化时,我们需要特别注意多张图片,不要重复解释,也就是每个alt属性值不要一模一样,且不要堆砌关键词,容易被认为有作弊的嫌疑。做好alt图片优化,会大大提高搜索引擎的友好度。
4. title属性,很容易被忘记和忽视,其实title和alt同样重要,当用户鼠标停留在图片上时会显示title中的内容,这对用户体验是很大的辅佐,同时也会多呈现一次关键词。
总结:图片优化是SEO优化中重要的一个部分,帮助搜索引擎认识和理解图片内容,提高搜索引擎友好度;也帮助用户更生动地理解文字,方便用户阅读。
关键字:图片优化