Overview

Responsive images allow you to display higher resolution versions of images in your Vuture web pages and emails where the visitor's web browser or email client supports it.

Most modern web browsers (with the exception of Internet Explorer) support this feature but it is only available in a limited number of email clients including Apple devices and some webmail clients.

It works by adding extra information to the image tag in the HTML of the page to tell the browser or email client that there are higher resolution versions of the image which should be displayed where possible, e.g. for larger screen sizes and higher resolution displays.

This feature can be enabled in your Vuture templates by adding the srcset attribute to your image tags.

This attribute specifies the different sizes of image that are available to be displayed. When cropping an image, Vuture will automatically save crops at the different sizes as defined in the srcset attribute. For example: 

srcset attribute example.html

<div class="vx_image">
       <img src="../_images/icon.png" alt="" width="150" height="153"
              srcset="../_images/icon-2x.png 450w,
                     ../_images/icon-1.5x.png 300w,
                     ../_images/icon.png 150w"
              sizes="100vw" />
</div>

The above example shows a typical srcset attribute that should be added to your editable images in your templates. Please note that the sizes attribute is required for these images to work in the browser.

In the example above when cropping the image, Vuture will generate five output images as below, and update the HTML:

1. Native browser size (current functionality) for the src attribute
2. 450px width
3. 300px width
4. 150px width

Images are stored as images/cropped-image-name-_width.jpg

If the source image is not large enough to crop at one or more of these dimensions, then the largest possible crop image will be used in each failed srcset.

The browser’s ‘pixel ratio’ (i.e., 1× for desktop, 2× for ‘retina’) is used as a multiplier for these images. So a 1000px image will render up to 1000px on a 1× screen but only up to 500px on a 2× screen.

Limitations of this approach

• srcset is not compatible with any version of Internet Explorer, but the Picturefill polyfill works as expected.
• Vuture currently only supports w srcset definitions and not x.
• This technique is widely supported on web but not all email clients implement it.

Art directed images

There are options for using different images depending on the context — portrait vs landscape, for example, or providing different image crops for smaller screens — but these are out of scope. https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/#the-art-direction-use-case