Attempt to Solve Multiple Image Sizes for Multiple Screen Sizes

First article:
A sample picture implementation

Follow-up article:
Polyfilling picture without the overhead

With the addition of a polyfill, the HTML looks like this:

<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- smallest size first - no @media qualifier -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg">
<!-- medium size - send to viewport widths 400px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5.jpg" media="(min-width: 400px)">
<!-- large size - send to viewport widths 800px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_z.jpg" media="(min-width: 800px)">
<!-- extra large size - send to viewport widths 1000px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_b.jpg" media="(min-width: 1000px)">
<!-- extra large size - send to viewport widths 1300px wide and up -->
<source src="http://farm8.staticflickr.com/7144/6547286841_c6160b34e2_o.jpg" media="(min-width: 1200px)">
<!-- Fallback content for non-JS or non-media-query-supporting browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s