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/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

WordPress 5.0+ 禁用 Gutenberg & WordPress 5.8+ 禁用 Widget 块编辑器

2018.12.06,WordPress 5.0 发布,代号 Bebo。最大的亮(黑)点就是正式引入新的基于块(block-based)的编辑器 —— Gutenberg 编辑器,以及新的默认主题 —— Twenty Nineteen。 WordPress 5.0+ 禁用 Gutenberg 编辑器 第一时间升级,打开文章编辑,一股说不出的杯具感在心头……变化太大,心累…
浏览: 48 标签:  ,  ,  , 

Adobe Flash Player 去helper(Win10 完美恢复)

Adobe 在2020年12月31日后将不再支持 Adobe Flash Player,从2021年1月12日开始,阻止 Flash 内容在 Flash Player 中运行。截图 虽然不喜欢 Adobe Flash Player,但是有些网站目前仍然离不开 Adobe Flash Player,过渡解决方法是:安装中国特供版 Adobe Flash Player 或者安装网友修改 Adobe Flash…

升级新版 Google AdSense 代码提升广告效果

2021年7月19日,Google AdSense 最近发布了新版 AdSense 代码。通过新版 AdSense 代码,AdSense 可以更早触发优化功能,从而提升网站上广告效果。新广告代码适用于自动广告和广告单元。 如何获取 Google AdSense 新版代码? 无需采取任何措施。在下次登录 AdSense 后,您将拥有对新广告代码的访…

利用 Google Analytics 追踪 WordPress 站内搜索关键词

Google分析(Google Analytics)是一个由 Google 所提供的网站流量统计服务。Google 分析(Analytics)现在是互联网上使用最广泛的网络分析服务。 利用 Google Analytics 追踪 WordPress 站内搜索关键词 优化内容 如果网站/博客在 Google Analytics 流量统计,利用 Google Analytics 追踪 W…
浏览: 165 标签:  ,  ,  ,  , 

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信息