Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
High Performance Images
Beautiful shouldn’t mean Slow
Guy Podjarny @guypod
Average Web Page Weight

(June ’15)
Not
37%
Images
63%
Source: HTTP Archive
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
Req...
Images Impact Performance
0
4750
9500
14250
19000
Load Time, 3G Speed
With Images No Images
-30%
What Can you do?
Image
Compression
Choose The 

Right Format
Control Quality
Image 

Loading
Use Responsive
Images
Priorit...
What Can you do?
Image
Compression
Choose The 

Right Format
Control Quality
Image 

Loading
Use Responsive
Images
Priorit...
Image Compression
Average Resource Size
CSS
JS
JPEG
0 10 20 30 40
34 KB
16 KB
9 KB
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
Tip #1: 

Pick The Right Format
Image Formats On The Web
Other
2%
GIF
23%
PNG
29%
JPEG
46%
GIF
28 Years Old (1987)
256 Colors
Supports “Simple”
Transparency
Supports Animation
PNG
19 Years Old (1996)
8-32 bit color palettes
Alpha Transparency
Non-patented
Credit: Wikimedia
GIF -> PNG = 21% Savings
PNG File Size GIF File Size
Source: Styoan Stefanov, “Give PNG A Chance” (2009)
JPEG
23 years old (1992)
RGB Colors (24 bit)
No Transparency Support
A Lossy Format
Bitmap
JPEG
Bitmap≠
Bitmap
PNG
Bitmap=
Lossy 

Compression
Lossless 

Compression
JPEG
23 years old (1992)
RGB Colors (24 bit)
No Transparency Support
A Lossy Format
PNG -> JPG = MUCH Smaller
PNG, 574 KB JPG, 110 KB
JPEG: No Transparency
JPEGPNG
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.4...
WebP Browser Support
New Image Formats
WebP JPEG XR JPEG 2000
Support
Chrome, Opera,

Android 4.x
IE 10+
Safari on

iOS, OS X
Savings

