The basic technique for scaling images in Responsive Web Design (RWD) sites is briefly reviewed, and then one front-end / client-side technique for serving small file size images to mobile users and larger images to desktop users is demonstrated (picturefill.js)

1. »
Responsive ImagesResponsive Images
Fort Collins Internet ProfessionalsFort Collins Internet Professionals
July 18, 2013July 18, 2013

2. » Goal 1: Scaling Images

3. » Goal 1: Scaling Images
• Auto-scaling
• as viewport is resized
• for different devices (different screen widths)

4. » The Key to Responsive Images
img { max-width: 100%; }
• Important: in the HTML, don’t specify height
and width attributes on images

5. » The Key to Responsive Images
img { max-width: 100%; }
• Important: in the HTML, don’t specify height
and width attributes on images
• Image renders at the actual dimensions, as
long as it’s narrower than its containing
element
• Modern browsers rock– they resize images
proportionally, aspect ratio remains intact

6. » The Key to Responsive Images
img { max-width: 100%; }
• Important: in the HTML, don’t specify height
and width attributes on images
• Image renders at the actual dimensions, as
long as it’s narrower than its containing
element
• Modern browsers rock– they resize images
proportionally, aspect ratio remains intact
• Bonus: works for embed, video, and object
too

7. » Implementation Example
img { max-width: 100%; }
img.responsive-31 { width:31%;}
http://www.frameworkstimber.com/
> About > Stewardship

8. » Goal 2: Responsible Images

9. » Goal 2: Responsible Images
• AKA – Treat your children well
• Respect the bandwidth issues of your mobile
visitors
– Slower download speeds (in many cases)
– May be paying by the bit! (in $ome cases)

10. » The Situation
• Want to use images with small file sizes for
mobile visitors
• Want to serve beautiful high-res images with
larger file sizes to those with 3000px displays
• But, whatever you do you don’t want mobile
devices to be downloading any more images
than necessary
• How?

11. » One Technique: picturefill.js
• Scott Jehl
• https://github.com/scottjehl/picturefill
• A Responsive Images approach that mimics
the proposed picture element. More info:
– http://usecases.responsiveimages.org/
– Use cases and requirements for standardizing
responsive images, under development by the
Responsive Image Community Group

12. » One Technique: picturefill.js
<span data-picture data-alt="A giant stone face at The
Bayon temple in Angkor Thom, Cambodia">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width:
400px)"></span>
<span data-src="large.jpg" data-media="(min-width:
800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-
width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. Same img
src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="A giant
stone face at The Bayon temple in Angkor Thom,
Cambodia">
</noscript>
</span>

13. » An Implemenation
• Home page background image for
frameworkstimber.com

14. » An implementation
<div data-picture data-alt="Frameworks Timber - Timber Framing" id="home-background">
<div data-src="/wp-content/themes/fwt/images/home-background-600-n1.jpg"></div>
<div data-src="/wp-content/themes/fwt/images/home-background-800-n1.jpg" data-
media="(min-width: 601px) and (max-width: 800px)"></div>
<div data-src="/wp-content/themes/fwt/images/home-background-1200m.jpg" data-
media="(min-width: 801px) and (max-width: 1200px)"></div>
<div data-src="/wp-content/themes/fwt/images/home-background-1500m.jpg" data-
media="(min-width: 1201px) and (max-width: 1500px)"></div>
<div data-src="/wp-content/themes/fwt/images/home-background-2000m.jpg" data-
media="(min-width: 1501px) and (max-width: 2000px)"></div>
<div data-src="/wp-content/themes/fwt/images/home-background-5000.jpg" data-
media="(min-width: 2001px)"></div>
<!--[if (lte IE 9) & (!IEMobile)]>
<div data-src="/wp-content/themes/fwt/images/home-background-2000m.jpg"></div>
<![endif]-->
<noscript>
<img src="/wp-content/themes/fwt/images/home-background-600.jpg"
alt="Frameworks Timber - Timber Framing">
</noscript>
</div>

15. » Span vs. Div
• You may have noticed that the Jehl example
uses spans and my example uses divs.
• v1 of picturefill.js uses divs
• Newer versions use spans for a few reasons,
one of which is that since the <img> tag is an
inline element by default, <span> is a better
fit as it’s also an inline element compared
with <div> which is a block element.

16. » Additional Resources
• The article that started it all, by Ethan Marcotte:
– http://www.alistapart.com/articles/responsive-web-design/
• Fluid Images by Ethan Marcotte:
– http://unstoppablerobotninja.com/entry/fluid-images
• IE8 and below Media Queries fix:
– http://code.google.com/p/css3-mediaqueries-js/
• IE6 min/max-width hack:
– http://www.cameronmoll.com/archives/000892.html
• Fluid Grids by Ethan Marcotte:
– http://www.alistapart.com/articles/fluidgrids/
• Media Queries reference, list of Media Query selectors available:
– http://www.w3.org/TR/css3-mediaqueries/
• Responsive Typesetting:
– http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html

17. » Where to find me
• @ron_z – follow me on Twitter
• ronz@codegeek.net
• codegeek.net
• IgniteFortCollins.com and @IgniteFC
• The Fort Collins Hive: HiveFC.com

18. »
Thank YouThank You
Fort Collins Internet ProfessionalsFort Collins Internet Professionals
July 18, 2013July 18, 2013

19. » Media Queries?
First, Media Types, which you already know:
<link rel="stylesheet" media="screen" href="c.css" />
<link rel="stylesheet" media=”print" href="c.css" />

20. » CSS3 Media Queries
In your HTML:
<link rel="stylesheet"
media="screen and (max-width:340px)” href=“c.css” />
Or more commonly, in your CSS:
@media screen and (max-width:340px) { Styles applicable
for viewports 340px and narrower … }

21. » CSS3 Media Queries
• min-width (refers to viewport dimensions)
• min-device-width refers to display dimensions
of the device (maybe safe for identifying the
device, iPad, iPhone, etc.)
• can select based on dpi or dpcm, not just
width
• can select based on color depth

22. » More Media Queries
http://www.w3.org/TR/css3-mediaqueries/
• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

23. » Browser Support
• Opera 9.5+
• Firefox 3.5+
• Safari 3+
• Chrome
• IE9 +
• Mobile Webkit
• Opera Mobile ~

24. » A magic bullet
code.google.com/p/css3-mediaqueries-js/
• IE5 – IE8
• Firefox 1 & 2
• Safari 2
• Legacy, if you only care about IE5 – IE8:
<!--[if lt IE 9]>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<![endif]-->