README

WebP 转换扩展包

WebP 转换扩展包是一个用于简化 JPEG、BMP、PNG 和 GIF 图像自动转换为 WebP 格式的 Symfony 扩展包。通过将图像转换为 WebP 格式，您可以显著减小文件大小并提高网站渲染速度。此扩展包与 PHP 8.1 和 8.2 以及 Symfony 6.1、6.2 和 6.3 兼容。

配置

WebPConversionBundle 允许您配置各种设置以自定义图像转换过程的行为。为此，请按照以下步骤操作：

1. 安装扩展包：如果您尚未安装 WebPConversionBundle，可以通过运行以下命令将其添加到您的 Symfony 项目中

   composer require codebuds/webp-conversion-bundle

2. 覆盖默认配置：要自定义扩展包的配置，在您的 Symfony 项目的 config/packages 目录中创建一个名为 webp_conversion.yaml 的新文件（如果尚不存在，则创建它）。

3. 配置参数：在 webp_conversion.yaml 文件中，您可以设置所需的配置选项。例如，要更改默认质量和上传路径，请使用以下语法

   # config/packages/webp_conversion.yaml
   web_p_conversion:
   quality: 90
   upload_path: '/custom/upload/directory'

   • quality：质量参数设置生成的 WebP 图像的质量。默认设置为 80。根据您的需求，您可以将其调整为更高的或更低的值。
   • upload_path：upload_path 参数定义 WebP 图像将创建的目录。默认设置为 /public/images。您可以将它更改为任何适合您的项目结构的其他目录。

命令

此扩展包提供了一个命令 codebuds:webp:convert，它简化了将图像转换为 WebP 格式的过程。该命令接受一个目录作为参数，并将将该目录中所有图像（JPEG、PNG、GIF 和 BMP）转换为 WebP 格式。该命令提供了几个可选参数以自定义转换过程。

• --create：使用此标志生成 WebP 图像。如果不提供，将检查目录，但不会创建最终图像。
• --quality：设置 WebP 图像的质量级别（默认为 80）。
• --force：使用此标志重新创建现有的 WebP 图像。默认情况下，现有的 WebP 图像不会被覆盖。
• --suffix：向创建的 WebP 图像名称添加后缀。

示例

php bin/console codebuds:webp:convert --create --quality=90 --suffix=_q90 public/images

如果 public/images 目录中包含名为 test.jpg 的图像，在执行命令后，它还将包含 test_q90.webp。

Twig 扩展

该扩展包包含一个 Twig 扩展，用于生成 WebP 图像并返回它们的路径。这使得创建用于优化网站渲染速度的 元素变得容易。

示例

<!-- Traditional approach -->
<img src="/public/images/test.jpg">

<!-- Modern approach using WebP -->
<picture>
    <source srcset="{{ '/images/test.jpg' | cb_webp }}" type="image/webp">
    <source srcset="/images/test.jpg" type="image/jpeg">
    <img src="/images/test.jpg">
</picture>

该 Twig 扩展还支持 VichUploaderBundle 资产和 LiipImagineBundle 过滤器。

<picture>
    <source srcset="{{ vich_uploader_asset(asset, 'imageFile') | cb_webp | set_webp_extension | imagine_filter(filter) }}"
            type="image/webp">
    <source srcset="{{ vich_uploader_asset(asset, 'imageFile') | imagine_filter(filter) }}">
    <img src="{{ vich_uploader_asset(asset, 'imageFile') | imagine_filter(filter) }}">
</picture>