cmouleyre/next-gen-picture

Generate your images in WebP format in different sizes plus the appropriate HTML tag. Manage: media requests, device pixel ratio and 100% compatibility.

1.0.9 2023-05-02 14:11 UTC

Requires

• php: >=7

MIT

• Cédric Mouleyre

• php
• image
• optimizer
• picture
• Webp
• pixel-ratio

README

Generate your images in WebP format in different sizes plus the appropriate HTML tag.

Manage: media requests, device pixel ratio and 100% compatibility.

Installation

For your server (command for Ubuntu) :

sudo apt install imagemagick webp

Optional :

sudo apt install jpegoptim pngquant 

Install NextGenPicture with composer :

composer require cmouleyre/next-gen-picture

Usage

  $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();

Result :

<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>