Yireo - Trainings & extensions

Open main menu
Webp 2

Magento 2 Extension

Webp 2

Serve smaller images to modern browsers like Chrome
  • 100% open source and well-written
  • compliant with modern Magento standards
  • Free with no strings attached
  • Community collaboration via GitHub
FREE

Latest release: 0.7.1

Usage after installation

About this module

  • Browser-support for WebP is detected in various ways: A simple check for Chrome, an ACCEPT header sent by the browser and a JavaScript check generating a webp cookie for all browsers that remain.
  • When <img> tags are found on the page, the corresponding JPG or PNG is converted into WebP and a corresponding <picture tag is used to replace the original <img> tag.
  • The Fotorama gallery of the Magento core product pages is replaced with WebP images without issues as well. However, the Fotorama effect loads new JPG images again, replacing the original <picture> tag. This shows that the Fotorama library is not scalable and may be a bad decision to use. We recommend you replace it with the Notorama module instead.

System requirements

Make sure your PHP environment supports WebP: This means that the function imagewebp should exist in PHP. We hope to add more checks for this in the extension itself soon. For now, just open up a PHP phpinfo() page and check for WebP support. Please note that installing libwebp on your system is not the same as having PHP support WebP. Check the phpinfo() file and add new PHP modules to PHP if needed. If in doubt, simple create a PHP script test.php and a line <?php echo (int)function_exists('imagewebp'); to it: A 1 indicates that the function is available, a 0 indicates that it is not. Alternatively you can check for WebP using the command php -r 'var_dump(gd_info());'. Make sure your CLI binary is the same as the one being called by the webserver though.

An alternative is that the cwebp binary from the WebP project is uploaded to your server and placed in a generic folder like /usr/local/bin. Make sure to grab a copy from this binary from the rosell-dk/webp-convert project. This method is preferred because it is the fastest. But it assumes also that the binary is placed in a folder by the server administrator.

We recommend you to work on making all options work, not just one.

Please note that both tasks should be simple for developers and system administrator, but might be magical for non-technical people. If this extension is not working out of the box for you, most likely a technical person needs to take a look at your hosting environment.

Requesting support

Feel free to open an Issue in the GitHub project of this extension. However, do make sure to be thorough and answer the following:

  • What browser did you test this with?
  • What is your Magento version? What is your PHP version?
  • Which version of the WebP extension did you install?
    • Don't say the latest but please provide the actual version number :)
  • How did you install this module?
    • Which composer command did you use, or did you copy files?
    • What did you do to enable the module?
  • Have you tested this after flushing all caches?
  • Have you tested this after disabling all caches, especially the Full Page Cache?
    • The Full Page Cache will prevent you from seeing dynamic results. The Full Page Cache works with our extension, it just pointless to troubleshoot things with FPC enabled, unless you are troubleshooting FPC itself.
  • Are you testing this in the Developer Mode or in the Production Mode?
    • We recommend you to use the Developer Mode. Do not use the Default Mode anywhere. Do not use the Production Mode to make modifications to Magento.
  • Under Stores> Configuration> Yireo> Yireo WebP2, what settings do you see?
    • Value of Enabled
    • Value of Debug log
    • Value of GD support
    • Value of PHP version
    • Value of Module version
  • Could you supply a URL to a live demo?
  • Could you please supply a snapshot of the HTML source of a product page?

Please note that we never recommend Windows to be used to run Magento. Magento itself is not supporting Windows either. If you are stuck with Windows, make sure to use the WSL (Windows Subsystem for Linux) and use the Linux layer instead.

If the WebP configuration section is showing in the backend, but the HTML source in the frontend is not modified, please send the output of the command bin/magento dev:di:info "\Magento\Framework\View\LayoutInterface".

Quick Start to install your Yireo extension

Installation via composer URL

We recommend to install Magento 2 extensions via composer. See the Composer project for instructions on how to get composer up and running. Once composer is installed, use the following command to install our extension.

composer require yireo/magento2-webp2

This will make composer download the package from Packagist. After the composer installation has finished, use the following commands to enable the module within Magento:

bin/magento module:enable Yireo_Webp2
bin/magento cache:clean
bin/magento setup:upgrade

After these commands, the extension is ready for use in Magento. If you were already logged into the Magento Admin Panel, make sure to logout and log back in again, before proceeding. Do not forget to grab yourself a manual copy of our extension as a backup.

Manual installation

Please note that we strongly recommend using composer instead. It allows for dependency tracking and in the end, prevents breaking your site. However, in some cases, it might be required to do a non-composer installation. For these exceptional situations, download the module ZIP from our site (under the tab File Downloads). Next, create a folder with the following name and copy to the ZIP contents to it:

app/code/Yireo/Webp2

