README

本模块为 Magento 2 添加 WebP 支持。

关于此模块

• 当页面上发现 <img> 标签时，相应的 JPG 或 PNG 将被转换为 WebP，并使用相应的 <picture> 标签替换原始的 <img> 标签。
• Magento 核心产品页面的 Fotorama 图库也被替换为无问题的 WebP 图片。然而，Fotorama 效果会再次加载新的 JPG 图片，替换原始的 <picture> 标签。这表明 Fotorama 库不可扩展，可能不是一个明智的选择。我们建议您使用 Notorama 模块代替。

警告

Hyvä 支持已集成到本模块的最新版本中。请不要再使用已弃用的兼容性模块。

使用 composer 的说明

使用 composer 安装此扩展。不支持不使用 composer。接下来，将新模块及其依赖 Yireo_NextGenImages 安装到 Magento 中。

composer require yireo/magento2-webp2
bin/magento module:enable Yireo_Webp2 Yireo_NextGenImages
bin/magento setup:upgrade

通过在 商店 > 配置 > Yireo > Yireo WebP > 启用 中切换设置来启用模块。

系统要求

确保您的 PHP 环境支持 WebP：这意味着 PHP 中应该存在 imagewebp 函数。我们希望很快在扩展本身中添加更多检查。目前，只需打开 PHP phpinfo() 页面并检查 WebP 支持。请注意，在您的系统上安装 libwebp 并不等于 PHP 支持 WebP。检查 phpinfo() 文件，并在需要时向 PHP 添加新模块。如果有疑问，简单创建一个 PHP 脚本 test.php 并在其上添加一行 <?php echo (int)function_exists('imagewebp');：一个 1 表示函数可用，一个 0 表示不可用。或者，您可以使用命令 php -r 'var_dump(gd_info());' 检查 WebP。但请确保您的 CLI 二进制文件与 web 服务器调用的相同。

另一种选择是将 WebP 项目中的 cwebp 二进制文件上传到您的服务器，并将其放置在类似于 /usr/local/bin 的通用文件夹中。请确保从 rosell-dk/webp-convert 项目中获取此二进制的副本。此方法更受青睐，因为它是最快的。但它假定二进制文件已由服务器管理员放置在文件夹中。

我们建议您努力使所有选项都正常工作，而不仅仅是其中一个。

请注意，这两项任务对于开发人员和系统管理员来说应该很简单，但对于非技术人员来说可能很神奇。如果此扩展未直接为您工作，则很可能需要技术人员检查您的托管环境。

常见问题解答

此模块支持 GraphQL 吗？

是的，但仅通过额外的 Yireo Webp2GraphQl 模块

我如何知道正在使用 WebP？

请确保在禁用明显缓存（全页缓存、HTML块缓存）的情况下测试内容。一旦此扩展正常工作，目录图片（如分类页上的图片）应替换为：将它们的<img>标签替换为包含旧图像和新WebP图像的<picture>标签。如果从旧图像到WebP的转换顺利。

您可能会看到HTML发生变化，因此检查HTML源码会有很好的印象。您还可以使用错误控制台来检查网络流量：如果在默认的Magento环境中有一些webp图像正在传输，这通常表明该扩展在某些程度上正在工作。

我的CPU使用率上升。这是正常的吗？

是的，这是正常的。此扩展执行两个操作：它在您的商店前端显示WebP。如果缺少WebP，它还会生成WebP。显然，生成图像会占用系统资源。如果您有大量的目录，这将需要更多的时间。需要多长时间？请确保自己计算：取一张图片，使用cwebp二进制文件调整大小，并测量时间 - 将其乘以图像数量。这应该可以给出所需时间的公平估计。

请注意，此扩展允许使用各种机制（也称为转换器）。如果您想尝试优化内容，请调整转换器设置。有时，GD比cwebp快。有时，GD会破坏某些东西。这取决于，所以您需要负责在自己的特定环境中尝试。

此外，请注意，此扩展允许设置编码。默认值为auto，它创建有损和无损WebP，然后选择最小的一个。通过将其设置为lossy，速度可能提高一倍。

如果您根本不喜欢生成图像，也可以使用其他CLI工具。

找不到类'WebPConvert\WebPConvert'。

我们只支持通过composer安装我们的Magento 2扩展。请注意，我们认为composer是管理Magento依赖关系的唯一方式。如果您想手动在app/code中安装扩展，请研究composer.json的内容，以便手动安装此模块的所有依赖项。

安装后，我仍然只看到PNG和JPEG图像。

这可能意味着转换失败。新的WebP图像存储在原始路径相同的路径中（在pub/中的某个地方），这意味着所有文件夹都需要由web服务器可写。特别是，如果您的部署基于工件，这可能会成为一个问题。

同时请确保您的PHP环境支持WebP：PHP中的函数imagewebp应该存在，我们建议将cwebp二进制文件放置在/usr/local/bin/。

最后但同样重要的是，WebP图像只能在支持WebP的浏览器中工作。此扩展会检测浏览器支持。请确保首先在原生支持WebP的Chrome中进行测试。

警告：filesize()：对于xxx.webp无法stat。

如果您在exception.log和/或system.log中看到此问题，请确保清除Magento缓存，并确保有问题的WebP文件可访问：运行Magento的web服务器应该有读取文件的权限。同样，如果您想使此扩展自动将JPEG转换为WebP，请确保包含JPEG的文件夹可写。

一些图像已转换，但其他图像没有。

并非所有JPEG和PNG图片都适合转换为WebP格式。在过去，WebP在透明度和部分透明度方面存在一些问题。如果我们的扩展无法生成WebP图片，则不会生成。就这么简单。如果一些图片已转换，而一些没有，尝试将它们上传到在线转换工具以查看它们是否可以工作。

