luroConnect Image Optimization Support : Watchimage

luroConnect Image Optimization Support : Watchimage

Image Optimization is a basic requirement to have a faster website. Photo images used in websites are generated with too large a size to be served over the internet on a web page. Also browser support for different, more modern and efficient (by storage) formats vary, requiring an image optimizer to be used on a website.

Generating images in different formats may be required in websites to support different browsers. This is part of image optimization.

luroConnect WatchImage service, “watches” a set of directories where images may be generated or saved and automatically generates different formats for the same image – keeping the base file the same and renaming the extension appropriately.

For example for Magento, if one wants to generate avif and webp images, the following settings work :

luroConnect WatchImage Configuration

How does it work?

A watch is setup for the folder mentioned and when a new image is saved in any folder or subfolder, the image conversion will automatically be launched and the formats specified will be generated, with the same base name and corresponding extension.

For example If we are watching

pub/catalog/product/cache folder and an image with the name 3af406316384c53a5f29d3772fa411e5_2.jpg is saved the following images will be generated

pub/catalog/product/cache/3/a/3af406316384c53a5f29d3772fa411e5_2.webp

pub/catalog/product/cache/3/a/3af406316384c53a5f29d3772fa411e5_2.avif

The developer can generate the picture element with srcset for mime types image/webp and image/avif with the same base file name but with the corresponding file extensions.

Would you like to switch to a modern hosting platform?

Schedule a call of a free evaluation!

With features like Image Optimization, ~0 downtime code deploy and autoscale to reduce your hosting costs, luroConnect offers you unparalleled hosting environment for Magento.

Schedule a call and we will show you how we can

  • Improve your hosting, possibly with autoscale
  • Have a managed dev, staging and production environment
  • Server performance measured every minute with alerts for a slowdown
  • A multi point health check every day
  • Optimized hosting costs

Use of luroConnect WatchImage Service

This is best suited when the HTML code uses <picture> element with fine tuned image sizes (and mime types).

Information about <picture> element is found here.

HTML supports the picture element which allows a developer to define various image sizes and formats and specify conditions – much like css media query – for the browser to decide what is the closest match.

Briefly, using <picture> as the parent tag and <srcset> to specify conditions and alternatives.

<picture>
<source srcset="catalog/product/cache/xxx_for_600_width/m/y/myimage.jpg" media="(min-width: 600px)" />
<source srcset=" catalog/product/cache/xxx_for_600_width/m/y/myimage.webp" type="image/webp" media="(min-width: 600px)" />
<img src="myimage.jpg"/>
</picture>

Share this post