Joomla Responsive Image Using srcset and Compression

Optimization? Check. Lazy loading? Check again. Still, your Joomla! website feels clunky and it takes too long to load on mobile devices and slow connections. Despair not—this is when the HTML structure comes in handy; more precisely, the image source sets, or the srcset attribute.

Perhaps your Joomla! blog uses high-quality images and you just cannot—or do not want to—do away with them. That is no reason for concern. With Joomla!'s Droppics plugin you can apply not simply general optimization for images, but serve different files depending on the users' devices.

Responsive Images with HTML srcset

If you have ever dabbled with HTML, you will know that images are defined by a source attribute—src. The image source is the location from where browsers load images to display to your Joomla! users. The problem with using a consistent source for a particular image is that the same file will always be loaded, no matter how large.

For example, if you have a hero banner at the top of an article, the same image will be loaded across all devices. Browsers download the image and then scale it down, sometimes drastically, especially on mobile devices. With modern browsers, you can define not just a source for images, but a set of sources—the source set srcset.

As the name implies, the source set is a list of sources, instead of a single source. Each source is associated with a browser width so that mobile devices download small images and users accessing your Joomla! blog from desktops download the full-resolution image. In other words, the image srcset transforms images into responsive images.

The result of using source sets is not just faster loading times, but also improved SEO scores. All of this comes at the small price of having copies of the same image with different resolutions, readily-available for when users need them. You can read more about the srcset attribute and everything else related to source sets here, but if you are impatient to start using them on your Joomla! blog, keep reading.

Serving Scaled Images on Joomla! with Droppics

You may know Droppics as simply a Joomla! gallery manager extension, but there is a lot that happens under the hood that you may not be aware of. Case in point: Droppics is now using the source set to load the right images for your users. If you are unaware of this feature, it might just be possible that you are not exploiting it either.

To use the srcset attribute on your Joomla! blog, first you need to activate it through your Droppics configuration. Head to the main parameters tab in Droppics’ options and enable responsive images from among the first options. Save changes to commit the new settings.

As the responsive images option’s tooltip help tells you, by enabling the setting Droppics creates two new thumbnails for every Joomla! image that you have. These thumbnails are the responsive images themselves, which render depending on the device used to access your Joomla! blog.

When you create a post and insert a Droppics image, the extension automatically sets the srcset for you. Don’t believe us? Inspect the HTML in the frontend and you will find multiple sources for different device sizes.

General optimization is all well and good, as is lazy loading, but sometimes, there is only so much they can do. In some cases, using the modern HTML technique of providing image source sets, instead of singular sources, might be the key to overcome slow loading times.

But wait, that is not all. There is still a missing piece to the puzzle.

Compress srcset Images on Joomla!

You might be wondering if having multiple copies of the same image is worthwhile. Perhaps you want to save on server space or you are afraid that the new images will stack up. Just because you are using the source set, it does not mean that you cannot combine it with other optimization techniques, such as compression.

ImageRecycle is also available on Joomla! and you can integrate it seamlessly with Droppics. In fact, you can even configure it to automatically compress your Joomla! source set images immediately when they are generated. You can save up to 80% with lossy, or best saving, compression, and up to 20% with lossless, or original, compression. You can read more about the difference here.

You can set ImageRecycle to automatically compress images by going to the extension’s configuration in Joomla! From there, head to the advanced tab and enable optimize media on saving. Alternatively, you can manually choose which images to optimize through ImageRecycle’s interface.

Loading times is a multifaceted problem. You need to simultaneously minimize file sizes while maintaining quality and saving on storage space. With the magical Droppics’ source set and ImageRecycle’s compression, not only is this all possible, but it can be an easy, automated process.