Transloadit

What are Adaptive Images?

Adaptive images are asset variants selected or generated for a viewer’s display size, pixel density, format support, or network conditions. Each variant represents the same source at a suitable delivery profile.

How Adaptive Images work

Adaptive image delivery keeps one source and offers several variants that differ in pixel width, pixel density, crop, or encoding format. The HTML Standard discusses the technique under the heading “Adaptive images”; MDN calls it responsive images. The variant can be chosen in two places. In markup, srcset and sizes list candidates and the browser picks one, while picture with source elements adds rules for art direction (media) and for format (type). On the server, a single URL returns different bytes depending on request headers such as Accept or client hints. Markup-based selection needs only a distinct URL per variant. Server-side selection keeps the HTML short but makes correct results depend on how caches are told about the varying headers.

Key facts

  1. Why does a small image on the page still download the largest file? The browser starts fetching images before it has applied the page’s CSS, so the layout width has to be declared in HTML. With w descriptors the HTML Standard requires a sizes attribute; if it is missing or cannot be parsed, the width is taken as 100vw, as if the image filled the viewport. Each w value must also match the file’s real pixel width. On images with loading="lazy", sizes="auto" lets the browser use the rendered width, with a fallback list after it for browsers that do not support the keyword. Only before such an img may source elements leave sizes out, which the standard treats as equivalent to auto.
  2. Can I predict exactly which candidate a browser loads? Not from srcset alone. The standard lets the browser choose “in an implementation-defined manner” and weigh pixel density, zoom level, and possibly network conditions, so two browsers may load different files from the same markup. Choosing between source elements is rule-based instead: the browser takes them in order and uses the first one whose media query matches and whose type it supports, treating a missing attribute as a pass. Reserve media for art direction, where a different crop must be shown, and let the browser decide between resolutions.
  3. How do I offer AVIF or WebP with a fallback? Put one source per format inside picture, each with a type attribute such as type="image/webp", followed by an img in a widely supported format. The browser skips any source whose type it does not support. Do not omit type: without it, the HTML Standard says the browser will not move on to another source after fetching an image format it does not support. When a crop is also selected with media, give that crop a source in the fallback format too and place its sources before those that apply more broadly; otherwise a browser that cannot decode the newer format falls through to a different crop.
  4. What changes when the server picks the variant instead? Caches must know which request headers the choice depended on. A response selected by Accept or by a client hint should list that header in Vary; otherwise a cache may reuse one variant for a request that needed another. Hints such as Sec-CH-Width are sent only after the server opts in with Accept-CH, and MDN marks Sec-CH-Width as experimental, so check browser support and keep a sensible default for requests that carry no hints.

When Adaptive Images matter

Serve smaller variants to narrow screens while retaining denser versions for high-density displays. Incorrect sizing rules can waste bandwidth or leave an image visibly soft at its rendered dimensions.

How Transloadit helps with Adaptive Images

Transloadit’s Smart CDN can create the variants on request. A tlcdn.com URL names your Workspace, a Template, and the source file, and URL parameters such as a width fill Template variables that configure Robots like /image/resize. A request that misses the cache runs the Template; requests that hit the cache reuse the stored result. Choosing which URL a visitor loads stays in your markup: the pages linked here describe variants addressed by URL parameters and do not describe selection from request headers such as Accept, so list the variant URLs in srcset or picture.

Every cache miss imports and transforms the file and counts toward usage: the first request for each new parameter combination, and any later request made once the cached copy is no longer available, which depends on your caching settings. Cache hits are not transformed again. Limit the variables a Template accepts and sign Smart CDN URLs so that visitors cannot request arbitrary variants. When every size is known before publication, running an Assembly once and serving its stored outputs avoids on-demand transformation.

Explore Transloadit’s image capabilities

Sources

Turn media knowledge into a working pipeline

Connect uploads, processing, AI, storage, and delivery through one declarative API — with the encoding stack, scaling, and format churn handled for you.

Try Transloadit for free