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.
A PICTURE COSTS A THOUSAND WORDS

Guy Podjarny (@guypod)
CTO, Web Experience, Akamai

Faster ForwardTM

©2013 Akamai
YOU HAVE AN IMAGE PROBLEM

Faster ForwardTM

©2013 Akamai
The Good (Performance-wise)
-  Images are pre-compressed
-  No need to gzip them, can’t forget to do so

-  Images don’t b...
The Bad (Performance-wise)
- 
- 
- 
- 
- 
- 

Images contend (with other resources) for bandwidth
Images contend for CPU/G...
Images make up 61% of Page Bytes

h"p://h"parchive.org/interes2ng.php#bytesperpage	
  	
  
Faster ForwardTM

©2013 Akamai
Images make up 69% of Page Bytes on Mobile

h"p://mobile.h"parchive.org/interes2ng.php#bytesperpage	
  	
  
Faster Forward...
Image Bytes grew 19% in past 8 months

h"p://h"parchive.org/trends.php?s=All&minlabel=Oct+1+2012&maxlabel=May+15+2013#byte...
What is there to optimize with images?

-  Optimizing image formats
-  Optimizing image delivery
-  Optimizing image loadi...
OPTIMIZING IMAGE FORMATS

Faster ForwardTM

©2013 Akamai
GIF – Graphics Interchange Format
-  26 Years Old (1987)
-  256 Colors
-  “Simple” Transparency
-  No partial (Alpha) tran...
PNG – Portable Network Graphics
-  17 Years Old (1996)
-  Supports 8-32 bit color palettes
-  PNG8 and PNG24 Most Common

...
Lossless PNG Compression
-  Delta-Filter Encoding

=	
  1,2,3,4,5,	
  
	
  	
  	
  (-­‐5,5)x5	
  	
  

-  Write pixels as ...
Lossless PNG Optimization
-  Delta Filter Optimization
-  Per row, choose comparison target: None, Left, Up, Average, Paet...
JPEG – Joint Photographic Experts Group
-  21 years old (1992)
-  Supports RGB Colors (24 bit)
-  Supports custom color pa...
JPEG Compression - Simplified
1.  Divide image into 8x8 pixel blocks

Faster ForwardTM

©2013 Akamai
JPEG Compression - Simplified
1.  Divide image into 8x8 pixel blocks
2.  Split Luminance & Chrominance

Y	
  

Cb	
  

Cr	...
JPEG Compression - Simplified
1.  Divide image into 8x8 pixel blocks
2.  Split Luminance & Chrominance
3.  Write pixels as...
JPEG Compression - Simplified
1.  Divide image into 8x8 pixel blocks
2.  Split Luminance & Chrominance
3.  Write pixels as...
JPEG Compression - Simplified
1.  Divide image into 8x8 pixel blocks
2.  Split Luminance & Chrominance
3.  Write pixels as...
Original	
  PNG:	
  574	
  KB	
  

JPEG,	
  Q=90:	
  105	
  KB	
  

Faster ForwardTM

©2013 Akamai
Original	
  PNG:	
  574	
  KB	
  

JPEG,	
  Q=75:	
  53	
  KB	
  

Faster ForwardTM

©2013 Akamai
Original	
  PNG:	
  574	
  KB	
  

JPEG,	
  Q=40:	
  30	
  KB	
  

Faster ForwardTM

©2013 Akamai
Original	
  PNG:	
  574	
  KB	
  

JPEG,	
  Q=20:	
  18	
  KB	
  

Faster ForwardTM

©2013 Akamai
Original	
  PNG:	
  574	
  KB	
  

JPEG,	
  Q=10:	
  11	
  KB	
  

Faster ForwardTM

©2013 Akamai
Original	
  PNG:	
  574	
  KB	
  

JPEG,	
  Q=5:	
  7	
  KB	
  

Faster ForwardTM

©2013 Akamai
Lossy Compression – Not for Everyone

PNG,	
  7	
  KB	
  

GIF,	
  11	
  KB	
  

JPEG,	
  Q=80,	
  8	
  KB	
  	
  
Average...
Quality	
  vs	
  File	
  Size	
  

JPEG Optimization

350	
  
300	
  

-  Control Quality

250	
  

-  75-85 tops, try to ...
JPEG Metadata
120KB	
  

Thumbnail	
  

Faster ForwardTM

©2013 Akamai
JPEG Optimization
-  Control Quality
-  75-85 tops, try to go lower

- 
- 
- 
- 

Tune Huffman Buffer Size
Low Adoption: U...
JPEG Baseline vs. Progressive

Baseline	
  

Pro-­‐Tip:	
  Configure	
  how	
  blocks	
  are	
  
