README

一个简单的PHP类，用于生成支持不同源类型的HTML <picture> 元素。它可以用于根据浏览器支持的图像格式进行图像渲染优化。

安装

安装此扩展的首选方式是通过 composer。

将 composer.phar 文件放置在与 composer.json 文件相同的目录中，并运行

$ php composer.phar require almeyda/html-picture-element "*"

或添加

{
    ...
    "require": {
        ...
        "almeyda/html-picture-element": "dev-master"
        ...
    }
    ...
}

到您的 composer.json 文件的 "require" 部分，并运行

$ php composer.phar update

用法

\almeyda\htmlpicture\src\HtmlPicture::get($src, $attributes, $sourceTypes);

哪里

src - 主图像的路径
attributes - <image> 标签属性
sourceTypes - 要收集到图片源中的图像类型数组

用法示例

\almeyda\htmlpicture\src\HtmlPicture::get('path/to/image.png', ['alt' => 'Image alt'], ['webp', 'jp2', 'jpx']),

这将生成类似以下的输出

<picture>
    <source srcset="path/to/image.webp?v=1527278990" type="image/webp">
    <source srcset="path/to/image.jp2?v=1527278990" type="image/jp2">
    <source srcset="path/to/image.jpx?v=1527278990" type="image/jpx">
    <img src="path/to/image.png?v=1527278990" alt="Image alt">
</picture>

您可以使用 setSouceTypes 方法一次性定义要收集并渲染到图片标签中的图像类型

\almeyda\htmlpicture\src\HtmlPicture::setSouceTypes(['webp', 'jp2', 'jpx']);

...

\almeyda\htmlpicture\src\HtmlPicture::get('path/to/image1.png'),

\almeyda\htmlpicture\src\HtmlPicture::get('path/to/image2.png'),

almeyda / html-picture-element

维护者

详细信息

README

安装

用法

用法示例