请确保您的cwebp二进制文件和PHP环境都是最新的。

这很糟糕。它只在一些浏览器中工作。

不要向我们投诉。相反，请要求其他浏览器供应商也支持这一点。并且不要说这不值得实施，因为我打赌您网站的超过25%的访客将从中受益。不向他们提供这一点，是浪费额外的带宽。

一些电子邮件也在显示WebP。

可能是因为您的交易电子邮件模板包括XML布局处理程序，这突然引入了此扩展的功能，而实际上在电子邮件中添加WebP是一个糟糕的主意（因为大多数电子邮件客户端都不会支持此类内容）。

如果您遇到此类电子邮件，找出是哪个XML布局处理程序导致了这个问题（{handle layout="foobar"}）。接下来，创建一个具有该名称的新XML布局文件（foobar.xml），并从中调用webp_skip处理程序（<update handle="webp_skip" />）。这样，就指示WebP扩展跳过加载自身。

加载共享库时出错：libjpeg.so.8：无法打开共享对象文件：未找到文件或目录

请要求您的系统管理员安装此库。或者，请系统管理员通过升级PHP自身到正确的版本并包含正确的PHP模块（如imagemagick）来在PHP中安装WebP支持。或者，通过在我们的扩展中禁用设置来跳过转换WebP图片，然后手动转换所有WebP图片。

我可以与Amasty Shopby一起使用这个吗？

是的，您可以使用。请确保同时安装附加组件https://github.com/yireo/Yireo_Webp2ForAmastyShopby。

我如何从CLI手动转换WebP图片？

尽管此扩展（或其父扩展Yireo_NextGenImages）支持CLI（bin/magento next-gen-images:convert），但使用此扩展对数千张图片进行转换肯定不会高效。如果您想一次从CLI转换所有图片，最好查看其他工具。例如，可以安装cwebp二进制文件（它是Google WebP项目的一部分）。或者，您可能可以使用Imagick项目的convert。

接下来，可以使用简单的shell脚本来构建所有WebP文件。

find . -type f -name \*.jpg | while read IMAGE do; convert $IMAGE ${IMAGE/.jpg/.webp}; done

或者另一个例子（@rostilos）。

#!/bin/bash
start=`date +%s`
directory="../pub/media"

cd "$directory" || exit
find . -type f \( -iname \*.jpg -o -iname \*.jpeg -o -iname \*.png \) -print0 |

while IFS= read -r -d $'\0' file;
  do
    filename=$(basename -- "$file")
    new_filename="${filename%.*}.webp"
    new_filepath="$(dirname "$file")/$new_filename"
    echo "Converting: $file -> $new_filepath"
    cwebp -q 80 -quiet "$file" -o "$new_filepath"
  done
end=`date +%s`
runtime=$((end-start))

echo "Execution completed in $runtime seconds."

请求支持

首先检查我们的扩展是否在正常工作。

在请求支持之前，请确保您已正确检查此扩展是否工作。不要查看您的浏览器，并且绝对不要使用第三方SEO工具得出任何结论。相反，检查您浏览器中的HTML源代码。我们的扩展修改HTML，以便将常规<img>标签替换为类似以下内容

<picture>
  <source type="image/webp" srcset="example.webp">
  <source type="image/png" srcset="example.png">
  <img src="example.png" />
</picture>

如果存在类似的HTML，但您的浏览器没有显示WebP图片，那么请意识到这并不是由于我们的扩展，而是由于您的浏览器。遗憾的是，我们不是浏览器制造商，我们无法更改这一点。请参阅https://caniuse.cn/#search=webp。

为该扩展打开问题

请随意在此扩展的GitHub项目中打开一个问题。但是，请确保您全面，并提供尽可能多的细节。

• 您使用哪个浏览器测试了这个？
• 您的Magento版本是什么？
• 您的PHP版本是什么？
• 您是否确保使用 composer 安装了所有依赖项？
  • 不使用 composer 是不支持的。
• 您安装的 Yireo WebP2 扩展的具体 composer 版本是哪个？
• 您安装的 Yireo NextGenImages 扩展的具体 composer 版本是哪个？
• 您在刷新所有缓存（特别是全页缓存）后测试了吗？
• 您在禁用所有缓存（特别是全页缓存）后测试了吗？
  • 全页缓存会阻止您看到动态结果。全页缓存与我们的扩展一起工作，但在启用全页缓存的情况下进行故障排除是没有意义的，除非您正在故障排除全页缓存本身。
• 您是在开发者模式还是生产模式下进行测试的？
  • 我们建议您使用开发者模式。在任何地方都不要使用默认模式。不要使用生产模式对 Magento 进行修改。
• 在 商店 > 配置 > Yireo > Yireo WebP2 和 商店 > 配置 > Yireo > Yireo NextGenImages 下，您看到了哪些设置和值？
  • 最好附上设置截图。
• 您能否提供实时演示的 URL？
• 您能否提供产品页面的 HTML 源代码快照？

请注意，我们不支持使用 Windows 来运行 Magento。Magento 本身也不支持 Windows。如果您被困在 Windows 上，请确保使用 WSL（Windows Subsystem for Linux）并使用 Linux 层。

如果 WebP 配置部分在后台显示，但前端 HTML 源代码未修改，请发送命令 bin/magento dev:di:info "\Magento\Framework\View\LayoutInterface" 的输出。

特定图像的问题

如果某些图像已转换而其他图像未转换，请提供以下详细信息

• 命令 bin/magento next-gen-images:test-uri $URL 的输出，其中 $URL 是原始图像（JPG 或 PNG）的 URL
• 命令 bin/magento next-gen-images:convert $PATH 的输出，其中 $PATH 是原始图像（JPG 或 PNG）的绝对路径
• 您是否使用 CDN 来提供图像。