README

以WebP格式在不同尺寸生成您的图片，并添加适当的HTML标签。

管理：媒体请求、设备像素比和100%兼容性。

安装

对于您的服务器（Ubuntu命令）

sudo apt install imagemagick webp

可选

sudo apt install jpegoptim pngquant 

使用composer安装NextGenPicture

composer require cmouleyre/next-gen-picture

使用方法

  $ngp = new NextGenPicture([
    'relative_path' => '../cache/',
    'cache_dir' => __DIR__ . '/../cache/',
    'force_generate' => false,
    'compatibility' => true,
    'quality' => 90,
    'max_pixel_ratio' => 3
  ]);

  $html = $ngp->load('sample.jpg')
    ->setMaxDisplaySize([800, 600])
    ->setResponsive([1024 => 375])
    ->setAlt('Alt of the picture')
    ->setId('picture-id')
    ->setClass(['picture-first-class', 'picture-second-class'])
    ->setAttributes(['data-first' => 'toto', 'data-second' => 'tata'])
    ->display();

结果

<picture>
  <source type="image/webp" media="(max-width: 1024px)" srcset="../cache/a6a5ac1817569518be673efdc2ac46f0_375.webp 1x, ../cache/a6a5ac1817569518be673efdc2ac46f0_750.webp 2x, ../cache/a6a5ac1817569518be673efdc2ac46f0_1125.webp 3x">
  <source type="image/webp" srcset="../cache/a6a5ac1817569518be673efdc2ac46f0_800.webp">
  <source media="(max-width: 1024px)" srcset="../cache/a6a5ac1817569518be673efdc2ac46f0_375.jpg 1x, ../cache/a6a5ac1817569518be673efdc2ac46f0_750.jpg 2x, ../cache/a6a5ac1817569518be673efdc2ac46f0_1125.jpg 3x">
  <source srcset="../cache/a6a5ac1817569518be673efdc2ac46f0_800.jpg">
  <img src="../cache/a6a5ac1817569518be673efdc2ac46f0_800.jpg" class="picture-first-class picture-second-class" id="picture-id" alt="Alt of the picture" data-first="toto" data-second="tata" >
</picture>