Yireo - Trainings & extensions

Open main menu

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

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, as long as the Full Page Cache is disabled. Unfortunately, with the FPC, the whole JavaScript needs to be refactored.

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.

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. Or send a mail to support@yireo.com. 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?
  • Are you testing this in the Developer Mode or in the Production Mode?
  • Under Stores> Configuration> Advanced> System> WebP, what settings do you see?
    • Value of Enabled
    • Value of Debug log
    • Information on GD support
  • What is the location of the cwebp binary on your system?
  • Could you supply a URL to a live demo?

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 highly recommend using composer instead. However, in some cases, it might be required to do a non-composer installation. For this, 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.

Getting support

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

We usually respond within 24 hours.

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.3 (2.3.0, 2.3.1, 2.3.2)

Requirement details

  • magento/framework: ^100.1|^101.0|^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: ^1.3
  • 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.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.

Proud member of

  Latest blog

Extensions

Legal information

Other Yireo sites

Get Social

About Yireo