Today I was just about to write a blog post about images and serving different sizes depending on the device accessing it. Then the Adaptive images post came up on the public-html@w3.org mailing list. So let’s look at that and add my thoughts.

The problem

When we develop a web site we need to cater to a great amount of varying resolutions, and one major problem is serving images with an appropriate size (i.e. width and height – file size is a discussion for another day). We have CSS3 Media Queries helping us detect available width, like this:

.navigation {
  float: left;
  width: 300px;
}

.main-content {
  float: right;
  width: 500px;
}

@media screen and (min-width: 1000px) {
  .navigation {
    width: 350px;
  }

  .main-content {
    float: right;
    width: 650px;
  }
}

But there is unfortunately no way to load different images based on this approach.

Suggestions in the mailing list

These are two of the suggestions brought up for doing this in the HTML code, and both seem interesting:

New @srclist attribute point to list of sources

<img src=default.jpg srclist=alternativeSizes alt="Picture of
Unicorn">
<sourcelist id=alternativeSizes>
<source src="big.jpg" media="min-width: 600px" width="600"
height="400">
<source src="small.jpg" media="max-width: 600px" width="320"
height="320">
</sourcelist>

(<sourcelist> could maybe be replaced by another existing element?
<map>? <datalist>? SVG's <switch>?)

New image format that points to alternative resolutions

<img src="image.list" alt="Picture of Unicorn>

image.list:
Content-Type: image/list

URI: big.jpg
media: (min-width: 600px)

URI: small.jpg
media: (max-width: 600px)

Alternative take, src attribute in CSS: Content or presentation?

Looking at the above examples, though (especially the first one), that’s a lot of code that has to be written. The downside of the second one is that it will be listed in a completely separate (and new kind of) file.

This led me to thinking whether various sizes of the same image is really content or presentation? And if it’s regarded as vital content, could we rely on CSS to do it anyway and have alternate text as a sufficient fallback?

My suggestion would be to have a src attribute in CSS, to combine with CSS Media Queries, and this could apply to image elements as well as video, audio and others. Then we would be able to do something like this:

.my-image {
    src: url(images/really-small.png);
}

@media screen and (min-width: 1000px) {
    .my-image {
        src: url(images/decent-size.png);
    }
}

Thoughts on this?

Looking at the suggestions in the mailing list with srclist attribute or new image (list) format, or the alternative approach with a src attribute in CSS to combine with CSS Media Queries, what do you think about them?

Pros and cons, what’s your take?

From http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/