Joomla! 3 PHP 7.4 Maintenance Only

Joomla! 4 PHP 7.4 PHP 8.0 PHP 8.1

ochresponsiveimages4Are you struggling with 'tuning' your images on your site for best performance and Google's page speed ranking? What looks great on a desktop is a complete bandwidth waste on mobile devices. When optimizing the image for mobile devices, how will they look on all different sizes of devices out there and how will they 'blur' on the desktop?

Time to automate Image optimization and use HTML5 Image Srcsets

With the ochResponsiveImages system plugin, you can configure a set of breakpoints: sizes for devices you want to support. For each break-point an optimized image is automatically generated and cached. Your original image is replaced with an HTML srcset containing all the cached images. What will happen now is that the browser of the visitor will decide which image fits best on his/her screen and only download that specific cached image!

The following break-points / rules are default, but can be customized to even fit your 'unique' template requirements / breakpoints:

  • min-width: 1920px,1920px
  • min-width: 1366px,1366px
  • min-width: 1200px,1200px
  • min-width: 992px, 992px
  • min-width: 768px, 768px
  • min-width: 575px, 575px
  • min-width: 480px, 480px

What value does this plug-in add?

The ochResponsiveImages system plugin will:

  • Speed up your site: only correct sized images will be downloaded instead of large one-size-fits-almost-all images
  • Improve your Google's Page Speed index as the images on the page are optimized for all devices
  • Save you a lot of time resizing and compressing images manually... over and over again!
  • Convert your images to the Google's new WebP nextgen image format and serve these to browsers that already support them
  • Automatically add decoding attribute to <img> elements
  • Automatically add width / height attributes to the img srcset preventing CLS (Cumulative layout shifts) on your pages

Demo?

visit this demo page to see it for yourself

Screen-shots

[Gallery created with ochGlightbox]

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

 

Requirements

  • Joomla 3.8+ or Joomla4.0+
  • 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 integration

Updating of the plugin is integrated with the Joomla! One Click Update manager. In order to activate follow the steps below:

  1. On this site: In the menu [Tools > My Subscriptions] copy your 'Download ID#'
  2. On your site: In the plugin configuration click the [Advanced] tab and paste the 'Download ID#' in the [Download ID]  field
  3. Click [Save] or [Save & Close], You will be prompted with an informational message that your Download ID was changed.

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

Agency Bundle - 12 months
Agency Bundle - 12 months
Get access to and support for all our Joomla! extensions and more!
More Information
ochResponsiveImages - 12 months
ochResponsiveImages - 12 months
Automatic and hassle free image sizing following SEO best practices: getting and retaining a high Google Page Speed score.
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)