Zentools v1.7+ has the ability for the user to control the size of the image displayed in the module based on the users screensize. Versions prior to v1.7 did not have this setting and as such served the same image regardless of the device that the user was viewing the site with.

The addition of these settings allows you to serve appropriately sized images according to the device your site is being served with. This allows for an improvement in load time across all devices. Please ensure you read through the use cases below in order to get a solid understanding of how this feature works.

Feature limitations

Please note that there are some limitations when enabling this option in the module.

Server limitations and blank pages.

When the target images for screen size option is enabled, there are up to seven new images generated from one image being displayed. The images are created the first time a page is visited and then the images are cached until such time that:

• the original image changes.
• the user changes the resize setting.

Resizing images on the fly can present a resource issue for some servers. Factors that lead to resource issues relate to available memory to PHP on the server as well as the size of the original or source image. 

If your server has trouble resizing images then it is likely that your site will return a blank screen. If error reporting is enabled on the site you may also receive an error that points to the server running out of memory to resize the images.

If you experience a blank screen or other issues please disable this feature.

Large and extra large images not generated.

The resize script that we use is able to enlarge images in certain circumstances. In the case that an image can not be enlarged the large and extra large images are reset to display the default image size. Please view the notes below regarding image resizing and cropping ratios.

Settings Overview

To use enable the option to target the image sized based on the screen size ensure that the option is enabled as per the screenshot below.

Use the select list to determine the image size to use. The image sizes are explained below.

Do you need to resize images to use this option?

This setting is available regardless of whether you choose to resize the image or not. The only difference is that the original or default image is treated differently as per the description below.

How are image sizes calculated?

As can be seen in the screenshot above there are six image sizes that can be used to target specific device widths.

These images sizes are

• Tiny 
• XSmall
• Small
• Medium
• Default
• Large
• XLarge.

These sizes are relative values because the size of the image being used will vary according to the dimensions of the original image or if you are choosing to crop and resize the image.

As a guide the default image option should be seen as the size of the original image. If the resize option is enabled then the dimensions of the default image are the dimensions specified in the resize settings. While if resize is not enabled then the default image is the actual size of the image being referenced in your content or from a folder.

As such there are two image sizes that are larger than the default image and four image sizes that are smaller than the default image.

Determining the width of an image if using the crop and resize setting. 

When the resize image setting is enabled the default image is resized to the dimensions specified for the resize image width and height. The relative image sizes are then calculated based on the dimensions of this resized image.

Using the settings above the various image sizes available refer to images with the following dimensions.

• Tiny - 120px by 80px. An image 1/5 of the default size.
• Extra Small - 200px by 133px. An image 1/3 of the default size.
• Small - 300px by 200px. An image 1/2 of the default size.
• Medium - 400px by 266px. An image 2/3 of the default size
• Default - 600px by 400px. The default image set in the height and width settings.
• Large - 636px by 424px. An image 1.25 times the default size. (See exception below)
• Extra Large - 798px by 532px. An image 1.75 times the default size. (See exception below)

Determining the width of an image if crop and resize setting is disabled. 

When the resize image option is disabled the original image width and height is determined by the actual image and height of the image being referenced.

As opposed to the resize and crop option where all default images are the same size, the original image will have a default size that varies from image to image.

The images are resized according to the scale outlined above however the resulting images available will be different.

Images are scaled according to the following ratios.

• Tiny - An image 1/5 of the default size.
• Extra Small - An image 1/3 of the default size.
• Small - An image 1/2 of the default size.
• Medium - An image 2/3 of the default size
• Default - The default image set in the height and width settings.
• Large - An image 1.25 times the default size.
• Extra Large - An image 1.75 times the default size.

Putting the targeted images into practice

The image size choices used for the various breakpoints will invariably be influenced by the layout and the template you are using. It may not always be the case that you specify large images to display in layouts for large screens and small images to display on smaller screens.

Targeting images for slideshows.

In most cases the settings for images in slideshow layouts will be somewhat linear. eg Large images set for large displays and small images set for small displays.

Targeting images for grid layouts

Grid layouts on the other hand will require an inverse setup. In most cases grids are shown in multi column layouts on large screens where only small images will be required; while on small screens the grid is transformed into a single column layout which will require a medium sized images to fill the container.

Do you need to specify an image for each breakpoint?

In most cases you may only need to assign two or perhaps three image sizes to the various breakpoints. This feature is really designed to target mobile devices and to optimised the page load of image assets for those devices. 

Each time you add a new image size into the settings it means that users on larger devices will download extra assets if the browser window is resized.

An ideal setting to target small and wide screens only might look like this.

Enable fullwidth images

The fullwidth image setting allows you to set the image to fill 100% of the width of the parent container. This is a little css based upscaling technique that you may need to use if you can not achieve your desired image width based on the resize settings. Setting this option to yes simply adds a hook in the markup that allows the following code to scale the images:

.zenitem.full img {width:100%}

In most cases this setting will not cause any issues however if you have aspect ratio issues in some browsers it may be best to disable this setting.

Also please note that some of our Joomla templates already specify a 100% width on some images - eg in the case of full width images - and so this setting will have no effect.

Large and Extra Large images are not being generated.

Despite the fact that it is possible to enlarge images using the resize script in the Zen Grid Framework or JB Library plugin there are some conditions where large and extra large images are not created.

Whether the large and extra large images are generated depends on the size of the source image relative to the resize height and width values set in the module. The aspect ratio of an image is to a lesser extent another factor in the resize process.

Resize settings set too high

If your original image is 1000px by 800px and the resize setting is set to 1000 by 800, then the module will generate the following image sizes:

• 1000 by 800 - Default
• 800 by 640  - Medium
• 500 by 400 - Small
• 333 by 266 - Extra Small
• 200 by 160 - Tiny

Where as if the original image is 1000 by 800 and resize is set to 500 by 400 then the module will generate the following images:

• 875 by 700 - Extra Large
• 635 by 500 - Large
• 500 by 400 - Default
• 400 by 320 - Medium
• 250 by 200 - Small
• 166 by 133 - Extra Small
• 125 by 100 - Tiny

Aspect ratio limitations

As a rule the closer to square the image are - eg the aspect ratio is 1:1 - the less likely large and extra large images will be generated.

In order to be assured of the resize script generating large and extra large images you need to ensure that:

The source image is greater than 3 : 2 for the width to height ratio.

The resize height and width is smaller than the actual height and width of the source image.