Practical HTML for Adaptive Images

Previously, on Practical HTML for responsive images

  1. I talked about the importance of responsive images on a web where big, beautiful images are desirable.
  2. I dug into the WEBP, JPEG 2000 and JPEG XR file types, and decided why WEBP was the only version I cared to support. I also covered some of the tools you can use to generate WEBP files.
  3. I gave you HTML for responsive images that you can confidently use in most cases.

I also promised a followup post where I would cover the code for adaptive images. This is that post.

What is an adaptive image?

Unlike a responsive image — which is exactly the same crop regardless of size — an adaptive image is an image that changes crop depending on the context.

That cool castle image from above scaled with different crops and aspect ratios for different browser sizes.

 /></p><h2><strong>What we want to do:</strong></h2><p>When serving adaptive images on the web, I want the following:</p><ul><li>I want my markup to provide the browser with all the images, and for the browser to choose what’s best.</li><li>I want to use modern the modern format WEBP, with JPG images as backups.</li></ul><p>Let’s get into the code.</p><p><strong>The Code</strong></p><p>For a version of this code with all the comments stripped out <a href=

click here.

We’ll break down the logic the browser goes through when it reads the code, then we’ll break down key formatting of the code itself.

The Browser Logic

The thought process the browser has when it sees this code:

  1. : A picture! 🆒
  2. : I’ll assess the element before deciding whether or not I should display it. 🔎
  3. media= : Does this match my screen size? Either: Yep, looks good! 👍 (OR) Nope! Let’s move onto the next source element 👎
  4. type="image/webp” : I’m a modern browser and can handle this no problemo. 💪
  5. Now I’ll choose the image file that is the resolution I want, hop down to
  1. and grab the alt, class and style elements, and display the image. Easy peasy! 😎

The Code — Elements and Formatting

I’ll do an abbreviated version of this since we went over it in the last post.


Download “The Essential Guide to Launching a Digital Product for Experts & Expert Firms”

Let's Talk
Tell us about the opportunity you're pursuing, and we'll follow up in one business day. If you prefer, you can email