前言

图片不经过压缩或转换格式等处理就直接上传到网站使用,日积月累后较大体积的图片会占用更多的硬盘空间不说,还会延缓页面加载时间和耗费更多的CDN流量。在除了一些LOGO可能选用SVG、PNG等格式外,站点其他图片尽可能选择webp或者avif格式。

图片格式的选择

1.图片不转换格式,只对原图(jpg、png等)进行压缩处理。

2.图片转换成webp或者avif格式。

3.同时提供avif、webp、jpg/png(已压缩)格式的图片,视客户端的支持情况自动显示相应格式的图片(支持avif即显示avif格式的图片,不然依次回退webp、jpg/png)。

看了网上各种文章和视频,最后选择了avif作为站点图片的格式,战未来嘛。avif最主要的缺点当然就是兼容性差,我自己手机使用的是HarmonyOS NEXT系统,在很多浏览器或者应用中打开网站后,avif格式的图片无法显示。多次致电华为客服,期待尽早解决。如果对于兼容性有顾虑可以选择webp格式或者原图压缩的方案。亦或者提供多格式并自动回退的方案,不过我不会相关的代码也觉得操作麻烦,干脆在本地备份了原图和转换后的avif格式图片,并只上传avif格式图片到网站使用。

图片的处理

图片的简单编辑可以使用Photopea(类似于PS的网页版)。优点是功能比较丰富且网页即可使用,还不需要登录。

https://www.photopea.com/

图片的压缩和格式转换使用的是imagestool。网页端即可使用,不需要登录,且处理的图片不需要上传到服务器。

https://imagestool.com/zh_CN/