PHP 自动转换图片为 WebP 格式+Nginx 自适应

原本是折腾 Nginx-Lua 将 Jpg/png 转换 WebP 并自适应,无奈技术菜,看着别人教程,也没能把 Lua 折腾上。退一步,开了个 DigitalOcean VPS 直接安装 OpenResty(默认带 Lua),测试站,仍然不成功。实在无力,又不甘心,再换一个方法:PHP cwebp 转换图片为 WebP 格式,然后 Nginx 自适应。

方法来自挖站否,有几种方法,需要的不妨折腾试试。简单记录一下。

PHP 自动转换图片为 WebP 格式+Nginx 自适应

方法:初始使用 cwebp 批量将所有图片转换为 WebP,后续 crontab 定时增量转换图片。然后 Nginx 判断浏览器是否支持并输出 WebP。

安装 WebP

yum -y install libwebp-devel libwebp-tools

服务器批量转换 WebP

80 为压缩质量,一般 75 也可以。

find /ooxx.com/wp-content/uploads/ -name "*.jpg" -exec cwebp -q 80 {} -o {}.webp \; 
find /ooxx.com/wp-content/uploads/ -name "*.png" -exec cwebp -q 80 {} -o {}.webp \; 
find /ooxx.com/wp-content/uploads/ -name "*.gif" -exec gif2webp -q 80 {} -o {}.webp \;

crontab 定时增量转换 WebP 图片

只转换一天内修改过的图片:

#!/bin/sh

find /ooxx.com/wp-content/uploads/ -mtime -1 -name "*.jpg" -exec /usr/bin/cwebp -q 80 {} -o {}.webp \;
find /ooxx.com/wp-content/uploads/ -mtime -1 -name "*.png" -exec /usr/bin/cwebp -q 80 {} -o {}.webp \;
find /ooxx.com/wp-content/uploads/ -mtime -1 -name "*.gif" -exec /usr/bin/gif2webp -q 80 {} -o {}.webp \;

上面代码修改后,保存为 convert2webp.sh,上传到 root 目录下。

允许脚本执行:

chmod +x /root/convert2webp.sh

8小时执行一次转换:

01 */8 * * * /root/convert2webp.sh > /dev/null 2>&1 &

方法有点菜,不过总比手动好吧?囧……

Nginx 判定并自动加载 WebP 图片

nginx 配置文件 nginx.conf http {} 中加入以下代码:

map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}

主机配置文件 ooxx.com.conf 中 server {} 段加入以下代码:

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
#expires 30d;
#access_log off;
add_header Cache-Control "public, no-transform";
add_header Vary "Accept-Encoding";
try_files $uri$webp_suffix $uri =404;
expires max;
}

重启一下 nginx——service nginx restart,Ctrl+F5 刷新一下带图片文章,就会加载 WebP 图片。

右键图片打开路径还是原本 .png 或者 .jpg 路径,右键另存为就是 .png.webp 或者 .jpg.webp 格式。

后记更新

有些图片压缩很明显,也有些图片体积反而增大不少,还是去掉算了。

参考资料

网站启用WebP格式图片-PHP和Nginx转化WebP格式和自适应浏览器

为Nginx添加将图片转换成WebP支持

Nginx+PHP配置自动转换webp图片

nginx 之前端图片webp

find命令

除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/1149/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🔞:Netflix 奈飞 YouTube 合租免费节点Telegram 频道

使用 rclone 将 Google Drive 文件同步至 OneDrive

前几天上了博友「灵尘居」的 Office 365 车,1T OneDrive 到手,手机照片一直喂 Google AI,挺方便的,以前还会同步一份到家里的垃圾西数 NAS,不过并不太自动,后来就懒得弄了。 Google 虽然是大厂,但是数据只有一份,还是怕怕,多一个备份不是坏事。苹果 iCloud 不错,但是贼贵,况且我只有一个…
浏览: 110 标签:  ,  ,  ,  , 

尼康 D7100 中文使用说明书 高清 PDF 电子版免费下载

尼康 D7100 说明书是一份介绍详细尼康 D7100 单反官方教程,推荐购买了 D7100 单反博友下载保存参考,以便随时查看一些常用按键操作和使用技巧。 尼康 D7100 简介 尼康 D7100 搭载先进的对象捕捉性能和成像性能,能够忠实还原拍摄细节。高密度的 51 点自动对焦系统准确捕捉目标对象并进行跟踪,…

全网热门公共 BitTorrent Tracker 列表合集 加速BT下载

BT 下载速度取决于其他下载同一资源的用户上传速度。做种「指上传文件数据给其他 BT 用户的行为」用户越多,你的下载速度越快!如果资源没人提供上传,就会完全没有下载速度,而做种用户靠 Peer、DHT、Tracker 获得。 Tracker 是什么? BT 下载的文件都是其他用户上传给你的。 BT 下载速度…

换域名?改固定链接?

去年底注册了个短域名,虽然非主流,但是胜在够短,两字母,还没有溢价。一直寻思着把它转移到 Cloudflare,换到博客使用,无奈 Google Adsense 一直没能折腾审核通过。 WordPress 修改固定链接? 以前听说 postname 更有利于 SEO,曾经试过人工翻译。后来嫌麻烦,干脆只用 /%post_id%/,后面 .…
浏览: 119 标签:  ,  ,  , 
浏览: 148 标签:  ,  ,  ,  , 

Comments:11

  1. 沙唐桔-浮游
    浮游

    WebP挺好可惜苹果设备不支持,不然也想着上WebP,换句话说只要把苹果干掉,WebP就全平台支持了

    2019.09.28 10:31 # 回复
    1楼
    • @浮游 上吧,兼容一下就好。

      2019.09.28 12:22 # 回复
      • 浮游

        @老杨 很讨厌适配的问题,真以后成了全平台的标准在上吧

        2019.09.28 14:31 # 回复
        • @浮游 只要判断一下,凡是chrome的适配webp,其余保持原状。

          2019.09.28 23:01 # 回复
          • @Yan 然而比较尴尬的是本文图片 WebP 格式比原本 png 图片还要大……

            2019.09.29 19:54 # 回复
  2. 这个有用 放进收藏夹

    2019.09.30 07:29 # 回复
    2楼
  3. hmm,可以考虑我的方法。。

    https://kn007.net/topics/add-convert-image-to-webp-support-for-nginx/

    2019.10.03 19:58 # 回复
    3楼
    • @kn007 参考文章那里就有你的文章啊,第一步 Lua 就没搞定,就放弃了……

      2019.10.03 22:52 # 回复

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息