我花了很多时间优化这个网站的性能, 作为正在进行的工作的一部分，我监控可以帮助提高访问速度的新技术. 我一直在跟踪下一代图像格式的采用情况，现在网络浏览器的支持相当普遍，是时候弄清楚如何在 wordpress 中使用这些新格式了.
需要多个步骤，我已将其分解为下面的标题
在 nginx 中启用支持
第一步是启用您的网络服务器 (就我而言，nginx) 识别新格式的 mime 类型. 为此，您需要编辑可能在 /etc/nginx/mime.types 中找到的 mime.types. 我添加了以下部分
1 2 3 4 5 6 7 | image/heic heic; image/heif heif; image/heic-sequence heics; image/heif-sequence heifs; image/avif avif; image/avif-sequence avis; image/jxl jxl; |
在文件可用时自动提供文件
下一步是告诉 nginx 在文件存在时自动提供文件 (并退回到不存在新格式文件的旧格式)
为此，首先编辑主 nginx 配置文件 (通常 /etc/nginx/nginx.conf) 并在 http 中添加以下部分{} 配置部分
1 2 3 4 5 6 7 | map $http_accept $img_ext { ~image/jxl ‘.jxl’; ~image/avif ‘.avif’; ~image/webp ‘.webp’; default ”; } |
请注意，我只是想为 jxl 服务 (JPEG-加大码) 或avif文件, 你可以添加更多选项 (按优先顺序!) 如果你希望.
下一个, 您需要在服务器下添加以下内容{} nginx 配置部分 (它可能位于主配置文件中，也可能位于单独的配置文件中，具体取决于您如何设置 nginx 配置结构)
1 2 3 4 5 | location ~* ^.+\.(png|jpg|jpeg)$ { add_header Vary Accept; try_files $uri$img_ext $uri =404; } |
现在，当任何支持较新格式的浏览器要求提供 image.jpg 时，nginx 将查找 image.jpg.jxl 然后是 image.jpg.avif 然后是 image.jpg.webp 最后是 image.jpg. 接下来我们需要在wordpress中启用它们
在 wordpress 中启用下一代格式
将以下代码添加到您的functions.php (理想情况下，在子主题中执行此操作，以便在更新主题时不会覆盖更改)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /***************************************************\ * Enable SVG support and other modern image formats * \***************************************************/ function cc_mime_types( $mimes ) { $mimes[‘svg’] = ‘image/svg+xml’; $mimes[‘webp’] = ‘image/webp’; $mimes[‘heic’] = ‘image/heic’; $mimes[‘heif’] = ‘image/heif’; $mimes[‘heics’] = ‘image/heic-sequence’; $mimes[‘heifs’] = ‘image/heif-sequence’; $mimes[‘avif’] = ‘image/avif’; $mimes[‘avis’] = ‘image/avif-sequence’; $mimes[‘jxl’] = ‘image/jxl’; return $mimes; } add_filter( ‘upload_mimes’, ‘cc_mime_types’ ); |
请注意，我还启用了对 SVG的 同时图像
现在，您实际上可以上传下一代格式的图像，并在需要时直接在 wordpress 中使用它们, 但我不建议这样做，因为许多旧浏览器还不支持它们——而且我们已经设置了 nginx 来智能地为它们提供服务，所以我们应该利用它. 我们要做的是在我们上传图片的时候自动生成新的格式 (已经有插件可以为 webp 执行此操作, 但还没有对 jxl 或 avif 起作用).
安装 libheif
此步骤确实需要访问您的网络主机的命令行, 如果你运行一个，这是直接的 VPS, 但如果您使用的是共享主机，则可能不那么简单，在这种情况下，您可能需要向主机寻求支持
运行以下 bash 命令 (这些被选中用于 Centos下 8, 其他发行版可能略有不同)
1 2 | dnf -y install –nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release‑8.noarch.rpm https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release‑8.noarch.rpm dnf -y install libheif |
在wordpressfunctions.php中添加自定义函数来压缩所有上传的图片 (和他们的缩略图) 转avif格式
与之前的 functions.php 步骤一样，我建议将其添加到子主题中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /*****************************\ * Convert png and jpg to avif * \*****************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_img’, 10, 2 ); function jps_compress_img( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file a png or jpeg if(pathinfo($filepath, PATHINFO_EXTENSION)==“jpg” || pathinfo($filepath, PATHINFO_EXTENSION)==“jpeg” || pathinfo($filepath, PATHINFO_EXTENSION)==“png”) { // If so, run compression of the main file to avif shell_exec(“heif-enc $filepath ‑o $filepath.avif ‑q 50 ‑A”); $parts = preg_split(‘~/(?=[^/]*$)~’, $filepath); // Then run compression of the thumbnails to avif $thumbpaths = $metadata[‘sizes’]; foreach ($thumbpaths as $key => $thumb) { $thumbpath= $thumb[‘file’]; $thumbfullpath= $parts[0] . “/” . $thumbpath; shell_exec(“heif-enc $thumbfullpath ‑o $thumbfullpath.avif ‑q 50 ‑A”); } } // give back what we got return $metadata; } //dont forget to delete the avifs if the attachments are deleted function jps_delete_avif($attachment_id) { $all_images= get_intermediate_image_sizes($attachment_id); foreach($all_images as $each_img) { $each_img_det= wp_get_attachment_image_src($attach_id,$each_img); $each_img_path= ABSPATH.‘wp-content’.substr($each_img_det[0],strpos($each_img_det[0],”/uploads/”)).’.avif’; shell_exec(“rm ‑f $each_img_path”); } } add_action( ‘delete_attachment’, ‘jps_delete_avif’ ); |
目前就是这样 - 您上传的所有图像都将转换为 avif 副本 (保留原件). 您可以使用插件重新生成所有图像以创建 avif 文件. 注意——我还没有设置 JPEG-主流浏览器尚不支持 XL 压缩作为对它的支持 (虽然它在预发布浏览器中，所以它很快就会推出).
虽然我正在讨论下一代格式和优化，但我还有一个最后的技巧——压缩 SVG的 带有 gzip 的图像 (甚至更好的 zopfli 和 brotli). 要做到这一点，需要另一个自定义函数……
奖金: SVG的 压缩
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /*************************************************\ * Compress SVG images more with brotli and zopfli * \*************************************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_vectors’, 10, 2 ); function jps_compress_vectors( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file an svg if(pathinfo($filepath, PATHINFO_EXTENSION)==“svg”) { // If so, run compression of it using zopfli and brotli shell_exec(“zopfli –gzip $filepath”); shell_exec(“brotli –best –output=$filepath.br $filepath”); } // give back what we got return $metadata; } |
请注意，您需要在 nginx 配置中启用 gzip_static 和 brotli_static.
为新版本自行编译
我发现在 Centos 上最新版本的 heif-enc 是 1.7 创建avifs时有很多错误. 所以我选择编译我自己的更新 (1.12) 构建并使用它. 这样做有点复杂，因为它需要 aom 编解码器作为共享库. 为此，请运行以下 bash 命令. 确保以普通用户身份运行它们, 不是 root 用户. 另请注意，其中一些命令可能不是严格需要的, 我花了一段时间才让它工作，我只是记下了有效的东西——我绝不是 Linux 专家!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | dnf install x265 x265-devel svt-av1 export CXXFLAGS=”$CXXFLAGS ‑fPIC” cd ~ git clone https://aomedia.googlesource.com/aom mkdir -p aom_build cd aom_build cmake ~/aom -DBUILD_SHARED_LIBS=true make sudo make install cp ./libaom.so.3 /usr/bin/local/libaom.so.3 cd ~ export PKG_CONFIG_PATH=~/aom_build/ LD_LIBRARY_PATH=$LD_LIBRARY_PATH:~/aom_build/ export LD_LIBRARY_PATH git clone –recurse-submodules –recursive https://github.com/strukturag/libheif.git cd libheif ./autogen.sh ./configure make sudo make install LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/bin/ export LD_LIBRARY_PATH |
一旦你这样做了, 通过运行确保它工作 php -a 并运行以下命令
1 | shell_exec(“/usr/local/bin/heif-enc ‑A”); |
你应该得到一个完整的输出, 不只是一个 1 线路错误. 假设工作正常，您可以修改您的functions.php，以便每个shell-exec引用都指向/usr/local/bin/heif-enc，而不仅仅是heif-enc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /*****************************\ * Convert png and jpg to avif * \*****************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_img’, 10, 2 ); function jps_compress_img( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file a png or jpeg if(pathinfo($filepath, PATHINFO_EXTENSION)==“jpg” || pathinfo($filepath, PATHINFO_EXTENSION)==“jpeg” || pathinfo($filepath, PATHINFO_EXTENSION)==“png”) { // If so, run compression of the main file to avif shell_exec(“/usr/local/bin/heif-enc $filepath ‑o $filepath.avif ‑q 50 ‑A”); $parts = preg_split(‘~/(?=[^/]*$)~’, $filepath); // Then run compression of the thumbnails to avif $thumbpaths = $metadata[‘sizes’]; foreach ($thumbpaths as $key => $thumb) { $thumbpath= $thumb[‘file’]; $thumbfullpath= $parts[0] . “/” . $thumbpath; shell_exec(“/usr/local/bin/heif-enc $thumbfullpath ‑o $thumbfullpath.avif ‑q 50 ‑A”); } } // give back what we got return $metadata; } |
认为我们已经错过了什么? 让我们通过下面的评论知道. 如果您想订阅，请使用菜单上的订阅链接右上方. 您还可以通过使用下面的链接社会分享这与你的朋友. 干杯.
德夫 上 解决谷歌的丰富网页摘要测试工具的错误: “感谢您分享此信息...我一定会尝试这种方法.”
Leave a Reply