Applications must implement responsive web design strategies today. However most developers are not experienced in responsive techniques. More over images have provided a difficult hurdle for developers and business stakeholders to make responsive. A proper responsive web design strategy increases return on investment, reduces long term maintenance requirements and improves application performance. Images create many challenges in implementing responsive design. This session will explain what responsive images are. How new web standards have enabled manageable responsive image practices. We will go over tooling and techniques to enable responsive images in your developer and line of business workflows. When you leave this session you will have actionable knowledge of responsive images, techniques, tooling and workflow options you can apply to your projects now.

1. Implementing a Responsive
Image Strategy
Chris Love
http://Love2Dev.com
@ChrisLove

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

3. <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"/>

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

5. • Waste bandwidth
• time
• money
• Forces Browser to
Work Harder

6. 85%
http://bit.ly/1RXpBCd
85% of mobile users expect pages to load as fast or
faster than they load on the desktop.

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

10. <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"/>

11. <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"/>

12. <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"/>

13. img/66-pounds-108-days-cover_fz0145_c_scale,w_200.jpg 200w,
Image Source Image Width

16. Don’t Panic!!!!
•srcset is a progressive
enhancement
•So it fails gracefully
•Internet Explorer loads the
src image just like always!

18. 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

19. <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"/>

20. How Does The Browser Choose?
We Don’t Know!
And That’s OK

21. What if You Want to
Control the Rendered
Width?

22. sizes to the rescue!

23. 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

24. <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"/>

25. sizes="(max-width: 453px) 67vw, 453px"
Media Query Condition Source size Default

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

27. Art Direction

29. The PICTURE Element
• Accounts for Art Direction
• Mime Type Support

32. Don’t Panic!!!!
•PICTURE is a progressive
enhancement
•So it fails gracefully
•Internet Explorer & Safari
load the src image just like
always!

34. <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>

35. <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>

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

37. <PICTURE> Caveats
Art Direction is Usually an Edge Case

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

39. The Image Problem – Read More
• http://responsiveimages.org/
• Jason Grigsby Responsive Images Series
http://blog.cloudfour.com/responsive-images-101-part-10-conclusion/