10年网站建设优化实战经验
18217721733

超全面!网站图片优化的10种方法和工具介绍

上海知九信息 图片优化 网站优化 SEO svg矢量图 响应式网站 前端性能 2020-07-13

企业网站的图片一般作4种用途:页面布局配图、案例/设计图片、内容示意配图、缓解阅读疲劳。比如网站各模块的背景图、大小图标、列表页的缩略图等可以归类到页面布局配图,主要是优化页面排版设计使其更美观,突出模块间的区隔;文字内容的说明性截图、案例示意截图、操作流程图等可归类到内容示意配图,主要为内容的展开提供依据或让内容理解更加直观。也有不需要配图的时候,只是怕访客对大段文字望而生畏,配个图缓解下阅读疲劳,或单纯为了有个缩略图。 

一般网站SEO关注关键词、文字内容和链接层面比较多,对图片优化的关注相对少一点。本文总结了一下图片优化的思路,并介绍了一些辅助工具,希望能对大家有所帮助。

图片优化方法和工具

1、为图片添加简短的alt属性

图片的alt属性比较为人熟知,其允许为图片指定替代文字。当图片由于某种原因无法显示时,在图片区域内显示alt属性中的替代文字,以告诉用户此处是什么图片,一定程度上缓解给用户造成的体验降低。或者当用户使用屏幕阅读器等辅助技术查看网站时,屏幕阅读器可以将图片中的alt属性内容转换成语音或点字供用户了解。

如果将图片用作链接,则该图片的替代文字会等同于文字链接的定位文字。同时,alt属性能帮助搜索引擎更好的了解图片的内容,也可能在图片搜索项目中获得相关查询的展示机会。

alt属性应当使用简短的、有意义的描述性文字,避免太复杂、无意义或堆砌关键词等情况。

2、图文关联、视效佳

百度搜索学院在《网站违规内容——出现这些百度不收录》中提到一点:图文之间无关联,图片质量低、画面不清晰;在《百度搜索优质内容指南》中也描述了图片内容的优质标准,如下图。所以,图片和内容必须有关联(哪怕只是为了缓解阅读疲劳不显得枯燥),并尽可能保障理想的视觉效果。

百度图片内容优质标准

3、图片文件大小优化

很多网络图库、截图软件、拍摄设备获取到的图片文件比较大,随便就能达到1M甚至10几M,这对于带宽本来就小的中小网站来说,简直是噩梦。特别对于一些通栏图、案例照片等比较大的文件,建议优化后使用。

网站中很少需要用到两、三千像素宽度以上的大尺寸图片,这类图片建议根据使用环境降至1920像素及以下宽度,压缩到合适的输出品质。包括其他小尺寸图片,需要的情况下也高保真压缩处理下。

这里介绍3个好用的图片优化工具:

  • PS批处理快捷方式:在PS中创建一个或多个图片处理动作,然后文件--自动--创建快捷批处理,就生成对应的桌面快捷方式,需要的时候,直接将待处理的图片选中拖入批处理的桌面快捷方式,就全自动处理了。
  • 在线改图压缩:TinyPNG压缩图,免费版有图片大小2M上限的限制,支持批量处理,目前都可用。
  • 图片压缩客户端:软件名Caesium,网上搜索可以找到下载资源。

压缩图官网截图

4、多位置图片尺寸优化

这里说的图片尺寸优化跟第3点中的有所不同。大多时候存在这样一种情况:文章内配图尺寸较大,到栏目列表使用的缩略图变小了,其他页面底部或侧边栏推荐文章时使用的缩略图更小一点了(它们不在同一个页面),还有独立PC和移动网站之间也是这样。假如都是加载原始图片,就增加了不少本不需要的加载时间。

这种情况,就可以对不同位置的同内容图片进行尺寸优化,在服务端程序创建图片裁剪函数,根据不同的位置裁剪不同的尺寸图片。静态网页需要将裁剪得到的图片保存到服务器上,以便调用;伪静态和动态网站可存可不存。

