The Responsive tab in this interface allows for the creation of device responsive images using the srcset attribute. Simply put, this attribute allows for the specification of an alternate image for the browser to display based on the device being used, by setting a device pixel ratio or a width descriptor for each image.
For a more detailed explanation of the srcset attribute, a great article is available on Sitepoint at https://www.sitepoint.com/how-to-build-responsive-images-with-srcset.
Device Pixel Ratio
The device pixel ratio refers to the ratio between the physical pixels and the device independent pixels of a display. For instance, a Retina iPhone with a physical width of 640 pixels displaying a viewport layout of 320 pixels would have a device pixel ratio of 2x. A list of common device pixel ratios is available at https://www.mydevice.io/#compare-devices.
To target high resolution devices with a device pixel ratio of 2x, you could specify a high resolution image for the browser to display and a lower resolution image for all other devices. You can also target devices with a device pixel ratio of 1.5 or any other ratio by adding a higher resolution image for each ratio.
If a device pixel ratio is not specified, a value of 1x is used. The resulting code when inserting the image would look like the following:
<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, on the other hand, associates each image with a specific width (not necessarily the actual width of the image) and is used in combination with the Sizes field to display a different sized image for each screen size. For example, when the browser width is 800 pixels and the Sizes value specifies a viewport width of 50%, the image will be displayed at 400 pixels wide. The closest image with this width descriptor will be displayed.
The resulting code when inserting the image with a width descriptor would look like the following:
<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
- Click the Upload button and select a high resolution image to upload.
- Check the Resize box, then specify a width value for the image, removing the height value.
- In the Suffix field, type in -hd or -3x as this will be the highest resolution image to display.
- 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.
- Click Upload.
- 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.
- Make any adjustments to the Alternate Text, Alignment, Margin etc. as required.
- Click on the Responsive tab, click in the Source field, then click on the lowest resolution image again to select it.
- Check each additional image to select it and to create a new Source entry.
- Re-order the images as required using drag & drop. This is not strictly necessary, but can make additional editing and maintenance easier.
- Type in the device pixel ratio or width descriptor and Sizes value as required.
- Click Insert.
