ochResponsiveImages (system plugin)

What is WebP Image format and why should I prefer it

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.

Requirements for using WebP images

ochResponsiveImages can automatially create WebP images for your current jpg / png images and use these in image source sets that will be served to your visitor to give them the best possible speed / image quality experience.

There are two requirements:

1. Your server needs to support the WebP image format and WebP support must be compiled and available in your available PHP GD Library
2. Your visitor's browser should support displaying of WebP images

ochResponsiveImages checks both requirements for you.

If WebP is supported on your PHP version, then ochResponsive images will additionally create WebP source set images next to the image original format images.

When rendering the page for a visitor, ochResponsiveImages will query the browser header sent by the visitors browser for WebP support. If the visitors browser supports WebP then the WebP source set will be rendered for that visitor, if not then the original format source set will be rendered for that user.

Does my server support WebP image format?

You can manually check if your server supports WebP image format so you can use this very powerfull feature of ochResponsiveImages.

1. In your website root folder create a file called 'test.php'
2. copy the code below into that file and save it
3. visit [yourwebsite]/test.php
4. It will now display if WebP is supported on your server.

<?php
$gdInfo = gd_info();
if (isset($gdInfo['WebP Support']) && $gdInfo['WebP Support'])
{
 echo "<h1>WebP is Supported</h1><hr>";
}
else
{
 echo "<h1>WebP is NOT Supported</h1><hr>";
}
echo "<pre>"; echo json_encode(gd_info(), JSON_PRETTY_PRINT); echo "</pre>";
?>

If WebP is NOT supported you should ask your hosting provider to build support for WebP into PHP's GD library

Tips & Tricks

• Did you know that you can limit the creation of the Responsive Image cache files to a specific logged in user? This will give you control on when to create the cached images. You can configure this user in the advanced settings: change setting 'Create Responsive Images Cache' to [User], and select the user that needs to be logged in on the front-end. The images on the pages this user visits will be cached.
• Did you know that you can 'Force recreate cache' to automatically have the correct cached versions of an image when break-point change or when the image changes?
• Did you know that you can show placeholders with the selected resolution in the placeholder for the images that are being handled by ochResponsiveImages? In advanced settings enable 'debug info' and in the front-end add ?debug-ochresponsiveimages=placeholder to the url.
• Did you know that you can exclude selected components from using the responsive images? When you have a component that cannot handle srcset images, you can disable this component in the plugins configuration. When on a view of this component on the front-end the plugin will not get executed and the images will display as is.
• Did you know that you can exclude selected menu items from using the responsive images? On this site for example I have a page that does 'fancy' css things with the images on that page. setting the images with a srcset breaks that functionality. You can exclude that menu item in the plugins configuration. When visiting that specific page on the front-end, the plugin will not get executed and everything will display as is.

Technical support and feature requests via our forum (You need a valid subscription to be able to post)