5、响应式图片

如果是同一个位置的图片,但在不同大小的设备上,需要显示不同大小呢?尽管一个图片也可以自动缩放在不同大小的区域显示,但可能会存在大容器显示拉伸的小图片模糊失真,小容器显示缩小的大图片增大了网页资源体积。

HTML5的picture元素为我们提供了另外一种方案。它可以设置多个图片源,并根据媒体查询指定显示哪一张图片。

6、移动端图片支持大图缩放、滑动切换

百度在移动落地页规范中说明:详情页中主体内容包括图片的情况下,图片应能点击调起大图、缩小放大功能使用自如,手势支持顺滑,图集能自由切换。试一试本文主体内容中的图片,基本符合其描述。

这里介绍一个支持点击调起大图、缩放、滑动切换的JS插件工具:simple lightbox。

7、图片合并减少http请求

每有一张图片就需要发送一个HTTP请求,而浏览器和服务器之间请求发送、响应、返回的连接过程往往比下载这张图片所需消耗的时间还多(https的三次握手过程比http还要多耗一些时间)。且单一客户端的浏览器和某一服务器之间的并发连接是有限制的(非服务器做出的限制,据说是浏览器为了保证性能和各标签页访问不同网站的性能均衡做出的限制,各浏览器大概是4~10个不等的并发上限),所以过多的请求是在请求队列中等候的。

合并图片减少http请求,就可以较好的解决上述问题。一般多用于LOGO、小图标等场景。

以前的解决方案是使用CSS雪碧图,将所有小图标合并在一张大图上,再利用贴图定位技术去显示特定区域的图片。但维护的时候牵一发而动全身,不太方便。

在技术发展、移动网络/CPU性能提升后,现在有了新的解决方案:SVG矢量图标库。请求一个js文件,就可以通过设置HTML元素的类名调用图标了,任意放大缩小不模糊失真,还能自由控制显示颜色。介绍一个在线工具:iconfont,阿里巴巴出品,很不错的一个字体图标库,最给力的是支持中文搜索图标。

svg图标库iconfont

8、图片懒加载

图片懒加载一般针对图片列表或长图文列表等图片多、总资源较大的场景。

将图片的src引用地址统一设置为某个较小图片的地址,这样网页打开的瞬间实际上只请求了一张小图片;将图片真实的src引用地址设置到自定义的data-img-src属性值中,通过JS实时检测图片是否处在屏幕可视区域内,如果是,则获取对应的data-img-src属性值,替换到src引用地址中,从而再次加载真实的图片。

这样通常能保障首屏在极短时间内加载完毕,然后边下拉边加载,从而提高浏览体验。当然,也可以使用异步加载的方式,这样图文都是边下拉边加载的。

9、图片与程序服务器分离

将图片分离到图片专用服务器上,通常是对象存储服务器。一方面对象存储服务器拥有高速的传输带宽,不占用源服务器带宽,传输速度快;另一方面打破了浏览器对同一个服务器并发连接上限的限制,整体的速度一下就飚上来了。并且对象存储服务器相对传统的树形目录文件结构,本身就有文件查找速度上的先天优势,感兴趣自行研究。

10、开启图片缓存

我们的各个网页之间其实是共用不少文件的,比如CSS、JS、图片。像LOGO、导航图标、底部二维码、侧边栏悬浮工具等都存在共用的图标,甚至部分主体之间也有共用。

那么,通过服务器设置图片的缓存时间返回给浏览器,在访问一个网页之后再访问另外一个网页,缓存没过期的情况下,相同的文件浏览器就不再向服务器发出请求,直接使用本地的缓存文件,从而减少资源请求量,提升了速度。

图片优化总结

图片优化其实是围绕图片质量、交互体验、加载速度3个方面去做的。以上介绍的方法中有些是必须的,如:alt属性,图文关联视效佳,点击调起大图缩放。其他的大都是关于文件大小和加载速度的,可以结合应用场景和需求,自由搭配组合使用。