After the files have been uploaded, confirm that all files are in place. For instance, you should have a file like app/code/Yireo/Webp2/etc/module.xml. Next, use the following commands to enable the module within Magento:

bin/magento module:enable Yireo_Webp2
bin/magento cache:clean
bin/magento setup:upgrade

After these commands, the extension is ready for use in Magento. If you were already logged into the Magento Admin Panel, make sure to logout and log back in again, before proceeding. Do not forget to grab yourself a manual copy of our extension as a backup.

Downloads

Head over to the GitHub repository for downloads: https://github.com/yireo/Yireo_Webp2

Frequently Asked Questions

No, it is not. As a policy, all our Yireo software is unencrypted - we do not make use of technologies like ionCube or ZendOptimizer. All PHP-code is open source, but for commercial extensions the code is only given to paying customers.

You probably would like to know if this extension is working under a specific Magento version 2.X.Y. However, from a technical point of view, the question is wrong: The major Magento version 2.X.Y is not semantical but instead used for marketing purposes. It doesn't give any guarantees.

Instead, we maintain compatibility with the actual modules that lie underneath (like Magento_Catalog or the Magento Framework). And version management for these dependencies is handled via composer. We strongly advice you to rely on composer to answer the question whether our extension works under a specific Magento version. This is the only way to guarantee compatibility in a professional way.

Alternatively, study our CHANGELOG for details on the progress we made.

This extension is offered for free. Feel free to go the GitHub repository (see the link under Quick Start> Downloads) and open an Issue there. Please note that this is a voluntary open source project. The more helpful you are in describing the issue at hand, the more likely volunteers can come in to help you with the issue.

Make sure to test things with the obvious caches disabled (Full Page Cache, Block HTML Cache). Once this extension is working, catalog images (like on a category page) should be replaced with: Their <img> tag should be replaced with a <picture> tag that lists both the old image and the new WebP image. If the conversion from the old image to WebP goes well.

You can expect the HTML to be changed, so inspecting the HTML source gives a good impression. You can also use the Error Console to inspect network traffic: If some webp images are flying be in a default Magento environment, this usually proofs that the extension is working to some extent.

This could mean that the conversion failed. New WebP images are stored in the same path as the original path (somewhere in pub/) which means that all folders need to be writable by the webserver. Specifically, if your deployment is based on artifacts, this could be an issue.

Also make sure that your PHP environment is capable of WebP: The function imagewebp should exist in PHP and we recommend a cwebp binary to be placed in /usr/local/bin/.

Last but not least, WebP images only work in WebP-capable browsers. The extension detects the browser support. Make sure to test this in Chrome first, which natively supports WebP.

Not all JPEG and PNG images are fit for conversion to WebP. In the past, WebP has had issues with alpha-transparency and partial transparency. If the WebP image can't be generated by our extension, it is not generated. Simple as that. If some images are converted but some are not, try to upload those to online conversion tools to see if they work.

Make sure your cwebp binary and PHP environment are up-to-date.

Don't complain to us. Instead, ask the other browser vendors to support this as well. And don't say this is not worth implementing, because I bet more than 25% of your sites visitors will benefit from WebP. Not offering this to them, is wasting additional bandwidth.

It could be that your transactional email templates are including XML layout handles that suddenly introduce this extensions functionality, while actually adding WebP to emails is a bad idea (because most email clients will not support anything of the like).

If you encounter such an email, find out which XML layout handle is the cause of this ({handle layout="foobar"}). Next, create a new XML layout file with that name (foobar.xml) and call the webp_skip handle from it (<update handle="webp_skip" />). So this instructs the WebP extension to skip loading itself.

Ask your system administrator to install this library. Or ask the system administrator to install WebP support in PHP by upgrading PHP itself to the right version and to include the right PHP modules (like imagemagick). Or skip converting WebP images by disabling the setting in our extension and then convert all WebP images by hand.

Yes, you can. Make sure to install the addition https://github.com/yireo/Yireo_Webp2ForAmastyShopby as well.

Getting support

If you run into problems, we are happy to help you out with the following resources:

We usually respond within 24 hours.

Testing

This extension ships with Integration Tests (Test/Integration/) and a Travis CI build (.travis.yml which triggers scripts in .ci-scripts/). The CI scripts can be tested locally with the Dockerfile:

docker build -t ci .

docker-compose up --build --abort-on-container-exit

Supported Magento versions

  • 2.2 (2.2.0, 2.2.1, 2.2.2, 2.2.3, 2.2.4, 2.2.5, 2.2.6, 2.2.7, 2.2.8, 2.2.9, 2.2.10)
  • 2.3 (2.3.0, 2.3.1, 2.3.2, 2.3.3)