“interlaced”	
  (The	
  “C...
Baseline vs Progressive – Visual Progress
Baseline	
  

Loading…	
  
Progressive	
  

Patrick	
  Meenan:	
  
“…	
  Looking...
JPEG Baseline vs. Progressive
1	
   2	
  

1	
   0	
  

3	
   -­‐1	
  

0	
   0	
  

0	
   0	
  

0	
   0	
  

1	
  

0	
 ...
Baseline vs Progressive – File Size
Stoyan	
  Stefanov:	
  	
  
Images	
  of	
  size	
  10K+	
  
likely	
  smaller	
  as	
...
Progressive vs Baseline – Current Reality
Patrick	
  Meenan:	
  “…	
  I	
  crawled	
  all	
  7	
  million	
  JPEG	
  image...
Progressive PNG & GIF
-  GIF & PNG Have “Interlacing” modes
-  Similar “Progressive” effect

-  Fixed at 4 (GIF) or 7 (PNG...
Lossless JPEG Optimization
-  Control Quality
-  75-85 tops, try to go lower

- 
- 
- 
- 
- 
- 

Tune Huffman Buffer Size
...
Retina Images
•  Marketing-speak for 2x pixel ratio
•  1 CSS pixel = 4 real pixels

3X	
  

•  Other ratios are possible (...
JPEG Retina Trick: Double the Size, Lower Quality
-  Retina images are HEAVY (often ~3x file size)
-  Regular images are “...
Lossless JPEG Optimization
-  Control Quality
-  75-85 tops, try to go lower

- 
- 
- 
- 
- 
- 
- 

Tune Huffman Buffer Si...
Got Through JPEG!

Faster ForwardTM

©2013 Akamai
WebP – Web Picture?
- 
- 
- 
- 

2 Years Old (2011)
Pronounced “Weppy”
Supports Lossless & Lossy Modes
Very well documente...
WebP vs PNG
Google:	
  
Lossless	
  WebP	
  26%-­‐34%	
  
Smaller	
  than	
  PNG	
  
Yoav	
  Weiss:	
  
Lossless	
  WebP	
...
WebP vs JPEG
Google:	
  
Lossy	
  WebP	
  	
  25%-­‐	
  
34%	
  Smaller	
  than	
  JPEG	
  
Yoav	
  Weiss:	
  
Lossy	
  We...
WebP’s Magic Formula Highlights
-  Spatial Predictive Encoding
-  Choose best next step “guess”

-  Arithmetic Entropy Enc...
WebP’s Magic Formula Highlights
-  Spatial Predictive Encoding
-  Choose best next step “guess”

-  Arithmetic Entropy Enc...
WebP Encode/Decode Times

Faster ForwardTM

©2013 Akamai
WebP – Impressed Yet?
- 
- 
- 
- 
- 

26% - 42% Smaller than PNG
25% - 37% Smaller than JPEG
Supports Alpha Transparency
S...
VERY Limited Browser Support
Supported by:
-  Chrome 9+
-  Android 4+
-  Opera 12+
-  Opera Mobile 11.1+
~26% WebP Client ...
JPEGXR vs WebP
-  4 Years Old (2009)
-  JPEG eXtended Range
-  JPEG XR / JXR

-  ~Matches WebP sizes
-  Support: IE 9+
-  ...
WebP + JPEG XR Coverage
Supported by:
-  IE 9+
-  Chrome 9+
-  Android 4+
-  Opera 12+
-  Opera Mobile 11.1+
WebP –or– JPE...
Image Format support is complicated…

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_su...
When to use which format?
-  For tiny images (e.g. 1x1 pixel) use GIF
-  PNG-8 practically always smaller

-  For most sma...
OPTIMIZING IMAGE DELIVERY

Faster ForwardTM

©2013 Akamai
Delivering Static Files – Basics
•  Use a cookieless domain
•  Usually requires new top level domain

•  Cache images with...
To Shard or not to Shard?
h"p://worlddomina2onsummit.com/	
  

5.5s:	
  Start	
  
Images	
  
Download	
  

17s:	
  End	
  ...
Domain Sharding
-  Split images across domain “aliases” (1.foo.com, 2.foo.com…)
-  Tricks browser into opening more connec...
89	
  
Parallel	
  
Reqs	
  

To Shard or not to Shard?
h"p://wn.com/	
  

-­‐  10	
  Shards	
  
-­‐  8	
  seconds	
  to	
...
To Shard or not to Shard?
-  It Depends… On your site.
-  Excessive Sharding is bad
-  You NEVER need 10 shards

-  No Sha...
Delivering WebP
-  To Deliver WebP, we must detect WebP Support
Me:	
  
Ilya,	
  can	
  I	
  shamelessly	
  
reuse	
  your...
Client-side detection
•  Use modernizr, or use the 1 line WebP detect function...
	
  	
  	
  	
  	
  	
  	
  <script	
  s...
Server-side User-Agent detection
Serve different HTML based on User-Agent header
<html>	
  
	
  ...	
  
	
  <img	
  src="a...
Dealing with interoperability ...

• 
• 

Link sharing: send a link to a .webp image to a friend running IE ... sad face.
...
Client-Server Accept negotiation
Serve different Image based on Accept header...

UA Detection on
Images also valid

bp	
 ...
WebP Delivery & Akamai
Define	
  paths	
  that	
  may	
  
return	
  WebP	
  Images	
  
Accept	
  Header	
  Nego2a2on	
  
(U...
OPTIMIZING IMAGE LOADING ORDER

Faster ForwardTM

©2013 Akamai
Lazy Loading Images
•  Most Images are
“below the fold”
•  Below-the-fold images:
•  Must Delay Onload
•  May delay higher...
Loading Images with Scripts – Core Concept

-­‐  Manual:	
  
-­‐  DIY	
  
-­‐  jQuery	
  Plugin	
  
-­‐  WP	
  Plugin	
  
...
Speculative Parsing & Scripted Image Loader
-  Speculative Parser doesn’t “see” the image
-  Image tag only created when s...
Low Quality Image Placeholders - LQIP
20KB	
  

-  Load low quality
images first
-  Smaller, e.g. 20KB/img

-  Wait for pa...
LQIP Pros & Cons
-  Pros
-  Smaller images loaded quickly, page more visually complete & usable
-  Images seen and optimiz...
Proposal: IMG defer/lazy
-  Format: <img src=“a.jpg” defer> (or “lazy”)
-  Images with “defer”:
-  Must not be downloaded ...
RESPONSIVE IMAGES

Faster ForwardTM

©2013 Akamai
Download and Shrink

Smaller Screen,
Same Size Image
h"p://img.2meinc.net/2me/daily/
2013/1305/485_nat_oklahoma_recovery_0...
Responsive Images – Is It Worth it?

320px,	
  10.6	
  KB	
  

240px,	
  6.8	
  KB	
  

128px,	
  	
  
2.9	
  KB	
  

480p...
Simply serve small images to mobile?

Faster ForwardTM

©2013 Akamai
Responsive Images over 471 Websites
Tim	
  Kadlec:	
  	
  
Why	
  do	
  we	
  need	
  Responsive	
  Images?	
  	
  

72%	
...
Retina Fun

Mozilla/5.0	
  (iPad;	
  CPU	
  OS	
  6_0	
  like	
  Mac	
  OS	
  X)	
  AppleWebKit/536.26	
  
(KHTML,	
  like...
Responsive Web Design (RWD)

One	
  URL,	
  Adapt	
  to	
  screen	
  size	
  

Faster ForwardTM

©2013 Akamai
Option #1: Script Loader of Responsive Images

Pros:	
  
-­‐  Flexible	
  
-­‐  Can	
  mix	
  with	
  lazy	
  loading	
  
...
Option #2: Use CSS for Images
Warning:
Over Simplified!!!
Full Details Here

Pros:	
  
-­‐  No	
  need	
  for	
  JavaScrip...
Option #3: Use SVG
Pros:
-  Rich Vector Graphics Format
-  Always “perfectly” painted

-  Supports media queries!
Cons:
- ...
Standardizing Responsive Images

@srcset

<picture>

Faster ForwardTM

h"ps://github.com/sco"jehl/picturefill	
  
©2013 Aka...
Stay Up To Date: http://responsiveimages.org/

Faster ForwardTM

©2013 Akamai
SUMMARY

Faster ForwardTM

©2013 Akamai
Summary
-  Images are not as simple as they seem…
-  Optimizing images is worth your while!
-  Choose the right image form...
Thank	
  You!	
  	
  
Ques2ons?	
  
A PICTURE COSTS A THOUSAND WORDS

Guy Podjarny (@guypod)
CTO, Web Experience, Akamai

...
Upcoming SlideShare
Loading in …5
×

Velocity Conference 2013: A Picture Costs A Thousand Words

2,662 views

Published on

In this tutorial, Akamai's Guy Podjarny, will review these techniques, and help you identify and implement the techniques that are right for you. We'll share tools that can help implementation, and share data about the results you can expect. Finally, we'll discuss what's next for image optimization, and how you can get involved.

Watch the presentation here:
Part 1: http://www.youtube.com/watch?v=a3X71PCwPD8
Part 2: http://www.youtube.com/watch?v=zZHP8K2OFjw

Published in: Technology, Art & Photos
  • Be the first to comment

Velocity Conference 2013: A Picture Costs A Thousand Words

  1. 1. A PICTURE COSTS A THOUSAND WORDS Guy Podjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai
  2. 2. YOU HAVE AN IMAGE PROBLEM Faster ForwardTM ©2013 Akamai
  3. 3. The Good (Performance-wise) -  Images are pre-compressed -  No need to gzip them, can’t forget to do so -  Images don’t block rendering -  Images don’t block downloading other resources -  Including other images -  Images don’t modify the DOM -  Images are often rendered by the GPU -  Images are STATIC Faster ForwardTM ©2013 Akamai
  4. 4. The Bad (Performance-wise) -  -  -  -  -  -  Images contend (with other resources) for bandwidth Images contend for CPU/GPU Images contend for TCP connections Images are visually significant on a page Pages contain A LOT OF images Images are HEAVY Faster ForwardTM ©2013 Akamai
  5. 5. Images make up 61% of Page Bytes h"p://h"parchive.org/interes2ng.php#bytesperpage     Faster ForwardTM ©2013 Akamai
  6. 6. Images make up 69% of Page Bytes on Mobile h"p://mobile.h"parchive.org/interes2ng.php#bytesperpage     Faster ForwardTM ©2013 Akamai
  7. 7. Image Bytes grew 19% in past 8 months h"p://h"parchive.org/trends.php?s=All&minlabel=Oct+1+2012&maxlabel=May+15+2013#bytesImg&reqImg Faster ForwardTM     ©2013 Akamai
  8. 8. What is there to optimize with images? -  Optimizing image formats -  Optimizing image delivery -  Optimizing image loading process -  Optimizing images for mobile Faster ForwardTM ©2013 Akamai
  9. 9. OPTIMIZING IMAGE FORMATS Faster ForwardTM ©2013 Akamai
  10. 10. GIF – Graphics Interchange Format -  26 Years Old (1987) -  256 Colors -  “Simple” Transparency -  No partial (Alpha) transparency -  Supported Everywhere -  Supports Animation -  Previously Patented -  Patents expired by now Faster ForwardTM ©2013 Akamai
  11. 11. PNG – Portable Network Graphics -  17 Years Old (1996) -  Supports 8-32 bit color palettes -  PNG8 and PNG24 Most Common -  Supports Alpha Transparency -  Good browser support -  Certain issues in IE 6-8 -  Non-patented -  Supports Animation (MNG)! -  No browser support Faster ForwardTM ©2013 Akamai
  12. 12. Lossless PNG Compression -  Delta-Filter Encoding =  1,2,3,4,5,        (-­‐5,5)x5     -  Write pixels as delta from neighbors Up  Delta   -  Compress using LZ77 -  Reference past sequences =  1,2,3,4,5,        0x20     -  Compress using Huffman code -  Identify repeating sequences -  Code popular ones with fewer bytes Faster ForwardTM LeL  Delta   =  1x25   ©2013 Akamai
  13. 13. Lossless PNG Optimization -  Delta Filter Optimization -  Per row, choose comparison target: None, Left, Up, Average, Paeth -  Convert from PNG 24 -> 8 -  Possibly using multiple PNG 8 layers -  -  -  -  Tune LZ77 distance/length parameters Tune Huffman buffer size Trade “Alpha” transparency with simple (100%) transparency PNG Optimization Tools: PNGCrush, OptiPNG Faster ForwardTM ©2013 Akamai
  14. 14. JPEG – Joint Photographic Experts Group -  21 years old (1992) -  Supports RGB Colors (24 bit) -  Supports custom color palettes -  No Transparency Support -  Doable with HTML5 Canvas Hacks -  No Animation Support -  Not impressed… -  It’s a Lossy Format Faster ForwardTM ©2013 Akamai
  15. 15. JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks Faster ForwardTM ©2013 Akamai
  16. 16. JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance Y   Cb   Cr   Faster ForwardTM ©2013 Akamai
  17. 17. JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as ~delta from average •  and round (DCT + Quantization) Y   Cb   Cr   Faster ForwardTM ©2013 Akamai
  18. 18. JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as ~delta from average and round (DCT + Quantization) 4.  Write as line, compress (Huffman) =  -­‐9,-­‐1,0(x62)   Faster ForwardTM ©2013 Akamai
  19. 19. JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as delta from average and round (DCT + Quantization) 4.  Write as line, compress (Huffman) Q=10   Q=50   Original   Faster ForwardTM ©2013 Akamai
  20. 20. Original  PNG:  574  KB   JPEG,  Q=90:  105  KB   Faster ForwardTM ©2013 Akamai
  21. 21. Original  PNG:  574  KB   JPEG,  Q=75:  53  KB   Faster ForwardTM ©2013 Akamai
  22. 22. Original  PNG:  574  KB   JPEG,  Q=40:  30  KB   Faster ForwardTM ©2013 Akamai
  23. 23. Original  PNG:  574  KB   JPEG,  Q=20:  18  KB   Faster ForwardTM ©2013 Akamai
  24. 24. Original  PNG:  574  KB   JPEG,  Q=10:  11  KB   Faster ForwardTM ©2013 Akamai
  25. 25. Original  PNG:  574  KB   JPEG,  Q=5:  7  KB   Faster ForwardTM ©2013 Akamai
  26. 26. Lossy Compression – Not for Everyone PNG,  7  KB   GIF,  11  KB   JPEG,  Q=80,  8  KB     Average  Color  not   representa2ve   JPEG,  Q=30,  4  KB     Faster ForwardTM ©2013 Akamai
  27. 27. Quality  vs  File  Size   JPEG Optimization 350   300   -  Control Quality 250   -  75-85 tops, try to go lower -  Quality level is not a percentage 200   150   100   50   0   -  Tune Huffman Buffer Size 0   20   40   60   80   100   120   -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Tools: jpegtran, ImageMagick Faster ForwardTM ©2013 Akamai
  28. 28. JPEG Metadata 120KB   Thumbnail   Faster ForwardTM ©2013 Akamai
  29. 29. JPEG Optimization -  Control Quality -  75-85 tops, try to go lower -  -  -  -  Tune Huffman Buffer Size Low Adoption: Use Arithmetic Encoding instead of Huffman Remove Metadata Tools: jpegtran, ImageMagick Faster ForwardTM ©2013 Akamai
  30. 30. JPEG Baseline vs. Progressive Baseline   Pro-­‐Tip:  Configure  how  blocks  are   “interlaced”  (The  “Coefficient”)   -­‐  Controls  minimum  quality  level   -­‐  Affects  Size   Progressive   h"p://www.bookofspeed.com/chapter5.html     Faster ForwardTM ©2013 Akamai
  31. 31. Baseline vs Progressive – Visual Progress Baseline   Loading…   Progressive   Patrick  Meenan:   “…  Looking  at  the   Speed  Index,  we  saw   median  improvements   of  7%  on  Cable  and   15%  on  DSL  …”   Faster ForwardTM ©2013 Akamai
  32. 32. JPEG Baseline vs. Progressive 1   2   1   0   3   -­‐1   0   0   0   0   0   0   1   0   0   1   0   0   0   3   -­‐1   0   0   1   Baseline   2   1   3   2   0   -­‐1   0   0   0   0   0   0   Mo’  zeros,  Mo’  compression   1   1   3   2   0   -­‐1   EOB   Progressive   h"p://www.bookofspeed.com/chapter5.html     Faster ForwardTM ©2013 Akamai
  33. 33. Baseline vs Progressive – File Size Stoyan  Stefanov:     Images  of  size  10K+   likely  smaller  as   Progressive.     Median  delta  is  3%,   Up  to  10%  common,   250KB  gap  extreme.   Baseline  –  Progressive  Size  for  100,000  JPEGs   Faster ForwardTM ©2013 Akamai
  34. 34. Progressive vs Baseline – Current Reality Patrick  Meenan:  “…  I  crawled  all  7  million  JPEG  images   that  were  served  by  the  top  300k  websites  in  the  May  1st   HTTP  Archive  crawl  and  came  out  with....wait  for  it....  s_ll   only  7%  …”   Ann  Robson:   “…  In  a  thousand-­‐image   sample,  92.6%  are   baseline  …”   Faster ForwardTM ©2013 Akamai
  35. 35. Progressive PNG & GIF -  GIF & PNG Have “Interlacing” modes -  Similar “Progressive” effect -  Fixed at 4 (GIF) or 7 (PNG) interlacing levels -  PNG’s technique, Adam7, a bit more sophisticated -  Progressive PNG/GIF are BIGGER -  Interlacing interferes with compression algorithms -  Files often 20%-30% bigger -  Still benefit from earlier visual -  So consider for bigger images h"p://www.codinghorror.com/blog/   2005/12/progressive-­‐image-­‐rendering.html     Faster ForwardTM ©2013 Akamai
  36. 36. Lossless JPEG Optimization -  Control Quality -  75-85 tops, try to go lower -  -  -  -  -  -  Tune Huffman Buffer Size Low Adoption: Use Arithmetic Encoding instead of Huffman Remove Metadata Consider (and default to) Progressive over Baseline Tune Progressive Scan coefficients Tools: jpegtran, ImageMagick, jpegrescan Faster ForwardTM ©2013 Akamai
  37. 37. Retina Images •  Marketing-speak for 2x pixel ratio •  1 CSS pixel = 4 real pixels 3X   •  Other ratios are possible (1.5x common) bg_header_retina.png – 56 KB 1 2 3 4 bg_header.png – 14KB Faster ForwardTM ©2013 Akamai
  38. 38. JPEG Retina Trick: Double the Size, Lower Quality -  Retina images are HEAVY (often ~3x file size) -  Regular images are “fuzzy” on Retina -  Alternative: Double image size, Aggressively reduce Quality -  Discovered by Netvlies & Thomas Fuchs, popularized by Filament Group -  Works on 1x-1.5x too -  Maintain HTML size! -  Sharper Image, Smaller File -  Known Downside: Higher Memory Use Faster ForwardTM ©2013 Akamai
  39. 39. Lossless JPEG Optimization -  Control Quality -  75-85 tops, try to go lower -  -  -  -  -  -  -  Tune Huffman Buffer Size Low Adoption: Use Arithmetic Encoding instead of Huffman Remove Metadata Consider (and default to) Progressive over Baseline Tune Progressive Scan coefficients Consider Retina Double-Size-Low-Quality Trick Tools: jpegtran, ImageMagick, jpegrescan Faster ForwardTM ©2013 Akamai
  40. 40. Got Through JPEG! Faster ForwardTM ©2013 Akamai
  41. 41. WebP – Web Picture? -  -  -  -  2 Years Old (2011) Pronounced “Weppy” Supports Lossless & Lossy Modes Very well documented -  See: https://developers.google.com/speed/webp/ -  Related VP8 Google Patents “released” by Google -  Other patents licensed by Patent for global use -  Nokia still claiming related Patents Faster ForwardTM ©2013 Akamai
  42. 42. WebP vs PNG Google:   Lossless  WebP  26%-­‐34%   Smaller  than  PNG   Yoav  Weiss:   Lossless  WebP  33%-­‐42%   Smaller  than  PNG   Faster ForwardTM ©2013 Akamai
  43. 43. WebP vs JPEG Google:   Lossy  WebP    25%-­‐   34%  Smaller  than  JPEG   Yoav  Weiss:   Lossy  WebP  37%   Smaller  than  PNG   Faster ForwardTM ©2013 Akamai
  44. 44. WebP’s Magic Formula Highlights -  Spatial Predictive Encoding -  Choose best next step “guess” -  Arithmetic Entropy Encoder -  Better than Huffman Code -  Adaptive Block Quantization -  Per-region quality setting Faster ForwardTM ©2013 Akamai
  45. 45. WebP’s Magic Formula Highlights -  Spatial Predictive Encoding -  Choose best next step “guess” -  Arithmetic Entropy Encoder -  Better than Huffman Code -  Adaptive Block Quantization -  Per-region quality setting -  Color Cache Coding -  Update color palette over time -  Optimization built into encoder Faster ForwardTM ©2013 Akamai
  46. 46. WebP Encode/Decode Times Faster ForwardTM ©2013 Akamai
  47. 47. WebP – Impressed Yet? -  -  -  -  -  26% - 42% Smaller than PNG 25% - 37% Smaller than JPEG Supports Alpha Transparency Supports Animation! Why did waste time talking about the other formats?! Faster ForwardTM ©2013 Akamai
  48. 48. VERY Limited Browser Support Supported by: -  Chrome 9+ -  Android 4+ -  Opera 12+ -  Opera Mobile 11.1+ ~26% WebP Client Support (35% by some numbers) Ilya  Grigorik:   Deploying  new  image   formats  on  the  Web  is   HARD  (but  doable)   Faster ForwardTM ©2013 Akamai
  49. 49. JPEGXR vs WebP -  4 Years Old (2009) -  JPEG eXtended Range -  JPEG XR / JXR -  ~Matches WebP sizes -  Support: IE 9+ -  Including Windows Phone 8 -  Patented by Microsoft -  Under “Open Spec Promise” -  Jxrlib has BSD License Faster ForwardTM ©2013 Akamai
  50. 50. WebP + JPEG XR Coverage Supported by: -  IE 9+ -  Chrome 9+ -  Android 4+ -  Opera 12+ -  Opera Mobile 11.1+ WebP –or– JPEG XR Supported on ~ 50% of clients Chrome   Opera  Mini,  1   Mobile,  0.7   Android   Opera,  0.3   Webkit,  5.4   IE  8,  10.2   IE,  40.2   Chrome,   19.5   Faster ForwardTM IE  9,  13.2   IE  10,  9.7   IE  7,   6.2   Other,  0.9   ©2013 Akamai
  51. 51. Image Format support is complicated… http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support Faster ForwardTM ©2013 Akamai
  52. 52. When to use which format? -  For tiny images (e.g. 1x1 pixel) use GIF -  PNG-8 practically always smaller -  For most small images, use PNG -  Where possible, prefer JPEG to PNG -  Use WebP/JPEGXR where possible -  Serve only to supporting clients -  For Animation, use GIF -  Always optimize your images Faster ForwardTM ©2013 Akamai
  53. 53. OPTIMIZING IMAGE DELIVERY Faster ForwardTM ©2013 Akamai
  54. 54. Delivering Static Files – Basics •  Use a cookieless domain •  Usually requires new top level domain •  Cache images with a CDN •  Ideally, use Akamai ;) s   100m •  Leverage browser cache •  Cache long term •  Use Versioning Faster ForwardTM ©2013 Akamai
  55. 55. To Shard or not to Shard? h"p://worlddomina2onsummit.com/   5.5s:  Start   Images   Download   17s:  End     Images   Download   -­‐  11.5  secs,  ~750  images,  1.8  MB   -­‐  Most  of  the  2me  “Green”  (TTFB)   -­‐  Queued  across  6  connec2ons   Faster ForwardTM ©2013 Akamai
  56. 56. Domain Sharding -  Split images across domain “aliases” (1.foo.com, 2.foo.com…) -  Tricks browser into opening more connections -  Cons: DNS queries, can cause network congestion, router overload risk, hinders SPDY/HTTP2… Faster ForwardTM ©2013 Akamai
  57. 57. 89   Parallel   Reqs   To Shard or not to Shard? h"p://wn.com/   -­‐  10  Shards   -­‐  8  seconds  to  download  top  22KB  image   Faster ForwardTM ©2013 Akamai
  58. 58. To Shard or not to Shard? -  It Depends… On your site. -  Excessive Sharding is bad -  You NEVER need 10 shards -  No Sharding is often bad -  Plus hinders “cookieless domain” optimization -  Good default is 2 shards -  Measure your own site -  Keep Bandwidth Contention in mind Faster ForwardTM ©2013 Akamai
  59. 59. Delivering WebP -  To Deliver WebP, we must detect WebP Support Me:   Ilya,  can  I  shamelessly   reuse  your  Google  I/O   WebP  Slides?   Ilya  Grigorik:   Please  go  ahead!   Faster ForwardTM ©2013 Akamai
  60. 60. Client-side detection •  Use modernizr, or use the 1 line WebP detect function...              <script  src="modernizr.min.js"></script>                  <script>                    if  (Modernizr.webp)  {                        var  webpImg  =  document.createElement("img");   webpImg.setAttribute('src',  '/awesome.webp');   webpImg.setAttribute('alt',  'na');   document.body.appendChild(webpImg);                      }  else  {                        //  Fallback  to  non-­‐webp,  or  load  a  JS  decoder:                          //  webpjs-­‐0.0.2.min.js  /  webpjs-­‐0.0.2.swf                      }                </script>   + Bullet proof, custom URLs for .webp files (cache friendly), easy fallback for all clients - Must wait for JS execution to schedule image downloads http://webpjs.appspot.com/
  61. 61. Server-side User-Agent detection Serve different HTML based on User-Agent header <html>    ...    <img  src="awesome.webp">    ...   <html>   Cache-­‐Control:  private   <html>    ...    <img  src="awesome.jpg">    ...   <html>   + No extra latency overhead, automated by the server - Returned HTML should be marked with "Cache-Control: private" Deploying new image formats on the web Or inject a polyfill library!
  62. 62. Dealing with interoperability ... •  •  Link sharing: send a link to a .webp image to a friend running IE ... sad face. Save As: save .webp file locally; no way to open it? o  Fixed: Chrome is now a file handler for .webp! o  Provide an explicit 'Download' option, and link to JPEG / PNG. http://news.cnet.com/8301-1023_3-57580664-93/facebook-tries-googles-webp-image-format-users-squawk/
  63. 63. Client-Server Accept negotiation Serve different Image based on Accept header... UA Detection on Images also valid bp   e/we imag pt:   Acce Acce pt:   imag e/pn g   + No extra latency overhead + Fully transparent to your existing application! Deploying WebP via Accept negotiation Only works on Opera… (today)
  64. 64. WebP Delivery & Akamai Define  paths  that  may   return  WebP  Images   Accept  Header  Nego2a2on   (UA  Matching  Just  as  Easy)   (Near)  Future:  Use  Device  Characteris2c   Changes  path  to  /webp/images/…   (also  updates  cache  key)   Mark  downstream  cache     as  private   Faster ForwardTM ©2013 Akamai
  65. 65. OPTIMIZING IMAGE LOADING ORDER Faster ForwardTM ©2013 Akamai
  66. 66. Lazy Loading Images •  Most Images are “below the fold” •  Below-the-fold images: •  Must Delay Onload •  May delay higher images •  Bandwidth Contention •  May block higher images •  Connection Contention •  Likely not seen by most users Faster ForwardTM ©2013 Akamai
  67. 67. Loading Images with Scripts – Core Concept -­‐  Manual:   -­‐  DIY   -­‐  jQuery  Plugin   -­‐  WP  Plugin   -­‐  None  are  great   -­‐  Func2onal,  not  fast   -­‐  Automated:   -­‐  Akamai  FEO   -­‐  PageSpeed   -­‐  …   Based  on  Y  axis,   somewhat  tricky   Warning: Over Simplified!!! Full Example Here Faster ForwardTM ©2013 Akamai
  68. 68. Speculative Parsing & Scripted Image Loader -  Speculative Parser doesn’t “see” the image -  Image tag only created when script actually executes -  Implication #1: No predictive DNS prefetch & TCP connects -  Implication #2: No early download -  On most websites, images are blocked by CSS & Scripts anyway -  Implication #3: In SPDY case, no early request -  When SPDY is used, images are far less likely to be blocked -  My Experience: Still worth doing -  Costs are low compared to gains Faster ForwardTM ©2013 Akamai
  69. 69. Low Quality Image Placeholders - LQIP 20KB   -  Load low quality images first -  Smaller, e.g. 20KB/img -  Wait for page to complete loading -  Load high quality image 80KB   -  Bigger, e.g. 80KB/img -  Doesn’t delay anything Faster ForwardTM ©2013 Akamai
  70. 70. LQIP Pros & Cons -  Pros -  Smaller images loaded quickly, page more visually complete & usable -  Images seen and optimized by speculative parser -  Can control if/when to download higher quality images -  Cons -  Page downloads more bytes overall -  Lower quality image loaded -  Can be combined with Lazy Loading -  Spares initial downloading of below-the-fold images Faster ForwardTM ©2013 Akamai
  71. 71. Proposal: IMG defer/lazy -  Format: <img src=“a.jpg” defer> (or “lazy”) -  Images with “defer”: -  Must not be downloaded if hidden (display:none) -  Must not delay the load event -  Must download if they’re in the page and not hidden -  Implied: May be deferred to onload or loaded on demand -  Note: To determine if hidden, parsers need to wait for CSS -  Means speculative parsing is more limited -  Details still tbd… -  “Waiting for implementor interest” Faster ForwardTM ©2013 Akamai
  72. 72. RESPONSIVE IMAGES Faster ForwardTM ©2013 Akamai
  73. 73. Download and Shrink Smaller Screen, Same Size Image h"p://img.2meinc.net/2me/daily/ 2013/1305/485_nat_oklahoma_recovery_0523.jpg   Faster ForwardTM ©2013 Akamai
  74. 74. Responsive Images – Is It Worth it? 320px,  10.6  KB   240px,  6.8  KB   128px,     2.9  KB   480px,  21.3  KB   Site:   lonelyplanet.com   Device:   iPhone  4   Before:     867  KB   Acer:     570  KB   Full  Res,  50.1  KB   Faster ForwardTM ©2013 Akamai
  75. 75. Simply serve small images to mobile? Faster ForwardTM ©2013 Akamai
  76. 76. Responsive Images over 471 Websites Tim  Kadlec:     Why  do  we  need  Responsive  Images?     72%  less  image  weight   Faster ForwardTM ©2013 Akamai
  77. 77. Retina Fun Mozilla/5.0  (iPad;  CPU  OS  6_0  like  Mac  OS  X)  AppleWebKit/536.26   (KHTML,  like  Gecko)  Version/6.0  Mobile/10A5355d  Safari/8536.25   ipad_hero.jpg 113 KB Served to iPad 2 ipad_hero_2x.jpg 360 KB Served to iPad 3 Faster ForwardTM ©2013 Akamai
  78. 78. Responsive Web Design (RWD) One  URL,  Adapt  to  screen  size   Faster ForwardTM ©2013 Akamai
  79. 79. Option #1: Script Loader of Responsive Images Pros:   -­‐  Flexible   -­‐  Can  mix  with  lazy  loading     Cons:   -­‐  Hinders  pre-­‐parser   -­‐  May  be  slow  to  load     Combine  with  LQIP?   -­‐  Always  load  low  res   -­‐  Lazy-­‐load  high  res   +  “?”  +  window.innerWidth   Warning: Over Simplified!!! Full Details Here Faster ForwardTM ©2013 Akamai
  80. 80. Option #2: Use CSS for Images Warning: Over Simplified!!! Full Details Here Pros:   -­‐  No  need  for  JavaScript   -­‐  Non-­‐MQ  browsers  load   “default”  image  (IE8…)   Cons:   -­‐  Verbose   -­‐  Verbose-­‐er  with  Re2na   -­‐  Not  equal  to  <img>   Tim  Kadlec:     This  technique  will  double-­‐download  on  Android.   There  are  beher  (carefully  craced)  CSS/HTML  structures.   Faster ForwardTM ©2013 Akamai
  81. 81. Option #3: Use SVG Pros: -  Rich Vector Graphics Format -  Always “perfectly” painted -  Supports media queries! Cons: -  Textual, no “smart” compression -  Can be gzipped, but often bigger -  Not supported by older browsers -  IE 8 & older, Android 2.3 & older Faster ForwardTM ©2013 Akamai
  82. 82. Standardizing Responsive Images @srcset <picture> Faster ForwardTM h"ps://github.com/sco"jehl/picturefill   ©2013 Akamai
  83. 83. Stay Up To Date: http://responsiveimages.org/ Faster ForwardTM ©2013 Akamai
  84. 84. SUMMARY Faster ForwardTM ©2013 Akamai
  85. 85. Summary -  Images are not as simple as they seem… -  Optimizing images is worth your while! -  Choose the right image format and optimize your images -  Optimize Image Delivery (CDN, caching, sharding…) -  Leverage WebP/JPEG-XR, but do so with care -  Use LQIP and/or lazy loading of images -  Use Responsive Images -  Sit back and reap the rewards… Faster ForwardTM ©2013 Akamai
  86. 86. Thank  You!     Ques2ons?   A PICTURE COSTS A THOUSAND WORDS Guy Podjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai

×