yireo/magento2-next-gen-images

Magento 2 module to add NextGen images support to the Magento frontend

0.5.13 2025-04-23 11:23 UTC

Requires

• php: >=7.4.0
• ext-dom: *
• ext-gd: *
• ext-pcre: *
• magento/framework: ^101.0.1|^101.1|^102.0|^103.0
• magento/module-backend: ^100.0|^101.0|^102.0
• magento/module-catalog: ^100.0|^101.0|^102.0|^103.0|^104.0
• magento/module-config: ^101.0
• magento/module-configurable-product: ^100.0
• magento/module-page-cache: ^100.0
• magento/module-store: ^100.0|^101.0
• magento/module-swatches: ^100.0
• psr/log: ^1 || ^2 || ^3
• yireo/magento2-csp-utilities: ^1.0

Requires (Dev)

• bitexpert/phpstan-magento: ^0.3.0
• phpstan/phpstan: ^0.12.32
• phpunit/phpunit: ^9.0|^10.0|^11.0
• yireo/magento2-integration-test-helper: @dev

Suggests

• yireo/magento2-webp2: Support for WebP2 images

OSL-3.0

• Jisse Reitsma (Yireo)

• magento
• magento 2
• Yireo

README

This module adds next-gen image support to Magento 2. Please note that this is a base extension for other extensions to use. See Yireo_Webp2 for details.

WARNING: If you are using Hyva and want to use the latest version of this module, remove Hyva_YireoNextGenImages.

Development

This module features some settings and info panels in the Magento Store Configuration. But the major feature is a plugin on the Layout that scans for HTML <img/> tags to convert them into <picture/> tags with sources for alternative image formats.

A module Foo_Bar could add a etc/di.xml file to add a new convertor (a class implementing \Yireo\NextGenImages\Convertor\ConvertorInterface) to the convertor listing:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Yireo\NextGenImages\Convertor\ConvertorListing">
        <arguments>
            <argument name="convertors" xsi:type="array">
                <item name="foobar" xsi:type="object">Foo\Bar\Convertor</item>
            </argument>
        </arguments>
    </type>
</config>

FAQ

Can I skip lazy loading of images?

Yes, just add fetchpriority="high" to the image HTML of your choice.

Roadmap

• Move CLI into separate module
• Move frontend into separate module
• Create GraphQL support
• Add more next gen image formats
  • JPEG 2000
  • HEIC
  • AVIF
  • JPEG XL
  • WebP2