Requirement details

  • magento/framework: ^101.0.1|^101.1|^102.0
  • magento/module-backend: ^100.0|^101.0
  • magento/module-config: ^101.0.0|^101.1.0
  • magento/module-page-cache: ^100.0
  • rosell-dk/webp-convert: ^2.0
  • psr/log: ^1.0
  • php: >=7.1.0
  • ext-json: *
  • ext-pcre: *
  • ext-gd: *

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

[0.7.1] - April 6th, 2020

Added
  • Quick fix to allow for WebP images in catalog swatches

[0.7.0] - March 31st, 2020

Added
  • Code refactoring to allow for Amasty Shopby compatibility

[0.6.2] - March 18th, 2020

Fixed
  • Skip captcha images (PR from @jasperzeinstra)

[0.6.1] - March 18th, 2020

Fixed
  • Do not throw error in debugging with non-existing images
  • Rename "Debug Log" to "Debugging" because that's what's happening

[0.6.0] - March 7th, 2020

Added
  • Skipping WebP image creation by configuration option

[0.5.2] - March 5th, 2020

Fixed
  • Fix next tag not being closed properly

[0.5.1] - February 19th, 2020

Fixed
  • Prevent overwriting existing picture tags

[0.5.0] - February 11th, 2020

Added
  • Upgraded rosell-dk/webp-convert library

[0.4.7] - January 31st, 2020

Added
  • Add class attribute in picture (PR from itsazzad)
  • Better support info
  • Raise framework requirements for proper support of ViewModels
  • Added logic for fetching the css class from the original image (PR from duckchip)
  • Added missing variable in the ReplaceTags plugin (PR from duckchip)

[0.4.6] - November 23rd, 2019

Fixed
  • Raise requirements for proper support of ViewModels

[0.4.5] - October 16th, 2019

Added
  • Add check for additional layout handle webp_skip

[0.4.4] - October 15th, 2019

Fixed
  • Dirty workaround for email layout

[0.4.3] - October 4th, 2019

Added
  • Add controller for email testing
Fixed
  • Do not apply WebP if no handles

[0.4.2] - July 14th, 2019

Fixed
  • Make sure modified gallery images are returned as Collection, not an array
  • Test with Aimes_Notorama

[0.4.1] - July 2019

Fixed
  • Original tag (with custom styling) was not used in picture element, but new one was created instead

[0.4.0] - July 2019

Added
  • Move configuration to separate Yireo section
  • Add a config.xml file
  • Changed configuration path from system/yireo_webp2/* to yireo_webp2/settings/*
  • Move quality_level to config.xml

[0.3.0] - 2019-05-02

Fixed
  • Fix issue with additional images not being converted if already converted (@jove4015)
  • Fix issue with static versioning not being reckognized
  • Make sure src, width and height still remain in picture-tag
Added
  • Integration test for multiple instances of same image
  • Add fields in backend for PHP version and module version
  • Integration Test to test conversion of test-files
  • Throw an exception of source file is not found
  • Add provider of dummy images
  • Add integration test of dummy images page
  • Add test page with dummy images
  • Only show original image in HTML source when debugging

[0.2.0] - 2019-04-28

Fixed
  • Fix issue with additional images not being converted if already converted
  • Make sure to enable cookie-check whenever FPC is enabled
Added
  • Actual meaningful integration test for browsing product page

[0.1.1] - 2019-04-12

Fixed
  • Disable gallery fix if FPC is enabled

[0.1.0] - 2019-04-12

Added
  • Add GD checker in backend settings

[0.0.3] - 2019-03-21

Fixed
  • Fix for Fotorama gallery
  • Check via timestamps for new and modified files
Added
  • Check for browser support via cookie and Chrome-check
  • Inspect ACCEPT header for image/webp support
  • Implement detect.js script to detect WebP support and set a cookie
  • Add configuration values

[0.0.2] - 2019-03-20

Added
  • Temporary release for CI purpose

[0.0.1] - 2019-03-20

Added
  • Initial commit
  • Support for regular img-tags to picture-tags conversion
ExtDN

We are a proud member of ExtDN

ExtDN forms a network of Magento extension developers, that strive for a better extension quality - both on a technical level and from an end-users point of view. With industry leaders like Fooman and aHeadworks, ExtDN lifts up the Magento extension space to a new level. And Yireo is proud to be part of this.

Do not miss out on what we say

This will be the most interesting spam you've ever read

We don't write too commercial stuff, we focus on the technology (which we love) and we regularly come up with innovative solutions. Via our newsletter, you can keep yourself up to date on all of this coolness. Subscribing only takes seconds.

Sign up for the Yireo newsletter

Extensions

Legal information

Other Yireo sites

Get Social

About Yireo