README

ImgOpt 是一个为 Yii2 框架定制的图像优化小部件，可以自动从 PNG 和 JPG 文件生成 WebP & AVIF 图像格式。

https://yiiframework.cn/extension/pelock/yii2-imgopt

如何让我的网站更快？

我的网站上有所有漂亮的图片和截图，但有一个问题。它们大多数都是 PNG 格式，其中一些大约有 200 kB，这导致我的网站加载速度很慢。

我了解到 WebP 格式，了解到它在最新的浏览器中得到了支持，如果它不支持（仅限较旧的 Safari 浏览器），有办法克服这个问题，并服务默认的 PNG 或 JPG 图像。太完美了。

但是整个过程需要我手动使用某种图像转换工具，上传新的 WebP 图像到服务器，并升级我的 HTML 代码。

去它的吧！我们可以做得更好！

自动将 PNG & JPG 转换为 WebP & AVIF

我决定创建一个 Yii2 小部件来自动化这项任务。

它做什么？不是像这样的静态图像

<img src="/images/product/extra.png" alt="Extra product">

它将自动在相同目录下生成一个额外的图像（在提供的图像所在的位置），并通过 HTML <picture> 标签将其提供给您的浏览器，对于不支持 WebP 图像的浏览器，默认回退到原始图像。

将您的 IMG 标签替换为以下调用

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product" ]) ?>

(图像路径相对于 Yii2 框架 @webroot 别名)

运行后，小部件代码将动态生成新的 WebP & AVIF 图像文件（原始图像保持不变），并生成以下 HTML 代码

<picture>
    <source type="image/avif" srcset="/images/product/extra.avif">
    <source type="image/webp" srcset="/images/product/extra.webp">
    <img src="/images/product/extra.png" alt="Extra product">
</picture>

浏览器将选择提供的图像的最佳来源，并且由于革命性的 WebP 和 AVIF 压缩，这将使您的网站加载速度更快。

图像懒加载

懒加载图像使得浏览器在图像达到一定点时加载图像，之后图像将出现在当前浏览器标签中。您可以在小部件中使用此纯 HTML 功能（无需 JavaScript）

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "loading" => "lazy" ]) ?>

生成的输出如下

<picture>
    <source type="image/avif" srcset="/images/product/extra.avif">
    <source type="image/webp" srcset="/images/product/extra.webp">
    <img src="/images/product/extra.png" loading="lazy">
</picture>

使用它来进一步加快您的网站加载时间。

AVIF 图像生成（v1.3.0 新增）

如果现有的 PHP 安装支持 AVIF，ImgOpt 将自动生成 AVIF 文件。如果转换函数不可用，它将跳过此步骤。

自动为更新的图像生成 WebP（v1.2.0 新增）

ImgOpt 将生成的 WebP 图像的修改日期设置为与原始图像文件的修改日期相匹配。

如果ImgOpt检测到源图像文件的修改日期与之前生成的WebP图像文件的日期不同 - 它将自动重新创建新的WebP图像文件！

安装

安装库的最佳方式是通过composer。

运行

php composer.phar require --prefer-dist pelock/yii2-imgopt "*"

或者将以下内容添加到composer.json配置文件的require部分：

"pelock/yii2-imgopt": "*"

to

安装包可在https://packagist.org.cn/packages/pelock/yii2-imgopt找到。

Yii2扩展可在https://yiiframework.cn/extension/pelock/yii2-imgopt找到。

源代码可在https://github.com/PELock/yii2-imgopt找到。

图像质量

我知道你会问这个问题！默认情况下，转换尝试从100%输出图像质量到70%，以生成比原始图像小的WebP文件。

如果生成的WebP或AVIF图像大于原始图像，将生成默认的<img>标签。

禁用WebP/AVIF图像服务

如果您想通过HTML <picture>标签禁用WebP文件服务，您可以在小部件设置中这样做。

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", "disable" => true ]) ?>

重新创建WebP/AVIF文件

小部件代码会自动检测目录中是否存在与原始图像相同的WebP/AVIF图像。如果没有，它将重新创建它们。这只会做一次。

如果您想强制小部件代码重新创建它们，请传递特殊的参数到小部件代码。

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", "recreate" => true ]) ?>

您可能想强制重新创建所有WebP和AVIF文件，而无需修改，请将小部件源代码从以下内容更改：

/**
 * @var bool set to TRUE to recreate *ALL* of the WebP and AVIF files again (optional)
 */
const RECREATE_ALL = false;

到以下内容：

/**
 * @var bool set to TRUE to recreate *ALL* of the WebP files again (optional)
 */
const RECREATE_ALL = true;

Lightbox 2集成

您还可以生成Lightbox（https://lokeshdhakar.com/projects/lightbox2/）友好的图像。

而不是以下内容：

<a href="/images/sunset.jpg" data-lightbox="image-1" data-title="Sunset">
    <img src="/images/sunset-thumbnail.jpg" alt="Sunset">
</a>

您可以用更紧凑的小部件代码替换它

<?= \PELock\ImgOpt\ImgOpt::widget(["lightbox_data" => "image-1", "lightbox_src" => "/images/sunset.jpg", "src" => "/images/sunset-thumbnail.jpg", "alt" => "Sunset" ]) ?>

它将生成以下HTML代码

<a href="/images/sunset.jpg" data-lightbox="image-1" data-title="Sunset">
    <picture>
        <source type="image/avif" srcset="/images/sunset-thumbnail.avif">
        <source type="image/webp" srcset="/images/sunset-thumbnail.webp">
        <img src="/images/sunset-thumbnail.png" alt="Sunset">
    </picture>
</a>

错误、问题、功能请求

如果您对我的软件感兴趣或对其有任何问题，无论是技术问题还是法律问题，或者某些内容不清楚，请联系我。我将很高兴回答您所有的问题。

Bartosz Wójcik

pelock / yii2-imgopt

维护者

详细信息