Responsive Images - Best practices with ImageEngine

ImageEngine makes working with images a whole lot easier. Regardless of what environment ImageEngine is implemented in, images will be leaner than before, thanks to its zero-config auto mode.

Unlike image resizers, ImageEngine will automatically convert to optimal image formats and automatically resize images to an appropriate size without explicitly requesting a specific format or size.

However, if you go the extra mile of customizing the implementation, the user experience (and developer experience) will be significantly improved. Here are a few best practices.

Consider skipping the <picture> tag

Web browsers use the <picture> element mainly for art direction and format selection by examining the media, srcset and type attribute.

ImageEngine will automatically serve the optimal image format, so unless your design is dependent on displaying different images (crops) on different media, then consider skipping <picture> as it just adds complexity.

Use srcset with w_auto

You don't need the <picture> element to use srcset as it is also supported by the <img> element. This allows you to serve different resolutions and sizes depending on the viewport size and pixel density.

srcset, together with the w descriptor, gives you good control over which images are served to different viewport sizes.

The tricky parts are to pick the right breakpoints and the number of breakpoints and align the image breakpoints with the general website design.

Unlike the approach with site builders like Gatsby or Hugo, where image variants must be generated during build time, ImageEngine may generate any number of variants in real time, on demand, as they are needed from a single original image. This means you can quickly change or add as many variants as needed without waiting for long build times.

Requesting specific sizes with srcset can be achieved by using the w_auto directive:

<img width="300" height="200" 
    src="https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,300" alt="" 
    srcset="
        https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,300 300w, 
        https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,1024 1024w, 
        https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,1920 1920w" 
   sizes="(max-width: 400px) 100vw, (max-width: 900px) 25vw, 300px">

Providing more size options in srcset allows the browser to pick the most accurate size.

Note that the browser rounds up (picking the next closest larger image variant), so it is necessary to ensure that enough image variants are specified to avoid heavy images.

To address this, ImageEngine supports a w_auto directive. This tells ImageEngine that if no reliable information about the image size is available, use the fallback size.

In the scenario where for example, client hints are available, ImageEngine will resize accordingly regardless of the width (w) stated in the srcset attribute.

Enable Client Hints

Client hints are additional HTTP headers the browser can send with the image request. Client hints enable ImageEngine to automatically detect the intended display size of an image along with pixel density on the screen and network quality.

For supporting browsers (Chromium-based), client hints will enable ImageEngine to generate the optimal size regardless if srcset is defined. However, client hints must be "opted into" by the website.

Here's a guide on how to enable client hints on a variety of platforms.

In an ideal world, we could then rely on simpler syntax, which still would serve all sizes and formats required:

<img width="300" height="200" 
    src="https://try.cdn.imgeng.in/image.jpg" alt="" sizes="(max-width: 400px) 100vw, 300px"
    />

Note the sizes attribute, which will enable the browser to figure out the exact intended display size of the image. sizes holds a media condition, which describes the viewport's properties, not the image.

Retrofit responsive images

Similarly to the breakpoints mentioned above, it can be challenging to identify the perfect media condition. One recommendation is to "retrofit" client hints support by copying the value of the width attribute into sizes:

<img src="" width="300" sizes="300px">

This way, the browser will request the correctly sized image from ImageEngine while also considering the device pixel ratio of the screen (DPR).

Because of the significant market share that does support client hints, it's highly recommended to enable it for your website simply because of the improved image performance it provides. However, we still need a fallback because not all browsers support client hints.

The w_auto directive is also recommended to use when retrofitting responsive images:

<img src="https://try.cdn.imgeng.in/image.jpg?imgeng=/w_auto,300" width="300" sizes="300px">

The above snippet will serve a 300px image by default. If the requesting device has a DPR of 2, ImageEngine will serve a 600px image (300px display size x DPR 2).

Set a maximum DPR

In the previous example, the largest image has a size of 1920 pixels and the w descriptor conveys this information to the browser. One might think that this big image will only be served to desktops or big screens. However, it may also be served to a mobile device on a slow connection with a device pixel ratio of 4 (4 / 1920 = 480 display pixels).

The image payload grows significantly as the pixel ratio grows. On slow networks, this can affect the load times and user experience.

Even if most devices today have a DPR of 2, 3 and 4, the human eye can rarely spot any difference in images above a DPR of 2.

This case is though, if possible at all, to handle with responsive images syntax.

Because responsive images quickly can "get out of control" and serve too big images on high density displays, for most sites, it's recommended to set a maximum DPR in the ImageEngine settings. The recommended value is 2.1.

Conclusion

ImageEngine makes the implementation and management of responsive images a lot easier. Reduced build times, flexible sizes, and breakpoints and you don't have to worry about format conversions.

You can still use the traditional <img src=""> element if your origin images are small, more or less the correct pixel size, and does not need to be "floating" with the layout. ImageEngine will also here provide significant improvements.

For responsive images syntax, the recommendation is to use the w_auto directive to provide a fallback size of the image of no better source of information is available.

Our plugins for Vue, React, Angular, Gatsby, Sanity, Contentful and Storyblok are all supporting these best practices out of the box.

Here is a simple demo showing the best practices.