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. In this tutorial we’ll discuss ways that let you 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 - Operationalizing image optimization: different tools and techniques for integrating image optimization on your site Talk given at Velocity Conf EU 2015: http://velocityconf.com/devops-web-performance-eu-2015/public/schedule/detail/45013

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

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

3. @guypod
Images On Average Page
Sep '12 Jun '13 Jun '14 Sep '15
696 KB
891 KB
1,128 KB
1,383 KB
50 Reqs 56 Reqs 55 Reqs 54 Reqs
Requests KB
~2x!!!
Source: HTTP Archive

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

5. @guypod
What Can you do?

6. @guypod
Image Compression

7. @guypod
Image Loading

8. @guypod
Operationalizing
Image Optimization

9. @guypod
Image Compression

10. @guypod
Average Resource
Size
CSS
JS
JPEG
0 10 20 30 40
37 KB
16 KB
9 KB

11. @guypod
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

12. @guypod
Tip #1:
Pick The Right Format

13. @guypod
Image Formats On The Web
Other
2%
GIF
23%
PNG
30%
JPEG
45%

14. @guypod
GIF
• 28 Years Old (1987)
• 256 Colors
• Supports“Simple”
Transparency
• Supports Animation
• Patented (now expired)

15. @guypod
PNG
• 19 Years Old (1996)
• 8-32 bit color palettes
• Alpha Transparency
• Not patented

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

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

18. @guypod
Bitmap
JPEG
Bitmap≠
Bitmap
PNG
Bitmap=
Lossy
Compression
Lossless
Compression

19. @guypod
JPEG
• 23 years old (1992)
• RGB Colors (24 bit)
• No Transparency Support
• A Lossy Format

20. @guypod
PNG -> JPG = MUCH Smaller
PNG, 574 KB JPG, 110 KB

21. @guypod
JPEG: No Transparency
JPEGPNG

22. @guypod
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

23. @guypod
WebP Browser Support

24. @guypod
BPG
• Less than 1 year old
• Lossless & Lossy
• Based on Video encoder HEVC
• H.265, successor of H.264
• Beat WebP & J2K in Mozilla Study
• Free (LGPL)
Fabrice Bellard
(Creator of ffmpeg)

25. @guypod
FLIF
• 0 years old
• Lossless
• Progressive
• Responsive Friendly
• No browser support
• Free (GPL)
Source: FLIF Creators
Jon Sneyers & Harshad RJ

26. @guypod
PNG vs Others
Source: Cloudinary

27. @guypod
New Format Bakeoff
Source: Cloudinary

28. @guypod
FLIF - 3rd Party Stats
Source: Cloudinary

29. @guypod
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+

30. @guypod
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>

31. @guypod
Using Custom Formats
Server Side, Single URL
GET /book.jpg GET /book.jpg
OriginCDN/Cache

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

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

34. @guypod
Tip #1:
Pick The Right Format

35. @guypod
Tip #2:
Control Quality

36. @guypod
JPEG Quality
High
Quality
Low
Quality

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

38. @guypod
Quality: 90
Size: 66 KB
Quality: 75
Size: 37 KB
Quality: 40
Size: 21 KB
Quality: 25
Size: 16 KB

39. @guypod
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

40. @guypod
Detecting Excessive Quality
WebPageTest
• Some stats about image quality on the web?

41. @guypod
Detecting Excessive Quality
PageSpeed Insights
• Some stats about image quality on the web?

42. @guypod
Tip #2:
Control Quality

43. @guypod
SIZEDoesn’t matter
It’s all about
TECHNIQUE

44. @guypod
Image Loading

45. @guypod
Tip #3:
Size Images To Device

46. @guypod
Download & Shrink
102 KB
1876 × 520
(975,520 pixels)

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

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

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

50. @guypod
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

51. @guypod
54
IMAGES
On an Average Page

52. @guypod
– Jen Fitzpatrick, Google Maps
“...25% of new Android phones
have only 512MB of RAM.”

53. @guypod
Download & Shrink
Processing Times
Source: Tim Kadlec, “Mobile Image Processing”

54. @guypod
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">

55. @guypod
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…

56. @guypod
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…

57. @guypod
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>

58. @guypod
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

59. @guypod
Which Breakpoints To Use?
What Are your Users Using?

60. @guypod
Which Breakpoints To Use?
How Big & Complex Are Your Images?
• Your Analytics
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

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

62. @guypod
FLIF Progressive “Breakpoints”

63. @guypod
1969x1307 pixels
299,643 bytes
FLIF Progressive “Breakpoints”

64. @guypod
1969x1307 pixels
All 299,643 bytes
653x985 pixels (1:2)
First 80,389 bytes
FLIF Progressive “Breakpoints”

65. @guypod
1969x1307 pixels
All 299,643 bytes
653x985 pixels (1:2)
First 80,389 bytes
492x326 pixels (1:4)
First 37,014 bytes
FLIF Progressive “Breakpoints”

66. @guypod
Tip #3:
Size Images To Device

67. @guypod
Tip #4:
Prioritize Critical Images

68. @guypod
Below The Fold
Etsy
82%
Velocity
91%
Guardian
92%

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

70. @guypod
Download & Hide

71. @guypod
Download & Hide
img {display: none}

72. @guypod
Download & Hide
Image Requests 79 78
Image Weight 2,258 KB 2,251 KB

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

74. @guypod
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)">

75. @guypod
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)">

76. @guypod
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>

77. @guypod
The Infamous
PRELOADER

78. @guypod
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>

79. @guypod
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>

80. @guypod
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>

81. @guypod
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>

82. @guypod
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>

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

84. @guypod
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

85. @guypod
HTTP/1.1 HTTP/2

86. @guypod
Excess
Images
Pre-Parser
Boost

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

88. @guypod
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)”>

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

90. @guypod
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">

91. @guypod
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==">

92. @guypod
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==">

93. @guypod
Tip #4:
Prioritize Critical
Images

94. @guypod
Operationalizing
Image Optimization

95. @guypod
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)

96. @guypod
Tip #6:
Use Image Management Service
5 breakpoints * 2 Pixel Ratios * 3 Views *
5 thumbnails * 100,000 Products/Articles…
And tomorrow?

97. @guypod
Tip #6:
Use 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>

98. @guypod
Image Manager

99. @guypod
Cloudinary

100. @guypod
What Can You Do?
Enforce a Performance Budget
Image
Compression
Choose The
Right Format
Control Quality
Image
Loading
Use Responsive
Images
Prioritize Critical
Content
Image
Operations
Encode Well
Transcode in Proxy

101. @guypod
FREE Copy at
http://bit.ly/hpi-preview

102. @guypod
Thank You!
Guy Podjarny
@guypod
Reminder Free HPI Link:
http://bit.ly/hpi-preview