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.
@guypod
High Performance
Images
Beautiful shouldn’t mean Slow
@guypod
Average Web Page Weight
(Sep ’15)
Not
37%
Images
63%
Source: HTTP Archive
@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 ...
@guypod
Images Impact
Performance
0
4750
9500
14250
19000
Load Time, 3G Speed
With Images No Images
-30%
@guypod
What Can you do?
@guypod
Image Compression
@guypod
Image Loading
@guypod
Operationalizing 

Image Optimization
@guypod
Image Compression
@guypod
Average Resource
Size
CSS
JS
JPEG
0 10 20 30 40
37 KB
16 KB
9 KB
@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
@guypod
Tip #1: 

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

Compression
Lossless 

Compression
@guypod
JPEG
• 23 years old (1992)
• RGB Colors (24 bit)
• No Transparency Support
• A Lossy Format
@guypod
PNG -> JPG = MUCH Smaller
PNG, 574 KB JPG, 110 KB
@guypod
JPEG: No Transparency
JPEGPNG
@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 ...
@guypod
WebP Browser Support
@guypod
BPG
• Less than 1 year old
• Lossless & Lossy
• Based on Video encoder HEVC
• H.265, successor of H.264
• Beat Web...
@guypod
FLIF
• 0 years old
• Lossless
• Progressive
• Responsive Friendly
• No browser support
• Free (GPL)
Source: FLIF C...
@guypod
PNG vs Others
Source: Cloudinary
@guypod
New Format Bakeoff
Source: Cloudinary
@guypod
FLIF - 3rd Party Stats
Source: Cloudinary
@guypod
New Image Formats
WebP JPEG XR JPEG 2000
Support
Chrome, Opera,

Android 4.x
IE 10+
Safari on

iOS, OS X
Savings

...
@guypod
Using Custom Formats
Client Side
<script src="picturefill.js"></script>
<picture>
<source type="image/webp"
srcset=...
@guypod
Using Custom Formats
Server Side, Single URL
GET /book.jpg GET /book.jpg
OriginCDN/Cache
@guypod
Using Custom Formats
Server Side, Single URL
GET /book.jpg GET /book.jpg
GET /book.jpg
Accept: image/webp
GET /boo...
@guypod
Using Custom Formats
Server Side, Single URL
GET /book.jxr
GET /book.jpg GET /book.jpg
GET /book.webp
GET /book.jp...
@guypod
Tip #1: 

Pick The Right Format
@guypod
Tip #2: 

Control Quality
@guypod
JPEG Quality
High 

Quality
Low 

Quality
@guypod
Quality: 90

Size: 66 KB
Quality: 75

Size: 37 KB
Quality: 40

Size: 21 KB
Quality: 25

Size: 16 KB
@guypod
Quality: 90

Size: 66 KB
Quality: 75

Size: 37 KB
Quality: 40

Size: 21 KB
Quality: 25

Size: 16 KB
@guypod
Quality Scale Is Per Format
Source: Nick Doyle Performance Calendar
Similarity
0.00
0.06
0.13
0.19
0.25
Quality
0 ...
@guypod
Detecting Excessive Quality
WebPageTest
• Some stats about image quality on the web?
@guypod
Detecting Excessive Quality
PageSpeed Insights
• Some stats about image quality on the web?
@guypod
Tip #2: 

Control Quality
@guypod
SIZEDoesn’t matter

It’s all about
TECHNIQUE
@guypod
Image Loading
@guypod
Tip #3: 

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

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

have only 512MB of RAM.”
@guypod
Download & Shrink
Processing Times
Source: Tim Kadlec, “Mobile Image Processing”
@guypod
Implementing Responsive
Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
size...
@guypod
Implementing Responsive
Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
size...
@guypod
Implementing Responsive
Images
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
size...
@guypod
Implementing Responsive
Images
<picture>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<so...
@guypod
Implementing Responsive
Images
<picture>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<so...
@guypod
Which Breakpoints To Use?
What Are your Users Using?
@guypod
Which Breakpoints To Use?
How Big & Complex Are Your Images?
• Your Analytics
Source: Jason Grigsby, 

“Sensible J...
@guypod
Which Breakpoints To Use?
How Big & Complex Are Your Images?
• Your Analytics
point # Width Height File Size
1 320...
@guypod
FLIF Progressive “Breakpoints”
@guypod
1969x1307 pixels
299,643 bytes
FLIF Progressive “Breakpoints”
@guypod
1969x1307 pixels
All 299,643 bytes
653x985 pixels (1:2)
First 80,389 bytes
FLIF Progressive “Breakpoints”
@guypod
1969x1307 pixels
All 299,643 bytes
653x985 pixels (1:2)
First 80,389 bytes
492x326 pixels (1:4)

