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 合租

Gravatar 头像被墙及解决方案 Gravatar 头像国内镜像地址大全

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functi…
浏览: 131 标签:  ,  ,  ,  , 

Redmi Note 9 4G 刷机欧洲EU版净化去广告

虽然口水苹果十三香,但是眼下囊中确实只有红米……到手不用 1000 大洋,试试也无妨,实在不行再找银行/东哥要十三香。 入手 Redmi Note 9 4G 缘由:领导的微信机 iPhone SE 一代确实很老了(再过两个月就开始第六个年头了),没有换过电池,进过水修过一次,现在经常尿崩突然就关机了得插上…

使用 GoAccess 分析 Nginx 日志

最近发现博客加载图片大多时候都是龟速,想过换服务器,换回主机(比如传说中的外贸主机 SiteGround),图片上 CDN……想了一圈,最终什么都没动,一是穷二是懒三是图片多茄大的水文并不多,先这样吧,实在不行再折腾。倒是忍不住折腾了一下 GoAccess 分析 Nginx 日志,分析了一圈,没什么用。 记录…
浏览: 91 标签:  ,  ,  , 

WordPress 纯代码实现彩色标签云及简单优化配置

WordPress 自带标签云小工具,侧栏直接添加即可,就是默认样式有点平淡,可以加点代码实现彩色标签云及简单优化一下。 WordPress 纯代码实现彩色标签云 代码丢到 WordPress 主题 functions.php 文件即可: //彩色标签云 tag cloudfunction theme_color_cloud_hook($text) { $text = preg_rep…
浏览: 123 标签:  ,  ,  ,  , 
浏览: 43 标签:  ,  ,  ,  , 

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