Joomla 4 Responsive Images

Or images done right©

A rock solid solution for creating and using responsive images with Joomla 4 from the developer that brought the images lazyloading and a bunch more goodies into Joomla 4.

Features:

Latest Version

Download the latest Version ( 4.2.5 ) here or for any previous version go to : Downloads

What it does

Transforms content (or layout) images from this:

<img
src="/images/test/34zckrf0l6i51.jpg"
alt=""
>

Default Joomla Image Tag

...to this:

<picture class="responsive-image">
<source
type="image/avif"
sizes="(max-width: 1920px) 100vw 1920px"
srcset="/media/cached-resp-images/images/test/34zckrf0l6i51_480.avif?version=722e4d8793f156da1ad89b44ee0e30b8 480w, /media/cached-resp-images/images/test/34zckrf0l6i51_320.avif?version=722e4d8793f156da1ad89b44ee0e30b8 320w, /media/cached-resp-images/images/test/34zckrf0l6i51_200.avif?version=722e4d8793f156da1ad89b44ee0e30b8 200w">

<source
type="image/webp"
sizes="(max-width: 1920px) 100vw 1920px"
srcset="/media/cached-resp-images/images/test/34zckrf0l6i51_480.webp?version=722e4d8793f156da1ad89b44ee0e30b8 480w, /media/cached-resp-images/images/test/34zckrf0l6i51_320.webp?version=722e4d8793f156da1ad89b44ee0e30b8 320w, /media/cached-resp-images/images/test/34zckrf0l6i51_200.webp?version=722e4d8793f156da1ad89b44ee0e30b8 200w">

<source
type="image/jpeg"
sizes="(max-width: 1920px) 100vw 1920px"
srcset="/media/cached-resp-images/images/test/34zckrf0l6i51_480.jpg?version=722e4d8793f156da1ad89b44ee0e30b8 480w, /media/cached-resp-images/images/test/34zckrf0l6i51_320.jpg?version=722e4d8793f156da1ad89b44ee0e30b8 320w, /media/cached-resp-images/images/test/34zckrf0l6i51_200.jpg?version=722e4d8793f156da1ad89b44ee0e30b8 200w">

<img
loading="lazy"
width="2381"
height="1283"
src="/media/cached-resp-images/images/test/34zckrf0l6i51_ 1920.jpg?version=722e4d8793f156da1ad89b44ee0e30b8"
alt="">

</picture>

Responsive Images Generated Tag