Difference between HTML implementation for Art Direction and Resolution Switching (responsive images)

Question

I've read the following article https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images and a number of similar resources.

I can't get my head around why - from a programatic perspective - there is any difference between Art Direction and Resolution Switching. The explanation given for both differs, as does the HTML used to solve the problem. Quoted from the article:

Art direction: The problem whereby you want to serve cropped images for different layouts... This can be solved using the <picture> element.

and:

Resolution switching: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do This can be solved using vector graphics (SVG images), and the srcset and sizes attributes.

Let's say I have a "landscape" banner such as a 2000 * 500px image, e.g. http://placehold.it/2000x500

That looks fine on a desktop/laptop screen. But on mobile it doesn't look correct because the content in the centre (text in this case, but could be a photo of a group of people) isn't visible. So I'd imagine this is an example of the art direction problem? But it also falls into the category of resolution switching because why would anyone want to download a 2000px wide image - with a large file size - onto a mobile device when a smaller one could work?

So in terms of the implementation, I could use EITHER the Art Direction or Resolution Switching implementation to solve it? Why do I need 2 different solutions that do the same thing?

For example -

<img srcset="banner-320w.jpg 320w,
         banner-480w.jpg 480w,
         banner-2000w.jpg 800w"
 sizes="(max-width: 320px) 280px,
        (max-width: 480px) 440px,
        800px"
 src="banner-2000w.jpg" alt="Banner">

This would use the banner-2000w.jpg banner on anything over 800px wide, e.g. desktop/laptop and different proportion images (solving the art direction problem) but also of different file sizes (solving the resolution switching problem).

But the exact same thing can also be done with the picture attribute which is what the article describes as a solution for the Art Direction problem:

<picture>
      <source media="(max-width: 320px)" srcset="banner-320w.jpg">
      <source media="(max-width: 480px)" srcset="banner-480w.jpg">
      <img src="banner-2000w.jpg" alt="Banner">
</picture>

Can someone explain under what circumstances one implementation is better than the other? It seems to me that both implementations solve both problems - or is this not the case?

Answer 1

Although both do the same thing (select different images to fetch and display), the best syntax for each use case is different.

Resolution Switching

Resolution switching optimizes bandwidth consumption for users with lower resolution displays. A use case for this is when you have an image gallery: users with desktop displays (high resolution) fetch large (in bandwidth bytes) images while mobile users (low resolution) fetch smaller images. For the mobile users, the high resolution images don't make a difference, so they pull less bytes over the network.

The page you mention has this snippet that uses an improved syntax for resolution switching:

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

The NUMBERx portion of the srcset attribute is the ratio of real display pixels to CSS pixels (higher implies a better display).

Art Direction Problem

In the art direction problem, you optimize for user experience (as opposed to bandwidth): you have several images, potentially at the same resolution but cropped differently or with different aspect ratios.

This is used to emphasize content on different displays: if you have an image of a landscape with a dog in the middle, desktop users probably won't have a problem seeing the dog. However, the screen for a mobile user is smaller, so the dog might just be a tiny spot. This is similar to what usually happens when using a projector to present your computer's screen, where you need to adjust font sizes but not resolution.

Again using the example from your linked article:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

Notice that this uses media queries to select the image based on the viewport (not display to CSS pixel ratios).

The initial img example

Although it might be possible to solve both problems with this, the solution isn't obvious. Using the <picture> element, however, provides a much easier to understand syntax:

<picture>
  <source media="(max-width: 799px)"
          srcset="elva-480w-close-portrait.jpg
                  elva-480w-close-portrait-medium.jpg 1.5x
                  elva-480w-close-portrait-medium.jpg 2x">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>