Serve Properly Scaled Images on your WordPress or Joomla Website

Take any image on your WordPress or Joomla blog. If you rate quality, odds are that the image is large enough that it has to be scaled down to fit on your readers’ desktop devices, let alone on mobile devices. Quality is all well and good, but cases such as this one come at a hefty price.

To accommodate as many different displays as possible with a single image, you have to use a large one. In turn, that translates into large files that have to be downloaded in their entirety even on small devices. There is a solution: serving images scaled depending on the display device, whether desktop, tablet or mobile.

Serving Scaled Images on WordPress and Joomla with CSS

How much space do images take in web pages? There are no hard and fast rules, but considering their importance and ubiquity, the answer is definitely a lot. If you are serving images that you will end up rescaling anyway, it only makes sense to be economical and serve your WordPress or Joomla users with images that are already scaled down to speed up your website loading times.

CSS is there to help with a set of relatively-unknown, but priceless attributes: the srcset, sizes and media. These attributes—all of which are supported by most modern web browsers—let you specify which image versions to serve depending on the size of the viewport.

The srcset complements the usual src tab. As the attribute name implies, instead of specifying a single image, you use it to specify a list of scaled images and the width when each should be used. Used in conjunction with it is the sizes attribute, with which you can define when to show images based on the viewport width.

You can read more about these attributes here, but the good news is that for the past few years, WordPress automatically rescales your images and serves the appropriate sizes to your readership. The result is staggering: a portrait image with 511Kb is reduced to 42Kb on mobile devices.

Automatic Rescaling and Optimization with ImageRecycle

When it comes to image sizes, the smaller the better, as long as quality is not compromised. Although WordPress helps you by using srcset, there is more you can do to minimize image sizes, notably by rescaling and compressing images.

ImageRecycle is a plugin that can simultaneously rescale and compress images for you, and is available on both WordPress and Joomla. Best of all, you can use ImageRecycle to rescale and compress images automatically.

Rescaling is especially useful if you find yourself using stock images in your WordPress or Joomla blog. These images are often disproportionately large to account for all uses, including print media. On the web, it is highly unlikely that you would ever need to use their entire resolution. With ImageRecycle, you can automatically rescale down large images to a maximum height or width upon uploading.

Complementing rescaling is compression, which optimizes image size without sacrificing quality. With lossy compression, you can curb image space by up to 80%. This applies not just to the original images, but also to the images rescaled by WordPress. Once more, ImageRecycle can do this automatically for you.

What you see as a few extra kilobytes can mean precious lost time for your readership. The good news is that you don’t have to sacrifice quality for loading times. With smarter usage of CSS and ImageRecycle’s rescaling and optimization, you can have high-quality images that adapt to your readers’ devices.