Implementing a Responsive Image Strategy

Implementing a Responsive Image

Strategy Chris Love

http://Love2Dev.com@ChrisLove

The Image Problem• Images Account for Majority of Downloaded Content• That means images cost you and your users money

<img

src="img/66-pounds-108-days.jpg“

Height=“640px” width=“240px”

alt="66 Pounds in 108 Days - How a Normal Fat Guy Lost Weight and Got In Shape"/>

Designers/Developers tend to use the largest image, relying on the browser to resize

• Waste bandwidth• time• money• Forces Browser to

Work Harder

85%

http://bit.ly/1RXpBCd

85% of mobile users expect pages to load as fast or faster than they load on the desktop.

The Image Problem• Screen Diversity Means Variety of Image Sizes & Quality• Screen Size• Screen Resolution• Bandwidth Consideration• Art Direction

<img


height=“640px” width=“240px”


<img



<img

srcset="img/66-pounds-108-days-cover_fz0145_c_scale,w_200.jpg 200w, img/66-pounds-108-days-cover_fz0145_c_scale,w_280.jpg 280w,

img/66-pounds-108-days-cover_fz0145_c_scale,w_346.jpg 346w, img/66-pounds-108-days-cover_fz0145_c_scale,w_405.jpg 405w, img/66-pounds-108-days-cover_fz0145_c_scale,w_453.jpg 453w"

src="img/66-pounds-108-days-cover.jpg" alt="66 Pounds in 108 Days - How a Normal Fat Guy Lost Weight and Got In Shape"/>

img/66-pounds-108-days-cover_fz0145_c_scale,w_200.jpg 200w,

Image Source Image Width

Don’t Panic!!!!

•srcset is a progressive enhancement•So it fails gracefully•Internet Explorer loads the src image just like always!

srcset

A list of one or more strings separated by commas indicating a set of possible image sources for the user agent (browser) to use

<img




How Does The Browser Choose?

We Don’t Know!

And That’s OK

What if You Want to Control the Rendered Width?

sizes to the rescue!

sizes

A list of one or more strings separated by commas indicating a set of source sizes.Each source size consist of a media condition and a source size value

<img sizes="(max-width: 453px) 67vw, 453px"




sizes="(max-width: 453px) 67vw, 453px"

Media Query Condition Source size Default

vw unit• Not a Fun German Car• Refers to Viewport Width• 1 vw === 1% of the current viewport width

Art Direction

The PICTURE Element

• Accounts for Art Direction• Mime Type Support

Don’t Panic!!!!

•PICTURE is a progressive enhancement•So it fails gracefully•Internet Explorer & Safari load the src image just like always!

<PICTURE> ELEMENT<picture> <source media="(min-width: 650px)" srcset="images/kitten-large.png"> <source media="(min-width: 465px)" srcset="images/kitten-medium.png">  <img src="images/kitten-small.png" alt="a cute kitten"> </picture>

<PICTURE> ELEMENT - Type<picture> <source type="image/svg+xml" srcset="logo.xml"> <source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="ACME Corp"></picture>

When using the <PICTURE> element you must make sure your CSS breakpoints match your image breakpoints

<PICTURE> CaveatsArt Direction is Usually an Edge Case

Great! But How Do You Manage Responsive Images?Automation!

The Image Problem – Read More• http://responsiveimages.org/

• Jason Grigsby Responsive Images Serieshttp://blog.cloudfour.com/responsive-images-101-part-10-conclusion/

Implementing a Responsive Image Strategy

Technology