implementing a responsive image strategy
TRANSCRIPT
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
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"/>
<img
src="img/66-pounds-108-days.jpg“
alt="66 Pounds in 108 Days - How a Normal Fat Guy Lost Weight and Got In Shape"/>
<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
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"/>
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"
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"/>
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 tag for browsers that do not support picture element --> <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/