DNT Image Dimensions – Version 1.2.2

✓ Joomla 5✓ Joomla 6

DNT Image Dimensions is a small system plugin for Joomla. When you pick an image with the Joomla media field, Joomla stores its size in the URL itself, after "#joomlaImage://". Some editors and page builders, the Sparky Page Builder for example, keep that URL but drop the width and height attributes. The browser then has no idea how much room to reserve, and the text jumps down as soon as the image arrives. Google measures that jump as Cumulative Layout Shift (CLS) in Core Web Vitals.

The same happens with images you insert by hand or that a module outputs without a size. The plugin finds the size and puts it on the image tag just before the page is sent to the visitor. It takes the size from the Joomla image URL, and since version 1.1.0 it can also read it from the image file itself, as long as that file is on your own site. There is nothing to set up: install it, enable it and it works.

What the plugin changes

Images without width and height get width, height and a data-dnt-dim marker. The size comes from the Joomla image URL or, for JPG, PNG, GIF, WebP and AVIF files on your own site, from the file. Every other image stays exactly as it was.

On this site the plugin fixed the product images of two of our own VirtueMart modules (805 × 805 pixels) without a single change to the module code.

What it does not do

• It never overwrites a width or height that is already there. An image with only a fixed height in its style is skipped, because a width attribute would stretch it. Styles like width:100% with height:auto are fine.
• It skips images from other websites and from the media and templates folders. Logos and icons there are often sized by a CSS height only, and a width attribute would stretch them.
• It does not change your database or your articles. Disable the plugin and the output is back to what it was.
• It cannot help images from another website or SVG files. Add width and height to those yourself.

To keep images responsive, the plugin adds one CSS rule to the page head: ":where(img[data-dnt-dim]){height:auto}". Because of :where() the rule has no specificity, so the CSS of your template always wins.

Optional: serve images as WebP

Since version 1.2.0 the plugin can show visitors a WebP version of the JPG and PNG images on your own site. Since version 1.2.1 this is on straight after installing. You can switch "Serve images as WebP" off in the plugin settings. On our own homepage the images became about half as large.

• The WebP file is made once, next to the original, as photo.jpg.webp. Your original stays untouched.
• A WebP that turns out larger than the original is not used. That happens with some small PNG icons.
• Transparent PNG images keep their transparency.
• Camera photos that are stored lying down with an EXIF rotation are turned upright in the WebP, and get width and height the right way round. Before version 1.2.2 they could show on their side; those WebP files are remade by themselves.
• At most 5 new WebP files are made per page view, so the first visitor never waits long. The rest follows on the next views.
• Images larger than 16 megapixels are skipped, because converting them needs more memory than many servers allow.
• The quality is 82 by default and can be set from 50 to 95.

This needs PHP with GD and WebP support, and PHP must be allowed to write in your image folders. Without that, the plugin simply keeps showing the originals. Switch the option off and visitors get the originals again. The .webp files stay in your image folders until you delete them.

System Requirements

• Joomla 5.x or 6.x
• PHP 8.1 or higher

Installation Guide

• Download the ZIP file with the button above
• In the Joomla administrator, go to System > Install > Extensions and upload the ZIP
• That is all: the plugin is enabled right away. Its settings are in System > Plugins > "DNT Image Dimensions"

New versions show up in System > Update > Extensions, like any other Joomla extension.

Released under the GNU General Public License version 2 or later. See the licence.