First 37,014 byte...
@guypod
Tip #3: 

Size Images To Device
@guypod
Tip #4: 

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

onload="loadImage(this)"/>
<img src="bag.jpg" ...
@guypod
HTTP/1.1 HTTP/2
@guypod
Excess

Images
Pre-Parser

Boost
@guypod
Protip #1: LQIP
Low Quality Image Placeholders
<img src=“LowQ.jpg” data-src=“HighQ.jpg” 

onload=“loadImage(this)”>
@guypod
Protip #1: LQIP
Low Quality Image Placeholders
LowQ.jpg
Quality: 25

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

Size: 16 KB
HighQ.jpg
Quality: 90

Size: 66 K...
@guypod
Protip #2:
Selective Lazy Load
<img class="responsive-img"
sizes="(min-width: 980px) 460px, (min-width: 740px) 340...
@guypod
Protip #2:
Selective Lazy Load
<img class="js-lazy-loaded-image responsive-img"
data-srcset="/w-220/<id>/1000.jpg ...
@guypod
Protip #2:
Selective Lazy Load
JS 

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

Prioritize Critical
Images
@guypod
Operationalizing 

Image Optimization
@guypod
Tip #5: Encode Well
• Quality Curve is NOT a Standard
• “Save For Web”is NOT just quality
• Decoding Is Standard, ...
@guypod
Tip #6: 

Use Image Management Service
5 breakpoints * 2 Pixel Ratios * 3 Views *

5 thumbnails * 100,000 Products...
@guypod
Tip #6: 

Use Image Management Service
5 breakpoints * 2 Pixel Ratios * 3 Views *

5 thumbnails * 100,000 Products...
@guypod
Image Manager
@guypod
Cloudinary
@guypod
What Can You Do?
Enforce a Performance Budget
Image
Compression
Choose The 

Right Format
Control Quality
Image 

...
@guypod
FREE Copy at

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

http://bit.ly/hpi-preview
Upcoming SlideShare
Loading in …5
×

High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)

6,111 views

Published on

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

Published in: Technology
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)

  1. 1. @guypod High Performance Images Beautiful shouldn’t mean Slow
  2. 2. @guypod Average Web Page Weight
