(slides from the O'Reilly webcast, see recording here: http://www.oreilly.com/pub/e/3425) The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is. These slides discuss how you can provide the eye-pleasing experience you want without sacrificing your site's performance. You'll learn about the three primary aspects of image optimization: Image Compression: How to best encode your images, delivering the same picture with the fewest bytes. Image Loading: Once your files are as small as they can be, we'll cover the best ways to make them show up quickly in the browser. Image Operations: Different tools and techniques for integrating image optimization on your site.

1. High Performance Images
Beautiful shouldn’t mean Slow
Guy Podjarny @guypod

2. Average Web Page Weight
(June ’15)
Not
37%
Images
63%
Source: HTTP Archive

3. Images On Average Page
Sep '12 Jun '13 Jun '14 Jun '15
696 KB
891 KB
1,128 KB
1,312 KB
50 Reqs 56 Reqs 55 Reqs 55 Reqs
Requests KB
+189%
Source: HTTP Archive

4. Images Impact Performance
0
4750
9500
14250
19000
Load Time, 3G Speed
With Images No Images
-30%

5. What Can you do?
Image
Compression
Choose The
Right Format
Control Quality
Image
Loading
Use Responsive
Images
Prioritize Critical
Content
Image
Operations
Encode Well
Transcode in Proxy

6. What Can you do?
Image
Compression
Choose The
Right Format
Control Quality
Image
Loading
Use Responsive
Images
Prioritize Critical
Content
Image
Operations
Encode Well
Transcode in Proxy

7. Image Compression

8. Average Resource Size
CSS
JS
JPEG
0 10 20 30 40
34 KB
16 KB
9 KB

9. RWD Sites Use Big Images
0
10
20
30
40
JPEG Size PNG Size
7.1 KB
20.8 KB
10 KB
31.6 KB
RWD Not RWD

10. Tip #1:
Pick The Right Format

11. Image Formats On The Web
Other
2%
GIF
23%
PNG
29%
JPEG
46%

12. GIF
28 Years Old (1987)
256 Colors
Supports “Simple”
Transparency
Supports Animation

13. PNG
19 Years Old (1996)
8-32 bit color palettes
Alpha Transparency
Non-patented
Credit: Wikimedia

14. GIF -> PNG = 21% Savings
PNG File Size GIF File Size
Source: Styoan Stefanov, “Give PNG A Chance” (2009)

15. JPEG
23 years old (1992)
RGB Colors (24 bit)
No Transparency Support
A Lossy Format

16. Bitmap
JPEG
Bitmap≠
Bitmap
PNG
Bitmap=
Lossy
Compression
Lossless
Compression

17. JPEG
23 years old (1992)
RGB Colors (24 bit)
No Transparency Support
A Lossy Format

18. PNG -> JPG = MUCH Smaller
PNG, 574 KB JPG, 110 KB

19. JPEG: No Transparency
JPEGPNG

20. WebP
0
3.75
7.5
11.25
15
File Size (KB)
JPEG (q75) WebP
9.9 KB
14.4 KB
0
0.825
1.65
2.475
3.3
Bytes Per Pixel
PNG WebP
2.42 bpp
3.27 bpp -26% -31%
Source: Google Studies

21. WebP Browser Support

22. New Image Formats
WebP JPEG XR JPEG 2000
Support
Chrome, Opera,
Android 4.x
IE 10+
Safari on
iOS, OS X
Savings
(over JPEG)
40-50% ~25% 15-20%
Mime Type image/webp
image/vnd.ms-photo
Soon: image/jxr
image/jp2
Identification
Accept:
image/webp
Detect
IE 10+
Detect
Safari 5+

23. Using Custom Formats
Client Side
<script src="picturefill.js"></script>
<picture>
<source type="image/webp"
srcset="book.webp">
<source type="image/vnd.msphoto"
srcset="book.jxr">
<img src="book.jpg" alt="a book">
</picture>

24. Using Custom Formats
Server Side, Single URL
GET /book.jpg GET /book.jpg
OriginCDN/Cache

25. Using Custom Formats
Server Side, Single URL
GET /book.jpg GET /book.jpg
GET /book.jpg
Accept: image/webp
GET /book.webp
OriginCDN/Cache

26. Using Custom Formats
Server Side, Single URL
GET /book.jxr
GET /book.jpg GET /book.jpg
GET /book.jpg
Accept: image/webp
GET /book.webp
GET /book.jpg
User-Agent: MSIE 10
Accept: image/jxr*
OriginCDN/Cache
* Spartan

27. Tip #1:
Pick The Right Format

28. Tip #2:
Control Quality

29. JPEG Quality
High
Quality
Low
Quality

30. Quality: 90
Size: 66 KB
Quality: 75
Size: 37 KB
Quality: 40
Size: 21 KB
Quality: 25
Size: 16 KB

31. Quality: 90
Size: 66 KB
Quality: 75
Size: 37 KB
Quality: 40
Size: 21 KB
Quality: 25
Size: 16 KB

32. Quality Scale Is Per Format
Source: Nick Doyle Performance Calendar
Similarity
0.00
0.06
0.13
0.19
0.25
Quality
0 25 50 75 100
JPEG
JPEG XR
WebP

33. Detecting Excessive Quality
WebPageTest

34. Detecting Excessive Quality
PageSpeed Insights

35. Tip #2:
Control Quality

36. SIZEDoesn’t matter
It’s all about
TECHNIQUE

37. Tip #3:
Size Images To Device

38. Download & Shrink
102 KB
1876 × 520
(975,520 pixels)

39. Download & Shrink
866px
240px
1876px
520px
.hp07img {width: 100%}

40. Download & Shrink
866px
240px
1876px
520px
207,840 pixels
975,520 pixels
79% wasted pixels
(~770K)

41. Download & Shrink
866px
240px
1876px
520px
35,345 Bytes
110,744 Bytes
79% wasted pixels
68% wasted bytes
(~75KB)

42. Download & Shrink
866px
240px
1876px
520px
79% wasted pixels
68% wasted bytes
79% wasted memory
(3MB)
831K Mem Bytes
975,520 * 4(RGBA) = 3.9M Memory Bytes

43. 55
IMAGES
On an Average Page

44. “...25% of new Android phones
have only 512MB of RAM.”
–Jen Fitzpatrick VP of product management for Google Maps

45. Download & Shrink
Processing Times
Source: Tim Kadlec, “Mobile Image Processing”

46. Implementing Responsive Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="A rad wolf">

47. Implementing Responsive Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="A rad wolf">
Hint, Hint…

48. Implementing Responsive Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="A rad wolf">
Hint, Hint…

49. Implementing Responsive Images
<picture>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>

50. Implementing Responsive Images
<picture>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>
Use Picturefill

51. Which Breakpoints To Use?
What Are your Users Using?

52. Which Breakpoints To Use?
How Big & Complex Are Your Images?
Source: Jason Grigsby, “Sensible Jumps In Responsive Image File Sizes”
Width Height File Size
1 320 213 25K
2 453 302 44K
3 579 386 65K
4 687 458 85K
5 786 524 104K
6 885 590 124K
7 975 650 142K
8 990 660 151K

53. Which Breakpoints To Use?
How Big & Complex Are Your Images?
Source: Jason Grigsby, “Sensible Jumps In Responsive Image File Sizes”
point # Width Height File Size
1 320 213 9.0K
2 731 487 29K
3 990 660 40K

54. Tip #3:
Size Images To Device

55. Tip #4:
Prioritize Critical Images

56. Below The Fold
Etsy
82%
Velocity
91%
Guardian
92%

57. Page Content
Not Visible
62%
Visible
38%
On A Typical Page & Desktop Screen…
Image Requests
Not Visible
80%
Visible
20%

58. Download & Hide

59. Download & Hide
img {display: none}

60. Download & Hide
Image Requests 79 78
Image Weight 2,258 KB 2,251 KB

61. Lazy Load Images
<img src="book.jpg" alt="A Book">
<img src="1px.gif" data-src="book.jpg"
alt="A Book" onload="loadImage(this)">

62. Lazy Load Images
<script>
function loadImage(img) {
var dataSrc = imgs[i].getAttribute("data-src");
if (dataSrc && isAboveTheFold(img)) {
img.onload = null;
img.src = dataSrc;
} }
</script>
<img src="1px.gif" data-src="book.jpg"
alt="A Book" onload="loadImage(this)">

63. Lazy Load Images
<script>
function loadImage(img) {
var dataSrc = imgs[i].getAttribute("data-src");
if (dataSrc && isAboveTheFold(img)) {
img.onload = null;
img.src = dataSrc;
} }
// Repeat check on viewport changes (scroll, resize...)
</script>
<img src="1px.gif" data-src="book.jpg"
alt="A Book" onload="loadImage(this)">

64. Defer Load Images
<script>
function loadImage(img, force) {
var dataSrc = imgs[i].getAttribute("data-src");
if (dataSrc && (force || isAboveTheFold(img)) ) {
img.onload = null;
img.src = dataSrc;
} else if (deferOthers) {
window.addEventListener("load",
function() { loadImage(img,true)});
}}
</script>

65. The Infamous
PRELOADER

66. HTML Parser
<html>
<head>
<script src="main.js"></script>
<link src="styles.css" type="text/css">
</head>
<body>
<img src="book.jpg"/>
<img src="bag.jpg"/>
</body>
</html>

67. HTML Parser
main.js
styles.css
book.jpg
bag.jpg
7
<html>
<head>
<script src="main.js"></script>
<link src="styles.css" type="text/css">
</head>
<body>
<img src="book.jpg"/>
<img src="bag.jpg"/>
</body>
</html>

68. HTML Parser & Pre-parser
main.js
styles.css
book.jpg
bag.jpg
<html>
<head>
<script src="main.js"></script>
<link src="styles.css" type="text/css">
</head>
<body>
<img src="book.jpg"/>
<img src="bag.jpg"/>
</body>
</html>

69. HTML Parser & Pre-parser
main.js
styles.css
book.jpg
bag.jpg
<html>
<head>
<script src="main.js"></script>
<link src="styles.css" type="text/css">
</head>
<body>
<img src="book.jpg"/>
<img src="bag.jpg"/>
</body>
</html>

70. HTML Parser & Pre-parser
main.js
styles.css
book.jpg
bag.jpg
11
<html>
<head>
<script src="main.js"></script>
<link src="styles.css" type="text/css">
</head>
<body>
<img src="book.jpg"/>
<img src="bag.jpg"/>
</body>
</html>

71. Who Initiates Image Downloads?
CSS
20%
HTML Parser
37%
Pre-parser
43%
Source: Ilya Grigorik, HTTP Archive

72. HTML Parser & Pre-parser
…
<img src="1px.gif" data-src=“book.jpg"
onload="loadImage(this)"/>
<img src="bag.jpg" data-src="bag.jpg"
onload="loadImage(this)"/>
…
main.js
styles.css
book.jpg
bag.jpg
11

73. Excess
Images
Pre-Parser
Boost

74. Protip #1: LQIP
Low Quality Image Placeholders
<img src=“LowQ.jpg” data-src=”HighQ.jpg”
onload=“loadImage(this)”/>

75. Protip #1: LQIP
Low Quality Image Placeholders
LowQ.jpg
Quality: 25
Size: 16 KB
<img src=“LowQ.jpg” data-src=”HighQ.jpg”
onload=“loadImage(this)”/>

76. Protip #1: LQIP
Low Quality Image Placeholders
LowQ.jpg
Quality: 25
Size: 16 KB
<img src=“LowQ.jpg” data-src=”HighQ.jpg”
onload=“loadImage(this)”/>
HighQ.jpg
Quality: 90
Size: 66 KB

77. Protip #2:
Selective Lazy Load
<img class="responsive-img"
sizes="(min-width: 980px) 460px, (min-width: 740px) 340px, 100%"
srcset="/w-460/<id>/500.jpg 460w, /w-340/<id>/500.jpg 340w,
/w-445/<id>/500.jpg 445w, /w-605/<id>/620.jpg 605w"
src="/w-300/<id>/500.jpg">

78. Protip #2:
Selective Lazy Load
<img class="js-lazy-loaded-image responsive-img"
data-srcset="/w-220/<id>/1000.jpg 220w,
/w-160/<id>/1000.jpg 160w,
/w-127/<id>/1000.jpg 127w"
data-sizes="(min-width: 980px) 220px,
(min-width: 740px) 160px, 127px"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH
5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

79. Protip #2:
Selective Lazy Load
JS
Disabled
<img class="js-lazy-loaded-image responsive-img"
data-srcset="/w-220/<id>/1000.jpg 220w,
/w-160/<id>/1000.jpg 160w,
/w-127/<id>/1000.jpg 127w"
data-sizes="(min-width: 980px) 220px,
(min-width: 740px) 160px, 127px"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH
5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

80. Tip #4:
Prioritize Critical Images

81. Image Operations

82. Tip #5: Encode Well
Quality Curve is NOT a Standard
“Save For Web” is NOT just quality
Decoding Is Standard, Encoding Is Not
Notable Deltas: Chroma Subsampling, Per-Region
Quality, Lossy PNG, SSIM-Based Quality…
If you use one tool: ImageOptim (benchmark)

83. Tip #6: Image Management Service
5 breakpoints * 2 Pixel Ratios * 3 Views *
5 thumbnails * 100,000 Products/Articles…
And tomorrow?
/q75/w120/book.jpg GET /book.jpg
OriginTranscoder
<Big, High Res Img><Right-Sized Img>

84. Image
Compression
Choose The
Right Format
Control Quality
Image
Loading
Use Responsive
Images
Prioritize Critical
Content
Image
Operations
Encode Well
Transcode in Proxy
Enforce a Performance Budget

85. Thank You!
Guy Podjarny
@guypod
Guy Podjarny,
Tobias Baldauf & Mike McCall
High
Performance
Images
SHRINK, LOAD, AND DELIVER IMAGES FOR SPEED
Book Preview
(developer.akamai.com/stuff)