README

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

如何让我的网站更快？

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

我了解到WebP格式，了解到它被最新的浏览器支持，如果浏览器不支持（只有较老的Safari浏览器），也有办法解决这个问题，并提供默认的PNG或JPG图像。太棒了。

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

见鬼去吧！我们可以做得更好！

自动将PNG & JPG转换为WebP

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

它做了什么？它不会像这样使用静态图片

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

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

将您的HTML模板中的IMG标签替换为对以下内容的调用

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

（图像路径相对于Yii2框架@webroot别名）

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

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

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

图片懒加载

懒加载图片让浏览器在图像达到一定点时加载图像，之后图像将在当前浏览器标签中可见。您可以从小部件内部使用这个纯HTML特性（不涉及JS）。

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

生成的输出如下所示

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

使用它来使您的网站加载时间更快。

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

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

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

安装

安装库的首选方式是通过composer。

运行

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

或者添加

"vladovinkin/yii2-imgopt": "*"

到您的composer.json配置文件的require部分。

安装包可在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图像比原始图像大，将生成默认的<img>标签。

禁用WebP图像服务

如果你出于某种原因想禁用通过HTML <picture>标签提供的WebP文件服务，你可以在小部件设置中这样做

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

重新创建WebP文件

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

如果你希望强制小部件代码无论如何都要重新创建它，请向小部件代码传递特殊参数

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

你可能想重新创建所有的WebP文件，为此而不修改，请将小部件源代码从

/**
 * @var bool set to TRUE to recreate *ALL* of the WebP 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>

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

<?= \vladovinkin\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/webp" srcset="/images/sunset-thumbnail.webp">
        <img src="/images/sunset-thumbnail.png" alt="Sunset">
    </picture>
</a>

错误、问题、功能请求

希望你喜欢它。对于问题、错误和功能请求，请访问我的网站

Bartosz Wójcik | https://www.pelock.com

vladovinkin / yii2-imgopt

维护者

详细信息