(Sep ’15) Not 37% Images 63% Source: HTTP Archive
  3. 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. 4. @guypod Images Impact Performance 0 4750 9500 14250 19000 Load Time, 3G Speed With Images No Images -30%
  5. 5. @guypod What Can you do?
  6. 6. @guypod Image Compression
  7. 7. @guypod Image Loading
  8. 8. @guypod Operationalizing 
 Image Optimization
  9. 9. @guypod Image Compression
  10. 10. @guypod Average Resource Size CSS JS JPEG 0 10 20 30 40 37 KB 16 KB 9 KB
  11. 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. 12. @guypod Tip #1: 
 Pick The Right Format
  13. 13. @guypod Image Formats On The Web Other 2% GIF 23% PNG 30% JPEG 45%
  14. 14. @guypod GIF • 28 Years Old (1987) • 256 Colors • Supports“Simple” Transparency • Supports Animation • Patented (now expired)
  15. 15. @guypod PNG • 19 Years Old (1996) • 8-32 bit color palettes • Alpha Transparency • Not patented
  16. 16. @guypod GIF -> PNG = 21% Savings PNG File Size GIF File Size Source: Styoan Stefanov, “Give PNG A Chance” (2009)
  17. 17. @guypod JPEG • 23 years old (1992) • RGB Colors (24 bit) • No Transparency Support • A Lossy Format
  18. 18. @guypod Bitmap JPEG Bitmap≠ Bitmap PNG Bitmap= Lossy 
 Compression Lossless 
 Compression
  19. 19. @guypod JPEG • 23 years old (1992) • RGB Colors (24 bit) • No Transparency Support • A Lossy Format
  20. 20. @guypod PNG -> JPG = MUCH Smaller PNG, 574 KB JPG, 110 KB
  21. 21. @guypod JPEG: No Transparency JPEGPNG
  22. 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. 23. @guypod WebP Browser Support
  24. 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. 25. @guypod FLIF • 0 years old • Lossless • Progressive • Responsive Friendly • No browser support • Free (GPL) Source: FLIF Creators Jon Sneyers & Harshad RJ
  26. 26. @guypod PNG vs Others Source: Cloudinary
  27. 27. @guypod New Format Bakeoff Source: Cloudinary
  28. 28. @guypod FLIF - 3rd Party Stats Source: Cloudinary
  29. 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. 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. 31. @guypod Using Custom Formats Server Side, Single URL GET /book.jpg GET /book.jpg OriginCDN/Cache
  32. 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. 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. 34. @guypod Tip #1: 
 Pick The Right Format
  35. 35. @guypod Tip #2: 
 Control Quality
  36. 36. @guypod JPEG Quality High 
 Quality Low 
 Quality
  37. 37. @guypod Quality: 90
 Size: 66 KB Quality: 75
 Size: 37 KB Quality: 40
 Size: 21 KB Quality: 25
 Size: 16 KB
  38. 38. @guypod Quality: 90
 Size: 66 KB Quality: 75
 Size: 37 KB Quality: 40
 Size: 21 KB Quality: 25
 Size: 16 KB
  39. 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. 40. @guypod Detecting Excessive Quality WebPageTest • Some stats about image quality on the web?
  41. 41. @guypod Detecting Excessive Quality PageSpeed Insights • Some stats about image quality on the web?
  42. 42. @guypod Tip #2: 
 Control Quality
  43. 43. @guypod SIZEDoesn’t matter
 It’s all about TECHNIQUE
  44. 44. @guypod Image Loading
  45. 45. @guypod Tip #3: 
 Size Images To Device
  46. 46. @guypod Download & Shrink 102 KB 1876 × 520
 (975,520 pixels)
  47. 47. @guypod Download & Shrink 866px 240px 1876px 520px .hp07img {width: 100%}
  48. 48. @guypod Download & Shrink 866px 240px 1876px 520px 207,840 pixels 975,520 pixels 79% wasted pixels (~770K)
  49. 49. @guypod Download & Shrink 866px 240px 1876px 520px 35,345 Bytes 110,744 Bytes 79% wasted pixels 68% wasted bytes (~75KB)
  50. 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. 51. @guypod 54 IMAGES On an Average Page
  52. 52. @guypod – Jen Fitzpatrick, Google Maps “...25% of new Android phones 
 have only 512MB of RAM.”
  53. 53. @guypod Download & Shrink Processing Times Source: Tim Kadlec, “Mobile Image Processing”
  54. 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. 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. 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. 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. 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. 59. @guypod Which Breakpoints To Use? What Are your Users Using?
  60. 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. 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. 62. @guypod FLIF Progressive “Breakpoints”
  63. 63. @guypod 1969x1307 pixels 299,643 bytes FLIF Progressive “Breakpoints”
  64. 64. @guypod 1969x1307 pixels All 299,643 bytes 653x985 pixels (1:2) First 80,389 bytes FLIF Progressive “Breakpoints”
  65. 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. 66. @guypod Tip #3: 
 Size Images To Device
  67. 67. @guypod Tip #4: 
 Prioritize Critical Images
  68. 68. @guypod Below The Fold Etsy 82% Velocity 91% Guardian 92%
  69. 69. @guypod Page Content Not Visible 62% Visible 38% On A Typical Page & Desktop Screen… Image Requests Not Visible 80% Visible 20%
  70. 70. @guypod Download & Hide
  71. 71. @guypod Download & Hide img {display: none}
  72. 72. @guypod Download & Hide Image Requests 79 78 Image Weight 2,258 KB 2,251 KB
  73. 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. 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. 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. 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. 77. @guypod The Infamous PRELOADER
  78. 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. 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. 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. 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. 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. 83. @guypod Who Initiates Image Downloads? CSS 20% HTML Parser 37% Pre-parser 43% Source: Ilya Grigorik, HTTP Archive
  84. 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. 85. @guypod HTTP/1.1 HTTP/2
  86. 86. @guypod Excess
 Images Pre-Parser
 Boost
  87. 87. @guypod Protip #1: LQIP Low Quality Image Placeholders <img src=“LowQ.jpg” data-src=“HighQ.jpg” 
 onload=“loadImage(this)”>
  88. 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. 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. 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. 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. 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. 93. @guypod Tip #4: 
 Prioritize Critical Images
  94. 94. @guypod Operationalizing 
 Image Optimization
  95. 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. 96. @guypod Tip #6: 
 Use Image Management Service 5 breakpoints * 2 Pixel Ratios * 3 Views *
 5 thumbnails * 100,000 Products/Articles… And tomorrow?
  97. 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. 98. @guypod Image Manager
  99. 99. @guypod Cloudinary
  100. 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. 101. @guypod FREE Copy at
 http://bit.ly/hpi-preview
  102. 102. @guypod Thank You! Guy Podjarny @guypod Reminder Free HPI Link:
 http://bit.ly/hpi-preview

×