帮酷LOGO
0 0 评论
文章标签:网站  WEBP  图像  WEB  images  speed  

介绍

webP是谷歌在2010年基于VP8视频格式开发的开放图像格式,自那以后,使用WebP格式的网站和移动应用程序的数量快速增长。

本教程将使用命令行工具cwebp将图像转换为WebP格式,创建在特定目录中监视和转换图像的脚本。

第1步-安装cwebp并准备图像目录

在本节中,我们将安装软件来转换图像,并且创建一个包含图像的目录作为测试。

在Ubuntu 16.04上,通过键入以下命令,安装cwebp,它将图像压缩为.webp格式:


sudo apt-get update
sudo apt-get install webp 

在CentOS 7上,输入:


sudo yum install libwebp-tools

要在Apache web root (默认位于/var/www/html处)类型中创建名为webp的新镜像目录,请执行以下操作:


sudo mkdir /var/www/html/webp

将此目录的所有权更改为你的非root用户萨米:


sudo chown sammy: /var/www/html/webp

要测试命令,可以使用wget下载免费的JPEG和PNG图像,这个工具默认安装在Ubuntu 16.04上; 如果你使用的是CentOS 7,则可以通过键入以下内容进行安装:


sudo yum install wget

接下来,使用以下命令下载测试图像:


wget -c"https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
wget -c"https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
wget -c"https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png


cd /var/www/html/webp

第2步-使用cwebp压缩图像文件

为站点访问者提供.webp图像需要.webp版本的图像文件,在此步骤中,你将使用cwebp将JPEG和PNG图像转换为.webp格式,命令的一般语法如下所示:


cwebp image.jpg -o image.webp

-o选项指定WebP文件的路径。

由于仍在/var/www/html/webp目录中,你可以运行以下命令将image1.jpg转换为image1.webpimage2.jpgimage2.webp


cwebp -q 100 image1.jpg -o image1.webp
cwebp -q 100 image2.jpg -o image2.webp

将品质因数-q设置为100可以保留100%的图像质量;如果未指定,则默认值为75.

接下来,使用ls命令检查JPEG和WebP图像的大小,-l选项将显示长列表格式,包括文件大小,-h选项将确保ls打印人可读的大小:


ls -lh image1.jpg image1.webp image2.jpg image2.webp


Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
-rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

ls命令的输出显示image1.jpg的大小为7.4M,而image1.webp的大小为3.9M。image2.jpg (16M)和image2.webp (7M )同样适用,这些文件几乎是它们原始大小的一半!

为了在压缩期间保存完整的原始图像数据,你可以使用-lossless选项代替-q ,这是保持PNG图像质量的最佳选择,要转换从步骤1下载的PNG图像,请输入:


cwebp -lossless logo.png -o logo.webp

以下命令显示无损WebP图像大小(60K )大约是原始PNG图像(116K )的一半大小:


ls -lh logo.png logo.webp


Output-rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png
-rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 logo.webp

/var/www/html/webp目录转换的WebP图像比它们的JPEG和PNG图像小约50%。

第3步-在目录中转换JPEG和PNG图像

现在我们编写一个转换脚本来查找JPEG文件并将它转换为90%质量的WebP格式,同时将PNG文件转换为无损WebP图像。

在你的用户目录中创建webp-convert.sh脚本,使用nano或你喜欢的编辑器:


nano ~/webp-convert.sh

脚本的第一行将如下所示:

~/webp-convert.sh

find $1 -type f -and ( -iname"*.jpg" -o -iname"*.jpeg" )

此行包含以下组件:

:此命令将搜索指定目录中的文件,$1 :此位置参数指定图像目录的路径,从命令行获取,-type f :此选项告诉find只查找常规文件,-iname :此测试与指定模式匹配的文件名,区分大小写-iname测试告诉find查找以.jpg (*.jpg )或.jpeg (*.jpeg )结尾的文件名,-o :这个逻辑运算符指示find命令列出与第一个-iname测试(-iname"*.jpg" )或第二个(-iname"*.jpeg" )匹配的文件,

脚本的第二行将使用-exec参数将图像转换为WebP ,此参数的一般语法为 -exec command {} ; 字符串{}由命令迭代的每个文件替换,而;告诉find命令结束的位置:

