ochResponsiveImages (system plugin)

Requirements

Joomla! 4.4 PHP 8.1 PHP 8.2

Joomla! 5.1 Joomla! 5.2 PHP 8.1PHP 8.2 PHP 8.3

  • Basic Joomla! knowledge available between the chair and the keyboard :)

Installation is easy!

  1. Download the plugin
  2. in the Back-end go to menu Extensions > Manage
  3. in the tab [Upload file package] click [browse] and select your downloaded plug-in
  4. click [Upload & Install], wait for the installation to finish

Configuration

  1. in the back-end go to menu Extensions > Plugins
  2. search / locate the 'ochResponsiveImages' system plugin
  3. open the plug-in
  4. in the tab [Plugin] tab enable and configure your plugin settings (default settings work on most sites)
  5. in the [Advanced] tab configure your advanced settings
  6. click [Save & Close] and you are good to go

Activate Joomla! One Click update and change-log integration

When you install the extension, it will automatically integrate with the Joomla Updater for both updates and change-logs.

On first use, the Joomla updater will prompt you with a 'Download Key is missing!' message.

  1. On this site: Go to [Tools > My Account > My Download Keys], and copy your Download ID#.
  2. On your site: Go to System > Update Sites, locate the extension, and paste the Download ID into the 'Download Key' field. Click [Save and Close].

Important:
If you're using this Download ID on a new server, you’ll receive an email to approve the device. Click the link in the email to enable downloads from this server.
Without approval, updates won’t be authorized, and the Joomla updater will display a 401 Unauthorized error when trying to fetch updates.

That’s it! You're all set.

Image Caching logic

There are multiple ways an image can show on your website:

  1. an Image that needs to show full width
  2. an image that is resized to its display size
  3. an image that is resized via a width and or height parameter

ochResponsive images will handle all images in the following generic way:

  • Cached Responsive Images can be created for each visitor or the creation can be assigned to a logged in user
  • Previously cached images will not get created again. Cache creation can be overwritten by a config setting enabling you to force (re)creation of the cached images
  • If the image is smaller then the width in the break-point, that break-point is omitted (no need to upscale the image as the browser will do that automatically)

ad. 1. an Image that needs to show full width

You created a one-size-fits-almost-all image to display full width: it needs to be big enough to show on desktops, but also small enough to show on mobile devices without adding loading times and bandwidth waste. What you most likely end up with is at most an average image that will do okay on all devices. But is doing 'okay' good enough?

With ochResponsiveImages you can use the highest resolution for the image and ochResponsiveImages will automatically create a cached imaged for every configured break-point. The original image on the page will be replaced with the constructed img srcset containing all images for the break-points. The browser will now automatically know which image to download and show on what devices: always the best image!

Ad. 2. an image that is resized to its display size

When you want an image in your blog to display at e.g. 700px width, you can resize this image and insert that image in your blog text. The image will show at it's full size of 700px. But when you are visiting the page on a mobile, the image will be displayed at e.g. 480px.

ochResponsiveImages will create a cached image for the image and for each break-point that is below the image width. The original image will be replaced with the constructed img srcset AND a max-width will be set on the image for the original image width.

When you now visit your blog on a desktop, the cached image will be show (700px), but on a mobile, the cached image for the appropriate break point will be downloaded and shown.

Ad. 3. an image that is resized via a width and or height parameter

When you have an image of e.g. 1920px wide and show that in your blog at 500px (via the image width parameter), the image will show in the blog at 500px wide. To show the image, the (very) large 1920px wide image needs to be downloaded: this will impact your page speed and annoy your visitors that are on a small bandwidth network.

ochResponsiveImages will automatically create one (1) cached image with a width of (in this case) 500px. The original image will be replaced with this cached image.

When you now visit your blog on a desktop, the cached image will be shown (500px), saving you and your visitors a ot of waiting time and bandwidth.

Configuration

Plugin configuration:

  • in the back-end go to menu Extensions > Plugins
  • search / locate the 'ochResponsiveImages' system plugin
  • open the plugin
  • in the tab [Plugin] set status to [Enabled]
  • in the tab [Plugin] configure your Image filters (include, exclude and minimum size) and Breakpoints > look at the tool-tips for information about what each setting does
  • in the tab [Advanced] configure the advanced options to your liking > look at the tool-tips for information about what each setting does
  • click [Save & Close] and you are good to go

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

Agency Bundle - 12 months
Agency Bundle - 12 months
Supercharge your Joomla! toolbox with the Agency Bundle! Get all extensions plus 2 Hours of expert support – Subscribe today!
More Information
ochResponsiveImages - 12 months
ochResponsiveImages - 12 months
Effortless image optimization for peak SEO performance: your path to a high Google Page Speed score, streamlined and automated.
More Information

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)