[whatwg] responsive images srcalt proposal

pghj pghjvanblokland at gmail.com
Sat Jan 25 07:25:13 PST 2014

Thank all of you for your feedback.

 For clarification, the srcalt proposal is NOT intended to specify an
(image) pre-loading mechanism. The pre-loading strategy I described earlier
is just a suggestion for an implementation that I came up with to show that
page loading performance does not need to suffer from srcalt, and might in
fact be improved.

The srcalt proposal is basically just

<img src="image0.jpg" srcalt="image0.jpg 200x150 10kB, image1.jpg 100x75
4kB, image2.jpg 400x300 16kB"/>

and the fact that the browser has great freedom in deciding when to load
which image when srcalt is present (even until after the page load event
has been fired).

The source alternatives (imageN.jpg in the example) are supposed to be
visually identical, and differ only in resolution/quality/file size.

I completely agree with Fred that too much emphasis is on pre-loader
optimization, but that is exactly what srcalt intends to avoid. Most of the
other proposals that I read seem to be about spoon-feeding the pre-loader.
Srcalt just tells what image sources are available to pick from.

An advantage of srcalt for authors is that they only need to worry about
display resolutions, physical screen size and design breakpoints when they
are writing their stylesheets, and can leave the choice of <img> source to
the browser.

An advantage of srcalt for users is that they can instruct their browser to
safe bandwidth/increase speed through always loading the smaller sources,
because all sources are supposed to be visually identical (unlike in other

Srcalt leaves switching between visually different images to stylesheets,
treating images and other content equally:

<div class='smallscreen'> <img src='closeup.jpg' srcalt='...' /> little bit
of text </div>

<div class='largescreen'> <img src='overview.jpg' srcalt='...' /> lots of
text </div>

I was wondering how people feel about this separation of concerns. In my
opinion having one <img> element representing one conceptually unique piece
of information is superior to the 'it depends on external conditions what
it represents' approach of other proposals (the art-direction/media
features use cases). Anyone like to comment on this?

 Thank you for reading.


More information about the whatwg mailing list