Webp优化多图网站加载

欢迎访问个人博客Aris-Blog

事由：近期把博客从WordPress转到了Typecho，使用了material主题。该主题文章显示可以选择随机图片的样式，样式如下：

3223814980.png

将自己准备好的图片命名为material-x.png(x为数字)，替换Themes/material/im/random下的图片。如果图片数目很多，请将控制台-外观-设置外观中的随机缩略图数量设置为你文件下图片的数目。

这时候问题来了

1. 图片数量过多，重命名过于麻烦。
2. 准备的图片文件过大网页加载奇慢无比，压缩(降低分辨率)后又会变模糊。

网页完全加载完用了30秒，且大部分时间是在等待png格式的图片加载。

4082333404.png

于是又想到了webp格式，766k的jpg格式图片转化成webp只有377k，大大节省了加载时间，且清晰度下降可以忽略不计。且支持动图。

312990276.png

写了Python脚本来实现批量图片格式转换以及自动命名为material-x.webp样式。

• 创建jpg和webp文件夹，将自己选好的图片放入到jpg，运行脚本即可自动转换。(其他格式自己该脚本里面的代码)

import PIL.Image
import os
i=1
path = "jpg/"
savepath = "webp/"
filelist = os.listdir(path)
for file in filelist:
    im = PIL.Image.open(path+filelist[i])
    filename = 'material-'+str(i)
    print(filename)
    im.save(savepath+filename+'.webp')
    i=i+1

另外还需将主题默认png格式更改为webp，编辑usr/themes/Meterial/functions.php的210和240行中的png改为webp。

更改之后，图片质量无损的情况下，加载速度大为提升。

• 图片秒瘦 90%，又拍云 WebP 转换技术让图片“薄如蝉翼”
• WebP 相对于 PNG、JPG 有什么优势？

主题地址：Material