Show / Hide Table of Contents

Single versus adaptive images

Single image properties

These are used for images that aren't necessarily rendered differently depending on screen size.

Examples include logotypes, thumbnails, and meta data images such as og:image which isn't displayed on the website, but used for when links to the website are shared.

Another example could be a square portrait or product image that shouldn't be cropped differently for different screen sizes, but simply rendered with different sizes in different contexts.

Adaptive image properties

The main difference between an adaptive image and a single image, is that an adaptive image supports three form factors: Large, Medium, and Small (e.g. desktop, tablet, and mobile).

An adaptive image can be used in different ways:

  1. Use the same image with the same proportions on all devices, but with different sizes to reduce bandwidth and improve performance, especially on mobile

  2. Use the same image and proportions on all devices, but with different croppings, for example a more "zoomed in" version for mobile to avoid clutter

  3. Use the same image but with different proportions, for example to have the mobile version be more squarish

  4. Use entirely different images for each form factor, depending on the design, since an image suitable for widescreen proportions might not be suitable for tall proportions, i.e. a standing image

All these options are viable and easily configured by applying different constraints for different form factors.

Code samples

  • Adding a SingleImage property

  • Adding an AdaptiveImage property

☀
☾
In this article
Back to top
Documentation applies to: Adaptive Images 2.x
☀
☾