This document discusses techniques for optimizing images for responsive web design. It begins by noting that large images can slow down sites on small viewports. It then covers several approaches to address this issue, including using CSS backgrounds, SVG images, responsive image services, and the picture element with srcset. It emphasizes using the simplest possible solution for each situation, with progressive enhancement as needed, and outlines processes for automating image optimization with tools like Grunt.

1. responsive
images
in action
THE BIG
PICTURE .
PRESENTED BY MATTHIAS LAU

2. {
}
name: "Matthias Lau",
link: "http://laumatthias.de",
twitter: "@matthiaslau",
hometown: {
name: "Hamburg, Germany"
},
bio: "E-Commerce Freak and Web-Allrounder, love coding,
awesome internet concepts, Chrome, Web Frameworks, Evernote,
the Apple Multi-Touch Trackpad, Bouldering, Wikipedia and
Espresso.",
work: {
employer: {
name: "Jimdo"
},
},

5. THEY
A LOT!
OPTIMIZED

6. STILL...
LARGE IMAGES
!
FOR SMALL VIEWPORTS

7. WHAT
WE
!
WANT!

8. OPTIMIZED
IMAGES

9. OPTIMIZED
IMAGES

10. OPTIMIZED
IMAGES

11. ART
!
DIRECTION

14. FAST
!
IMAGES

15. IT SHOULD
ALSO WORK
WITHOUT
!
JAVASCRIPT

16. CACHING / CDN

17. SIMPLE
!
CODE
<img
src="/img/funny-­‐cat.jpg">

18. RESPONSIVE IMAGE
TECHNIQUES
http://matthiaslau.github.io/responsive-images/

19. USE
SVG´s

20. CSS
BACKGROUNDS

21. CSS BACKGROUNDS
#iguazu
{
background-­‐image:
url(small.jpg);
}
@media
screen
and
(min-­‐width:
601px)
{
#iguazu
{
background-­‐image:
url(medium.jpg);
}
}

22. ART DIRECTION
FAST
CACHING / CDN
NOJS
SIMPLE CODE

23. IT IS A CSS IMAGE

24. ACCESSIBILITY
<div
id="iguazu"
role="img"
aria-­‐label="Iguazu"></div>

25. CLOWN
CARS

26. <img
src="iguazu.svg"
alt="Iguazu
Waterfalls">

27. <svg
xmlns='http://www.w3.org/2000/svg'>
<title>Iguazu
Waterfalls</title>
<style>
@media
screen
and
(max-­‐width:300px){
svg{
background-­‐image:url(http://localhost:8010/
responsive_images/img/small.jpg);
}
}
@media
screen
and
(min-­‐width:301px){
[…]
}
</style>
</svg>

28. <!-­‐-­‐
use
the
object
tag
for
maximal
browser
support
without
security
drawbacks
-­‐-­‐>
<!-­‐-­‐
put
the
SVG
data
inline
to
prevent
a
second
HTTP
request
-­‐-­‐>
<object
data="data:image/svg+xml,%3Csvg%20viewBox=[…]"
type="image/svg+xml">
<!-­‐-­‐
IE8
fallback
-­‐-­‐>
<!-­‐-­‐[if
lte
IE
8]>
<img
src="medium.jpg"
alt="Iguazu
Waterfalls">
<![endif]-­‐-­‐>
</object>

29. ART DIRECTION
FAST
CACHING / CDN
NOJS
SIMPLE CODE

30. RESS /
ADAPTIVE IMAGES
http://adaptive-images.com/

31. JS
viewport width
Cookie

32. Cookie
image request
.htaccess
Scaling
Logic
best fitting image

33. ART DIRECTION
FAST
CACHING / CDN
NOJS
SIMPLE CODE

34. RESIZING
SERVICES

35. RESIZING
SERVICES
http://src.sencha.io/320/200/http://[...]/huge-­‐hd.jpg
http://www.sencha.com/learn/how-to-use-src-sencha-io/

36. RESIZING
SERVICES
<script
src='http://src.sencha.io/screen.js'></script>
!
<img
src='http://src.sencha.io/wiw/http://[...]/huge-­‐
hd.jpg'
alt='Iguazu
Waterfalls'
/>

37. ART DIRECTION
FAST
CACHING / CDN
NOJS
SIMPLE CODE

38. PICTURE
ELEMENT
+
SRCSET

39. <picture>
<source
media="(min-­‐width:
601px)"
src="medium.jpg">
<source
src="small.jpg">
<!-­‐-­‐
fallback
img
-­‐-­‐>
<img
src="medium.jpg"
alt="Iguazu">
<!-­‐-­‐
alternate
text
-­‐-­‐>
<p>Iguazu</p>
</picture>

40. <img
alt="Iguazu"
src="small.jpg"
srcset="medium.jpg
1x,
medium-­‐2x.jpg
2x">

41. <picture>
<source
media="(min-­‐width:
601px)"
srcset="medium.jpg
1x,
medium-­‐2x.jpg
2x">
<source
src="small.jpg">
<!-­‐-­‐
fallback
img
-­‐-­‐>
<img
src="medium.jpg"
alt="Iguazu">
<!-­‐-­‐
alternate
text
-­‐-­‐>
<p>Iguazu</p>
</picture>

42. <3

43. ART DIRECTION
FAST
CACHING / CDN
NOJS
SIMPLE CODE

44. NO BROWSER
SUPPORT YET

47. PICTUREFILL
https://github.com/scottjehl/picturefill
https://github.com/Wilto/picturefill-proposal

49. ART DIRECTION
FAST
CACHING / CDN
NOJS
SIMPLE CODE

50. THERE IS EVEN
MORE
Mobify..js
Doubletake Riloadr
rwdImages
HiSRC
Content Aware Resizing
Responsive Enhance
Retina.js
Foresight.js
https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0

51. NOW
WHAT?
a summary

52. WHERE POSSIBLE
CSS IMAGES
+ SVG´s
OTHER
PICTUREFILL

53. USE
SOMETHING
please

54. THE
PROCESS
with grunt

55. original
grunt

56. options:
{
sizes:
[
{
name:
"s",
width:
320,
quality:
0.6
},
{
name:
"s",
suffix:
"x2",
width:
640,
quality:
0.6
},
[…]
]
},
files:
[{
expand:
true,
cwd:
'img/',
src:
['*.{jpg,gif,png}'],
dest:
'img/generated/'
}]
https://github.com/andismith/grunt-responsive-images

57. „Don't click this if on a 3G
network, it probably take
forever, just check it out when
you get home.“

58. forecast:
CONTEXT-BASED
IMAGES

59. QUESTIONS?
http://twitter.com/matthiaslau
http://laumatthias.de/
https://www.xing.com/profile/Matthias_Lau