~/webp-convert.sh

find $1 -type f -and ( -iname"*.jpg" -o -iname"*.jpeg" ) 
-exec bash -c 'commands' {} ;

在本例中,-exec参数需要多个命令来搜索和转换图像:

bash :这个命令将执行一个小脚本,如果不存在该文件,则将执行.webp版本,此脚本将作为字符串传递给bash,因为-c选项,'commands' :这个占位符是将使你的文件的.webp版本成为脚本的脚本,

'commands'内的脚本将执行以下操作:

创建webp_path变量,测试文件的.webp版本是否存在,如果文件不存在,则生成该文件, ~/webp-convert.sh

...
webp_path=$(sed 's/.[^.]*$/.webp/' <<<"$0");
if [ ! -f"$webp_path" ]; then 
 cwebp -quiet -q 90"$0" -o"$webp_path";
fi;

脚本中的元素包括:

webp_path :将使用和bash命令中的匹配文件名生成此变量,由位置参数$0表示,这里的字符串(<<< )将把这个名字传递给sedif [ ! -f"$webp_path" ] :这个测试将确定名为"$webp_path"的文件是否已经存在,使用逻辑not操作符( ),! cwebp :如果不存在该命令,则使用-q选项创建文件,以便不打印输出,

使用这个较小的脚本代替'commands'占位符,转换JPEG图像的完整脚本现在看起来如下所示:

~/webp-convert.sh

# converting JPEG images
find $1 -type f -and ( -iname"*.jpg" -o -iname"*.jpeg" ) 
-exec bash -c '
webp_path=$(sed 's/.[^.]*$/.webp/' <<<"$0");
if [ ! -f"$webp_path" ]; then 
 cwebp -quiet -q 90"$0" -o"$webp_path";
fi;' {} ;

要将PNG图像转换为WebP,我们采用相同的方法,有两个不同之处: 首先,find命令中的-iname模式将是"*.png" ,其次,转换命令将使用-lossless选项而不是质量-q选项。

完成的脚本如下所示:

~/webp-convert.sh

#!/bin/bash

# converting JPEG images
find $1 -type f -and ( -iname"*.jpg" -o -iname"*.jpeg" ) 
-exec bash -c '
webp_path=$(sed 's/.[^.]*$/.webp/' <<<"$0");
if [ ! -f"$webp_path" ]; then 
 cwebp -quiet -q 90"$0" -o"$webp_path";
fi;' {} ;

# converting PNG images
find $1 -type f -and -iname"*.png" 
-exec bash -c '
webp_path=$(sed 's/.[^.]*$/.webp/' <<<"$0");
if [ ! -f"$webp_path" ]; then 
 cwebp -quiet -lossless"$0" -o"$webp_path";
fi;' {} ;

保存文件并退出编辑器。

接下来,使用/var/www/html/webp目录中的文件来实施webp-convert.sh脚本,请运行以下命令确保脚本文件是可执行的:


chmod a+x ~/webp-convert.sh

在镜像目录上运行脚本:


./webp-convert.sh /var/www/html/webp


