by Devin Yang

建立于: 1年前 ( 更新: 1年前 )

我的网站中有大量背景图在同一个页面中,下载下来太大罗,需要瘦身,这cwebp工具不错。
在Ubunut的环境apt install webp就可以安装罗。  

关於webp转码,在这个网站有详细的中文说明 ,你可以参考看看: 
https://developers.google.com/speed/webp/docs/cwebp

并非所有的浏览器都支持webp,例如早期的MacOS中的safari,或许您想要连jpeg一起转码。

以Ubuntu为例,您可在Ubuntu环境安装以下两个包。
我是在Docker的环境进行安装的,采用自己架构的简易Docker环境phpenv

sudo apt install imagemagick webp

完成了上方安装命令,记获得道具三样:

cwebp
identify
convert

有了命令后,这支bash就诞生啦,此bash可分为三个部份。

开始前请注意,我写的这支bash极其暴力不会留下原图,
您如果要保留原图,请自己备份再测试哦!!

#!/bin/bash
#抓目录下所有的.jpg档
for o in $(ls *.jpg)
do
    filename="${o%.*}"
    #同档名webp不在在,进行优化,生成webp文件
    if [ ! -f "$filename.webp" ]; then
        cwebp -q 60 -resize 2048 0 $o -o "$filename.webp"
        #取得转码后的宽高
        WxH=$(identify ${filename}.webp|awk '{print $3}')
        #将原始的jpeg加上prefix origin_
        mv $o origin_$o
        convert origin_$o -resize ${WxH} $o
        #移除原始的jpeg,如果需保留请注解
        rm origin_$o
    fi
done


#jpeg大於600k文件,但确有webp时处理
#代表已转码过,可能只日是jpg来源又被大档覆盖,防重覆下载
SIZE=600k
for o in $(find *.jpg -type f -size +${SIZE})
do
   filename="${o%.*}"
   if [ -f "$filename.webp" ]; then
        #先使用原长宽进行jpg优化
        WxH=$(identify ${filename}.webp|awk '{print $3}')
        mv $o origin_$o
        convert origin_$o -resize ${WxH} $o
   fi
done

#强制优化,上面优化无效,JPG还是大於600K时,出大绝招
#直接把图档宽度降低1364,再转码
for o in $(find *.jpg -type f -size +${SIZE})
do
   filename="${o%.*}"
   cwebp -q 60 -resize 1364 0 $o -o "$filename.webp"
   #取得转码后的宽高
   WxH=$(identify ${filename}.webp|awk '{print $3}')
   #将原始的jpeg加上prefix origin_
   mv $o origin_$o
   convert origin_$o -resize ${WxH} $o
   #移除原始的jpeg,如果需保留请注解
   rm origin_$o
done

第一段循环: 正常处理,抓有jpeg无webp的档,进型图档缩小。
抓目录下所有的jpg档,取出档名,检查是否有同档名的webp存在(因为有带表转过了嘛)
不存在同档名的webp文件时,使用cwebp进行转码。
转出来后,我用identify命令抓出webp的图档长宽。
因为convert命令,不能像webp那样,指定宽度,高度等比调整,
所以转码后的webp长宽透过identify入手后,直接拿来给convert用,进行jpg档缩小优化。

第二段循环: 重覆处理,当有jpeg又有webp时,但jpeg文件容量大於600k( 归类原因: jpeg档又被原始大档覆盖或第一段的过程真的缩不下来,极少发生)。
防优化过后的jpg可能再次被我下载,於是又被重新转码,
因此,这里抓超出600k的JPG档,然后同时也存在webp同档名的文件。
然后使用webp的长宽,再次重新优化一次jpg。

第三段循环: 毁天减地处理,这里我出大绝招了,图档宽度再缩减,采无差别攻击webp跟jpeg都一起缩小宽度。
就是有些jpg图很不乖,优化后还是很大,超出600k,所以第三段我就出大绝了。
用find命令,抓出大於600k的jpg图,直接缩小图档宽度,再进行优化。
理论上可以先备份webp,调完jpg后再还原webp,
但没错我就是这么暴力的解法,直接webp的宽度一起缩小不还原啦。

如果您使用了我的bash还有超出600k的文件自己看著辨,手动处理吧🤣

Tags: cwebp bash

Devin Yang

文章内容无法一一说明,如果您有什么不了解处,欢印提问哦:)

No Comment

Post your comment

需要登入才可留言!

类似文章


terminal,shortcuts,bash

终端机热键攻略

本文介绍及整理一些终端机的热键,来看看有那些你不知道的吧?快来试试。

bash,ffmpeg

webm to mp4

怎样用ffmpeg把webm转mp4呢。

ansible,bash

我的第一只ansible,自动化数据库转移

本文是我在MacOS上采用Docker方式,运行Ansible使用经验分享, 您可以依这个目录结构调整成您要的Ansible环境,或进行Ansible的学习。 情境是这样的,我希望在我的测试环境可以看到最接近正式机相同的文章, 但我又不想用测试机进程直接连正式机的数据库。 我的手动做法就把正式机db导出来,copy到测试机再导入, 虽然没几个步骤,但做起来好像还是有点烦,加上手动操作容易出错, 这让我想起了Ansible这个东西, 我有听过但没试过,不如就来试试看。