The Responsive tab provides an interface for creating device reponsive images using the srcset attribute.

In brief, the srcset attribute provides a way to specify an alternate image for the browser to display based on the device the viewer is using. This is done by setting a device pixel ratio - the x field - or a width descriptor - the w field - for each image.

Responsive options

A full description of the srcset attribute is beyond the scope of this documentation, but an excellent article is available on Sitepoint - https://www.sitepoint.com/how-to-build-responsive-images-with-srcset

Device Pixel Ratio

The device pixel ratio is the ratio between the physical pixels and the device independent pixels of the display. So for example, a Retina iPhone with a physical width of 640 pixels displaying a viewport layout of 320 pixels will have a device pixel ratio of 2x. A useful list of common device pixel ratios is available here - https://www.mydevice.io/#compare-devices

On high resolution devices with a device pixel ratio of 2x, you could then specify a high resolution image for the browser to display, and a lower resolution image for all other devices, eg:

Device Pixel Ratio

You could also target devices with a device pixel ratio of 1.5 by specifying a third image. In this example we have added a higher resolution image for the 2x ratio and used the previous image for the 1.5x ratio:

Multiple device pixel ratios

And so on.

If a device pixel ratio is not specified, a value of 1x is used.

The code produced when inserting the image would look something like this:

<img src="https://cdn.joomlacontenteditor.net/images/responsive/winter.jpg" srcset="https://cdn.joomlacontenteditor.net/images/responsive/winter-hd.jpg 2x,/images/responsive/winter-2x.jpg 1.5x,/images/responsive/winter.jpg 1x" alt="Winter" />

Width Descriptor

The width descriptor associates each image with a specific width (not necessarily the actual width of the image), and is used in combination with the Sizes field when you want to display a different sized image for each screen size.

For example, using the values set below, when the browser width is 800 pixels, the image will be displayed at 400 pixels wide - the Sizes value specifies a viewport width of 50%, ie: 50% of 800 pixels is 400 pixels. The closest image with this width descriptor is winter-2x.jpg, so this image will be displayed.

Responsive width descriptor

The code produced when inserting the image would look something like this:

<img src="https://cdn.joomlacontenteditor.net/images/responsive/winter.jpg" sizes="50vw" srcset="https://cdn.joomlacontenteditor.net/images/responsive/winter-hd.jpg 800w,/images/responsive/winter-2x.jpg 600w,/images/responsive/winter.jpg 300w" alt="winter" />

Creating a Responsive Image

The process for creating a responsive image begins with uploading, resizing and naming each of the images to be used. If this has already been done, or you have another preferred method for this step, then skip ahead to Inserting a Responsive Image.

Uploading, resizing and naming the image

  1. Click the Upload button and select a high resolution image to upload.
  2. Check the Resize box, then specify a width value for the image, removing the height value.
  3. In the Suffix field, type in -hd or -3x as this will be the highest resolution image to display.
  4. Repeat steps 2 and 3 for each additional image to create, clicking the plus button to create a new set of resize options. For the lowest resolution image, leave the Suffix field blank.
  5. Click Upload.

Responsive Upload

Inserting a responsive image

  1. Click on the Image tab, then click on the lowest resolution image to select it. This will be the default image to display and the image that will be displayed by browsers that do not support the srcset attribute.
  2. Make any adjustments to the Alternate Text, Alignment, Margin etc. as required.
  3. Click on the Responsive tab, then select all the images that were created by the upload, eg: nature.jpg, nature-2x.jpg and nature-hd.jpg
  4. Click the Insert Multiple Images button. A new set of fields will be created and filled for each image.
  5. If you need to adjust the order of the images, you can do this using drag & drop, then click the Insert Multiple Images button again to reset the fields.
  6. Type in the device pixel ratio or width descriptor and Sizes value as required.
  7. Click Insert.

Insert a responsive image