rm /var/www/html/webp/*.webp

删除所有.webp镜像后,再次运行脚本以确保它正常运行:


./webp-convert.sh /var/www/html/webp

ls命令将确认脚本已成功地转换了图像:


ls -lh /var/www/html/webp


Output-rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg
-rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp
-rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg
-rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp
-rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png
-rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 logo.webp

下一步将介绍如何自动转换新图像。

第4步-监听目录中的图像文件

在此步骤中,我们将创建一个新脚本来监视images目录中的更改,并且自动转换新创建的图像。

inotifywait命令将在脚本中设置观察器,这个命令是inotify-tools包的一部分,它是一套命令行工具,提供了一个对inotify内核子系统的简单接口,


sudo apt-get install inotify-tools

使用CentOS 7,inotify-tools包在EPEL存储库上可用,使用以下命令安装EPEL知识库和inotify-tools软件包:


sudo yum install epel-release
sudo yum install inotify-tools

接下来,使用nano在你的用户目录中创建webp-watchers.sh脚本:


nano ~/webp-watchers.sh

脚本中的第一行将如下所示:

~/webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1

inotifywait :此命令监视对某个目录的更改,-q :这个选项将告诉inotifywait安静,不产生很多输出,-m :此选项将告诉inotifywait在接收单个事件后,无限期地运行,而不会退出,-r :这个选项会递归地设置观察者,观察指定目录及它所有子目录,--format :此选项告诉inotifywait使用事件名和文件路径监视更改,我们要监视的事件有close_write (在创建文件,并且完全写入磁盘时触发),moved_frommoved_to (在移动文件时触发)以及delete (删除文件时触发),$1 :这个位置参数保存已更改文件的路径,

接下来,添加grep命令以确定文件是否为JPEG或PNG图像,-i选项将告诉grep忽略案例,-E将指定grep应使用扩展正规表达式,--line-buffered将将匹配的行传递给while循环:

~/webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '.(jpe?g|png)$' --line-buffered

接下来,使用read命令构建一个while循环,read将处理inotifywait检测到的事件,将它分配给名为$operation的变量,并将处理的文件路径指定给$path

~/webp-watchers.sh

...
| while read operation path; do
 # commands
done;

将这个循环与脚本的其余部分结合起来:

~/webp-watchers.sh

inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
| grep -i -E '.(jpe?g|png)$' --line-buffered 
| while read operation path; do
 # commands
done;

while循环检查事件后,循环内的命令将执行以下操作,具体取决于结果:

创建新的WebP文件,如果创建或移动到目标目录,如果关联的图像文件被删除或从目标目录中移动,则删除WebP文件,

循环中有三个主要部分,名为webp_path的变量将保存主题镜像的.webp版本的路径:

~/webp-watchers.sh

...
webp_path="$(sed 's/.[^.]*$/.webp/' <<<"$path")";

接下来,脚本将测试发生了哪些事件:

~/webp-watchers.sh

...
if [ $operation ="MOVED_FROM" ] || [ $operation ="DELETE" ]; then
 # commands to be executed if the file is moved or deleted
elif [ $operation ="CLOSE_WRITE,CLOSE" ] || [ $operation ="MOVED_TO" ]; then
 # commands to be executed if a new file is created
fi;

如果文件已被移动或删除,则脚本将检查.webp版本是否存在,如果是这样,脚本将使用rm删除它:

~/webp-watchers.sh

...
if [ -f"$webp_path" ]; then
 $(rm -f"$webp_path");
fi;

对于新创建的文件,压缩将按以下的方式发生:

如果匹配的文件是PNG图像,则脚本将使用无损压缩,如果不是,脚本将在-quality选项中使用有损压缩,

添加对脚本执行此工作的cwebp命令:

~/webp-watchers.sh

...
if [ $(grep -i '.png$' <<<"$path") ]; then
 $(cwebp -quiet -lossless"$path" -o"$webp_path");
else
 $(cwebp -quiet -q 90"$path" -o"$webp_path");
fi;

在完整情况下,webp-watchers.sh文件将如下所示:

~/webp-watchers.sh

#!/bin/bash
echo"Setting up watches.";

# watch for any created, moved, or deleted image files
inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
| grep -i -E '.(jpe?g|png)$' --line-buffered 
| while read operation path; do
 webp_path="$(sed 's/.[^.]*$/.webp/' <<<"$path")";
 if [ $operation ="MOVED_FROM" ] || [ $operation ="DELETE" ]; then # if the file is moved or deleted
 if [ -f"$webp_path" ]; then
 $(rm -f"$webp_path");
 fi;
 elif [ $operation ="CLOSE_WRITE,CLOSE" ] || [ $operation ="MOVED_TO" ]; then # if new file is created
 if [ $(grep -i '.png$' <<<"$path") ]; then
 $(cwebp -quiet -lossless"$path" -o"$webp_path");
 else
 $(cwebp -quiet -q 90"$path" -o"$webp_path");
 fi;
 fi;
done;

保存并关闭文件,


chmod a+x ~/webp-watchers.sh

在后台的/var/www/html/webp目录中运行这个脚本,使用& ,将标准输出和标准错误重定向到~/output.log,以便在一个随时可用的位置存储输出:


./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

此时,你已经将/var/www/html/webp和PNG文件转换为WebP格式,并将观察者设置为webp-watchers.sh脚本。



文章标签:WEB  图像  images  网站  speed  WEBP  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语