Targeting images for different screensizes

26Oct 2012

Targeting images for different screensizes

Published in Joomla Extensions

26Oct 2012

Comments

ascent-responsive

I've just released Zentools v1.7 which adds a really handy new feature - the ability to load images in the module based on the users screensize. This means that you can now tell Zentools to load small images on mobile browsers and large images to desktops, which will significantly reduce the asset payload for our responsive Joomla templates on mobile devices.

Responsive jQuery

The new functionality comes courtesy of the response.js jQuery script which uses data attributes to determine which size image to load on the site according to your visitors screen size. This has the benefit of making sure that your image assets loaded through our zentools module are optimised for the context in which they are being viewed.

Up until now if you had loaded a full width slideshow on both desktops and mobile devices the same image was used for each. Now you can specify an optimum image size to display for each viewing size.

Large images for large screens

One of the complexities in developing this solution was that targeting images based on screen size was not always a linear affair. In the case of full width slideshows though, it's clear that you need large images for large screens ...

ascentwide

... and smaller images for smaller screens.

ascentsmall

Small images for large screens and large images for small screens - say what?

This works fine until you need to apply the same logic to a grid or column based display. In most cases grid layouts created in Zentools display in a multi column format on large screens and a single column format on small screens. The result of this is that we actually require smaller images on the desktop ...

ascentGridWide

and slightly larger images on the mobile devices.

ascentGridSmall

A flexible solution

The solution was to determine a number of different breakpoints that the user could target with various image sizes. And so zentools now has the following settings which allow you to specify the relative size of the images that you are displaying across some generic and arbitrary screen break points.

resizeimages

Allowing the user to determine the size of the image that is being displayed in the module and across a number of screenwidths means that we can now deliver optimised images to both mobile and desktops.

In depth documentation

I've written some indepth documentation regarding the process of implementing these new features as well as some limitations to be aware of. Please ensure you read through the Targeting images based on screen size in Zentools knowledgebase item before embarking on this new journey of freedom, flexibility and responsive fun.

BambooBlog