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:
Use the same image with the same proportions on all devices, but with different sizes to reduce bandwidth and improve performance, especially on mobile
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
Use the same image but with different proportions, for example to have the mobile version be more squarish
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.