(over JP...
Using Custom Formats
Client Side
<script src="picturefill.js"></script>
<picture>
<source type="image/webp"
srcset="book.we...
Using Custom Formats
Server Side, Single URL
GET /book.jpg GET /book.jpg
OriginCDN/Cache
Using Custom Formats
Server Side, Single URL
GET /book.jpg GET /book.jpg
GET /book.jpg
Accept: image/webp
GET /book.webp
O...
Using Custom Formats
Server Side, Single URL
GET /book.jxr
GET /book.jpg GET /book.jpg
GET /book.jpg
Accept: image/webp
GE...
Tip #1: 

Pick The Right Format
Tip #2: 

Control Quality
JPEG Quality
High 

Quality
Low 

Quality
Quality: 90

Size: 66 KB
Quality: 75

Size: 37 KB
Quality: 40

Size: 21 KB
Quality: 25

Size: 16 KB
Quality: 90

Size: 66 KB
Quality: 75

Size: 37 KB
Quality: 40

Size: 21 KB
Quality: 25

Size: 16 KB
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...
Detecting Excessive Quality
WebPageTest
Detecting Excessive Quality
PageSpeed Insights
Tip #2: 

Control Quality
SIZEDoesn’t matter

It’s all about
TECHNIQUE
Tip #3: 

Size Images To Device
Download & Shrink
102 KB
1876 × 520

(975,520 pixels)
Download & Shrink
866px
240px
1876px
520px
.hp07img {width: 100%}
Download & Shrink
866px
240px
1876px
520px
207,840 pixels
975,520 pixels
79% wasted pixels
(~770K)
Download & Shrink
866px
240px
1876px
520px
35,345 Bytes
110,744 Bytes
79% wasted pixels
68% wasted bytes
(~75KB)
Download & Shrink
866px
240px
1876px
520px
79% wasted pixels
68% wasted bytes
79% wasted memory
(3MB)
831K Mem Bytes
975,5...
55
IMAGES
On an Average Page
“...25% of new Android phones 

have only 512MB of RAM.”
–Jen Fitzpatrick VP of product management for Google Maps
Download & Shrink
Processing Times
Source: Tim Kadlec, “Mobile Image Processing”
Implementing Responsive Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-...
Implementing Responsive Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-...
Implementing Responsive Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-...
Implementing Responsive Images
<picture>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<source src...
Implementing Responsive Images
<picture>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<source src...
Which Breakpoints To Use?
What Are your Users Using?
Which Breakpoints To Use?
How Big & Complex Are Your Images?
Source: Jason Grigsby, “Sensible Jumps In Responsive Image Fi...
Which Breakpoints To Use?
How Big & Complex Are Your Images?
Source: Jason Grigsby, “Sensible Jumps In Responsive Image Fi...
Tip #3: 

Size Images To Device
Tip #4: 

Prioritize Critical Images
Below The Fold
Etsy
82%
Velocity
91%
Guardian
92%
Page Content
Not Visible
62%
Visible
38%
On A Typical Page & Desktop Screen…
Image Requests
Not Visible
80%
Visible
20%
Download & Hide
Download & Hide
img {display: none}
Download & Hide
Image Requests 79 78
Image Weight 2,258 KB 2,251 KB
Lazy Load Images
<img src="book.jpg" alt="A Book">
<img src="1px.gif" data-src="book.jpg"
alt="A Book" onload="loadImage(t...
Lazy Load Images
<script>
function loadImage(img) {
var dataSrc = imgs[i].getAttribute("data-src");
	 if (dataSrc && isAbo...
Lazy Load Images
<script>
function loadImage(img) {
var dataSrc = imgs[i].getAttribute("data-src");
	 if (dataSrc && isAbo...
Defer Load Images
<script>
function loadImage(img, force) {
var dataSrc = imgs[i].getAttribute("data-src");
	 if (dataSrc ...
The Infamous
PRELOADER
HTML Parser
<html>
<head>
<script src="main.js"></script>
<link src="styles.css" type="text/css">
</head>
<body>
<img src=...
HTML Parser
main.js
styles.css
book.jpg
bag.jpg
7
<html>
<head>
<script src="main.js"></script>
<link src="styles.css" typ...
HTML Parser & Pre-parser
main.js
styles.css
book.jpg
bag.jpg
<html>
<head>
<script src="main.js"></script>
<link src="styl...
HTML Parser & Pre-parser
main.js
styles.css
book.jpg
bag.jpg
<html>
<head>
<script src="main.js"></script>
<link src="styl...
HTML Parser & Pre-parser
main.js
styles.css
book.jpg
bag.jpg
11
<html>
<head>
<script src="main.js"></script>
<link src="s...
Who Initiates Image Downloads?
CSS
20%
HTML Parser
37%
Pre-parser
43%
Source: Ilya Grigorik, HTTP Archive
HTML Parser & Pre-parser
…
<img src="1px.gif" data-src=“book.jpg" 

onload="loadImage(this)"/>
<img src="bag.jpg" data-src...
Excess

Images
Pre-Parser

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

Size: 16 KB
<img src=“LowQ.jpg” data-src=”HighQ.jpg”
...
Protip #1: LQIP
Low Quality Image Placeholders
LowQ.jpg
Quality: 25

Size: 16 KB
<img src=“LowQ.jpg” data-src=”HighQ.jpg”
...
Protip #2:
Selective Lazy Load
<img class="responsive-img"
sizes="(min-width: 980px) 460px, (min-width: 740px) 340px, 100%...
Protip #2:
Selective Lazy Load
<img class="js-lazy-loaded-image responsive-img"
data-srcset="/w-220/<id>/1000.jpg 220w,
/w...
Protip #2:
Selective Lazy Load
JS 

Disabled
<img class="js-lazy-loaded-image responsive-img"
data-srcset="/w-220/<id>/100...
Tip #4: 

Prioritize Critical Images
Image Operations
Tip #5: Encode Well
Quality Curve is NOT a Standard
“Save For Web” is NOT just quality
Decoding Is Standard, Encoding Is N...
Tip #6: Image Management Service
5 breakpoints * 2 Pixel Ratios * 3 Views *

5 thumbnails * 100,000 Products/Articles…
And...
Image
Compression
Choose The 

Right Format
Control Quality
Image 

Loading
Use Responsive
Images
Prioritize Critical
Cont...
Thank You!
Guy Podjarny

@guypod
Guy Podjarny,
Tobias Baldauf & Mike McCall
High
Performance
Images
SHRINK, LOAD, AND DELI...
Upcoming SlideShare
Loading in …5
×

High Performance Images: Beautiful Shouldn't Mean Slow

3,307 views

Published on

(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.

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

High Performance Images: Beautiful Shouldn't Mean Slow

  1. 1. High Performance Images Beautiful shouldn’t mean Slow Guy Podjarny @guypod
  2. 2. Average Web Page Weight
 (June ’15) Not 37% Images 63% Source: HTTP Archive
  3. 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. 4. Images Impact Performance 0 4750 9500 14250 19000 Load Time, 3G Speed With Images No Images -30%
  5. 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. 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. 7. Image Compression
  8. 8. Average Resource Size CSS JS JPEG 0 10 20 30 40 34 KB 16 KB 9 KB
  9. 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. 10. Tip #1: 
 Pick The Right Format
  11. 11. Image Formats On The Web Other 2% GIF 23% PNG 29% JPEG 46%
  12. 12. GIF 28 Years Old (1987) 256 Colors Supports “Simple” Transparency Supports Animation
  13. 13. PNG 19 Years Old (1996) 8-32 bit color palettes Alpha Transparency Non-patented Credit: Wikimedia
  14. 14. GIF -> PNG = 21% Savings PNG File Size GIF File Size Source: Styoan Stefanov, “Give PNG A Chance” (2009)
  15. 15. JPEG 23 years old (1992) RGB Colors (24 bit) No Transparency Support A Lossy Format
  16. 16. Bitmap JPEG Bitmap≠ Bitmap PNG Bitmap= Lossy 
 Compression Lossless 
 Compression
  17. 17. JPEG 23 years old (1992) RGB Colors (24 bit) No Transparency Support A Lossy Format
  18. 18. PNG -> JPG = MUCH Smaller PNG, 574 KB JPG, 110 KB
  19. 19. JPEG: No Transparency JPEGPNG
  20. 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. 21. WebP Browser Support
  22. 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. 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. 24. Using Custom Formats Server Side, Single URL GET /book.jpg GET /book.jpg OriginCDN/Cache
  25. 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. 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. 27. Tip #1: 
 Pick The Right Format
  28. 28. Tip #2: 
 Control Quality
  29. 29. JPEG Quality High 
 Quality Low 
 Quality
  30. 30. Quality: 90
 Size: 66 KB Quality: 75
 Size: 37 KB Quality: 40
 Size: 21 KB Quality: 25
 Size: 16 KB
  31. 31. Quality: 90
 Size: 66 KB Quality: 75
 Size: 37 KB Quality: 40
 Size: 21 KB Quality: 25
 Size: 16 KB
  32. 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. 33. Detecting Excessive Quality WebPageTest
  34. 34. Detecting Excessive Quality PageSpeed Insights
  35. 35. Tip #2: 
 Control Quality
  36. 36. SIZEDoesn’t matter
 It’s all about TECHNIQUE
  37. 37. Tip #3: 
 Size Images To Device
  38. 38. Download & Shrink 102 KB 1876 × 520
 (975,520 pixels)
  39. 39. Download & Shrink 866px 240px 1876px 520px .hp07img {width: 100%}
  40. 40. Download & Shrink 866px 240px 1876px 520px 207,840 pixels 975,520 pixels 79% wasted pixels (~770K)
  41. 41. Download & Shrink 866px 240px 1876px 520px 35,345 Bytes 110,744 Bytes 79% wasted pixels 68% wasted bytes (~75KB)
  42. 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. 43. 55 IMAGES On an Average Page
  44. 44. “...25% of new Android phones 
 have only 512MB of RAM.” –Jen Fitzpatrick VP of product management for Google Maps
  45. 45. Download & Shrink Processing Times Source: Tim Kadlec, “Mobile Image Processing”
  46. 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. 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. 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. 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. 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. 51. Which Breakpoints To Use? What Are your Users Using?
  52. 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. 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. 54. Tip #3: 
 Size Images To Device
  55. 55. Tip #4: 
 Prioritize Critical Images
  56. 56. Below The Fold Etsy 82% Velocity 91% Guardian 92%
  57. 57. Page Content Not Visible 62% Visible 38% On A Typical Page & Desktop Screen… Image Requests Not Visible 80% Visible 20%
  58. 58. Download & Hide
  59. 59. Download & Hide img {display: none}
  60. 60. Download & Hide Image Requests 79 78 Image Weight 2,258 KB 2,251 KB
  61. 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. 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. 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. 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. 65. The Infamous PRELOADER
  66. 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. 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. 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. 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. 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. 71. Who Initiates Image Downloads? CSS 20% HTML Parser 37% Pre-parser 43% Source: Ilya Grigorik, HTTP Archive
  72. 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. 73. Excess
 Images Pre-Parser
 Boost
  74. 74. Protip #1: LQIP Low Quality Image Placeholders <img src=“LowQ.jpg” data-src=”HighQ.jpg” onload=“loadImage(this)”/>
  75. 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. 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. 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. 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. 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. 80. Tip #4: 
 Prioritize Critical Images
  81. 81. Image Operations
  82. 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. 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. 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. 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)

×