Webp优化多图网站加载

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

屏幕快照 2019-04-13 下午 6.04.53.png

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

这时候问题来了

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

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

QQ20190413-182755.png

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

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

  • 创建jpgwebp文件夹,将自己选好的图片放入到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.php210240行中的png改为webp

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

主题地址:Material

本文链接:https://ariser.cn/index.php/archives/44/
本站文章采用 知识共享署名4.0 国际许可协议进行许可,请在转载时注明出处及本声明!