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:
- Generates Avif images and source sets
- Generates Webp images and source sets
- Use Imagic or GD for image processing
- Clever way to handle any component/module
- Dead easy helper function for layout files
- Versioning because Cache Invalidation Is Hard
- Dead easy to customise
Latest Version
- 4.2.8 is the latest version.
- Download it here:
Download the latest Version ( 4.2.8 ) 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=""
>
...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>