Download - Implementing a Responsive Image Strategy
![Page 1: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/1.jpg)
Implementing a Responsive Image
Strategy Chris Love
http://Love2Dev.com@ChrisLove
![Page 2: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/2.jpg)
The Image Problem• Images Account for Majority of Downloaded Content• That means images cost you and your users money
![Page 3: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/3.jpg)
<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"/>
![Page 4: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/4.jpg)
Designers/Developers tend to use the largest image, relying on the browser to resize
![Page 5: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/5.jpg)
• Waste bandwidth• time• money• Forces Browser to
Work Harder
![Page 6: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/6.jpg)
85%
http://bit.ly/1RXpBCd
85% of mobile users expect pages to load as fast or faster than they load on the desktop.
![Page 7: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/7.jpg)
![Page 8: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/8.jpg)
The Image Problem• Screen Diversity Means Variety of Image Sizes & Quality• Screen Size• Screen Resolution• Bandwidth Consideration• Art Direction
![Page 9: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/9.jpg)
![Page 10: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/10.jpg)
<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"/>
![Page 11: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/11.jpg)
<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"/>
![Page 12: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/12.jpg)
<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"/>
![Page 13: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/13.jpg)
img/66-pounds-108-days-cover_fz0145_c_scale,w_200.jpg 200w,
Image Source Image Width
![Page 14: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/14.jpg)
![Page 15: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/15.jpg)
![Page 16: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/16.jpg)
Don’t Panic!!!!
•srcset is a progressive enhancement•So it fails gracefully•Internet Explorer loads the src image just like always!
![Page 17: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/17.jpg)
![Page 18: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/18.jpg)
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
![Page 19: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/19.jpg)
<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"/>
![Page 20: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/20.jpg)
How Does The Browser Choose?
We Don’t Know!
And That’s OK
![Page 21: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/21.jpg)
What if You Want to Control the Rendered Width?
![Page 22: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/22.jpg)
sizes to the rescue!
![Page 23: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/23.jpg)
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
![Page 24: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/24.jpg)
<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"/>
![Page 25: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/25.jpg)
sizes="(max-width: 453px) 67vw, 453px"
Media Query Condition Source size Default
![Page 26: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/26.jpg)
vw unit• Not a Fun German Car• Refers to Viewport Width• 1 vw === 1% of the current viewport width
![Page 27: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/27.jpg)
Art Direction
![Page 28: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/28.jpg)
![Page 29: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/29.jpg)
The PICTURE Element
• Accounts for Art Direction• Mime Type Support
![Page 30: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/30.jpg)
![Page 31: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/31.jpg)
![Page 32: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/32.jpg)
Don’t Panic!!!!
•PICTURE is a progressive enhancement•So it fails gracefully•Internet Explorer & Safari load the src image just like always!
![Page 33: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/33.jpg)
![Page 34: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/34.jpg)
<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>
![Page 35: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/35.jpg)
<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>
![Page 36: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/36.jpg)
When using the <PICTURE> element you must make sure your CSS breakpoints match your image breakpoints
![Page 37: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/37.jpg)
<PICTURE> CaveatsArt Direction is Usually an Edge Case
![Page 38: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/38.jpg)
Great! But How Do You Manage Responsive Images?Automation!
![Page 39: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/39.jpg)
The Image Problem – Read More• http://responsiveimages.org/
• Jason Grigsby Responsive Images Serieshttp://blog.cloudfour.com/responsive-images-101-part-10-conclusion/
![Page 40: Implementing a Responsive Image Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586fd3d91a28ab18428b4639/html5/thumbnails/40.jpg)