A List Apart: Articles: Responsive Images and Web Standards at the Turning Point

May 17th, 2012 § 2 comments

If you are a web designer or developer you should really be paying attention to this debate. Mobile devices and the retina display are going to drastically change the images we serve to our users and how we go about doing that is currently being decided.

For what it’s worth I don’t like either method but much prefer the new <picture> tag proposed by the RSIG group and favored by developers over the confusing and syntax sensitive <img set=”” /> method proposed by WHATWG and favored by browser makers.

Read the article linked in the headline for the full scoop but this code example seals the fate of <img set=”” /> in my book.

Correct:

<img src="face-600-200@1.jpeg" alt=""
       set="face-600-200@1.jpeg 600w 1x,
           face-600-200@2.jpeg  600w 2x,
           face-icon.png        200w">

Incorrect:

<img src="face-600-200@1.jpeg" alt=""
      set="face-600-200@1.jpeg 600 1x,
           face-600-200@2.jpeg 600 2x,
           face-icon.png       200">

Incorrect:

<img src="face-600-200@1.jpeg" alt=""
      set="face-600-200@1.jpeg, 600w 1x
           face-600-200@2.jpeg  600w 2x,
           face-icon.png        200w">

Can you spot the difference? Would you like to do that for every image on every page? Can you imagine trying to test this?


Follow me on twitter.

§ 2 Responses to A List Apart: Articles: Responsive Images and Web Standards at the Turning Point"

  • Nick says:

    The kinds of things that make me feel we’re in the stone age…
    Do you think its the Developers/Designers that are the root of the issue? Its just sad that there are either no standardized tools, or too many deficient ones to actually help with syntax automation or at least correction for such things.

  • Thomas Paine says:

    You can get there through a combination of auto-complete and html validation tools but you are correct that we are living in the stone age when it comes to writing code. The fact that so much depends upon the placement of a comma is pretty laughable.

    When Siri can write code for us we will have arrived in the bronze age.

Leave a Reply

What's this?

You are currently reading A List Apart: Articles: Responsive Images and Web Standards at the Turning Point at Thomas Paine Rants.

meta