SlideShare a Scribd company logo
1 of 86
Download to read offline
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 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
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
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 ForwardTM

©2013 Akamai
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
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
OPTIMIZING IMAGE FORMATS

Faster ForwardTM

©2013 Akamai
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
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
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
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
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
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	
  

Faster ForwardTM

©2013 Akamai
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
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
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
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	
  Color	
  not	
  
representa2ve	
  
JPEG,	
  Q=30,	
  4	
  KB	
  	
  
Faster ForwardTM

©2013 Akamai
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
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: Use Arithmetic Encoding instead of Huffman
Remove Metadata
Tools: jpegtran, ImageMagick

Faster ForwardTM

©2013 Akamai
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
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
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
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
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
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
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
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
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
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
Got Through JPEG!

Faster ForwardTM

©2013 Akamai
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
WebP vs PNG
Google:	
  
Lossless	
  WebP	
  26%-­‐34%	
  
Smaller	
  than	
  PNG	
  
Yoav	
  Weiss:	
  
Lossless	
  WebP	
  33%-­‐42%	
  
Smaller	
  than	
  PNG	
  

Faster ForwardTM

©2013 Akamai
WebP vs JPEG
Google:	
  
Lossy	
  WebP	
  	
  25%-­‐	
  
34%	
  Smaller	
  than	
  JPEG	
  
Yoav	
  Weiss:	
  
Lossy	
  WebP	
  37%	
  
Smaller	
  than	
  PNG	
  

Faster ForwardTM

©2013 Akamai
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
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
WebP Encode/Decode Times

Faster ForwardTM

©2013 Akamai
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
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
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
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
Image Format support is complicated…

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support
Faster ForwardTM

©2013 Akamai
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
OPTIMIZING IMAGE DELIVERY

Faster ForwardTM

©2013 Akamai
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
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
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
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
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
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
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/
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!
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/
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)
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
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 images
•  Bandwidth Contention
•  May block higher images
•  Connection Contention
•  Likely not seen by most users

Faster ForwardTM

©2013 Akamai
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
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
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
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
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
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_0523.jpg	
  

Faster ForwardTM

©2013 Akamai
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
Simply serve small images to mobile?

Faster ForwardTM

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

72%	
  less	
  image	
  weight	
  

Faster ForwardTM

©2013 Akamai
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
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	
  
	
  
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
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
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
Standardizing Responsive Images

@srcset

<picture>

Faster ForwardTM

h"ps://github.com/sco"jehl/picturefill	
  
©2013 Akamai
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 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
Thank	
  You!	
  	
  
Ques2ons?	
  
A PICTURE COSTS A THOUSAND WORDS

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

Faster ForwardTM

©2013 Akamai

More Related Content

Similar to Velocity Conference 2013: A Picture Costs A Thousand Words

Web graphics vector & roaster101
Web graphics  vector & roaster101Web graphics  vector & roaster101
Web graphics vector & roaster101
nageswaran987
 
Preparing images for the Web
Preparing images for the WebPreparing images for the Web
Preparing images for the Web
sdireland
 

Similar to Velocity Conference 2013: A Picture Costs A Thousand Words (20)

We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
 
Jpack presentation
Jpack presentationJpack presentation
Jpack presentation
 
Web graphics vector & roaster101
Web graphics  vector & roaster101Web graphics  vector & roaster101
Web graphics vector & roaster101
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
 
Preparing images for the Web
Preparing images for the WebPreparing images for the Web
Preparing images for the Web
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
 
The high resolution web
The high resolution webThe high resolution web
The high resolution web
 
Website Optimization
Website OptimizationWebsite Optimization
Website Optimization
 
Altitude London 2018: A hands-on tour of Image Optimisation workshop
Altitude London 2018: A hands-on tour of Image Optimisation workshopAltitude London 2018: A hands-on tour of Image Optimisation workshop
Altitude London 2018: A hands-on tour of Image Optimisation workshop
 
File types pro forma
File types pro formaFile types pro forma
File types pro forma
 
A little journey into website optimization
A little journey into website optimizationA little journey into website optimization
A little journey into website optimization
 
Image optimization and you
Image optimization and youImage optimization and you
Image optimization and you
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
 
Project presentation image compression by manish myst, ssgbcoet
Project presentation image compression by manish myst, ssgbcoetProject presentation image compression by manish myst, ssgbcoet
Project presentation image compression by manish myst, ssgbcoet
 
Jm file types pro forma
Jm file types pro formaJm file types pro forma
Jm file types pro forma
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
 
Image Optimization for The Web
Image Optimization for The WebImage Optimization for The Web
Image Optimization for The Web
 

More from Akamai Technologies

More from Akamai Technologies (20)

Akamai Intelligent Edge Security
Akamai Intelligent Edge SecurityAkamai Intelligent Edge Security
Akamai Intelligent Edge Security
 
Replacing recovery with resilience
Replacing recovery with resilienceReplacing recovery with resilience
Replacing recovery with resilience
 
Competitive EDGE - Data Driven Differentiation
Competitive EDGE - Data Driven DifferentiationCompetitive EDGE - Data Driven Differentiation
Competitive EDGE - Data Driven Differentiation
 
3 Reasons You Need Proactive Protection Against Malware
3 Reasons You Need Proactive Protection Against Malware3 Reasons You Need Proactive Protection Against Malware
3 Reasons You Need Proactive Protection Against Malware
 
3 Reasons It's Time for a New Remote Access Model
3 Reasons It's Time for a New Remote Access Model3 Reasons It's Time for a New Remote Access Model
3 Reasons It's Time for a New Remote Access Model
 
새로운 원격 접속 모델이 필요한 3가지 이유
새로운 원격 접속 모델이 필요한 3가지 이유새로운 원격 접속 모델이 필요한 3가지 이유
새로운 원격 접속 모델이 필요한 3가지 이유
 
更新遠端存取模式的 3 大理由
更新遠端存取模式的 3 大理由更新遠端存取模式的 3 大理由
更新遠端存取模式的 3 大理由
 
应该采用全新远程访问模式的 3 大原因
应该采用全新远程访问模式的 3 大原因应该采用全新远程访问模式的 3 大原因
应该采用全新远程访问模式的 3 大原因
 
3 つの理由 今こそ新しいリモート・アク セス・モデルを採用すべきと き
3 つの理由 今こそ新しいリモート・アク セス・モデルを採用すべきと き3 つの理由 今こそ新しいリモート・アク セス・モデルを採用すべきと き
3 つの理由 今こそ新しいリモート・アク セス・モデルを採用すべきと き
 
3 razões chegou a hora de um novo modelo de acesso remoto
3 razões chegou a hora de um novo modelo de acesso remoto3 razões chegou a hora de um novo modelo de acesso remoto
3 razões chegou a hora de um novo modelo de acesso remoto
 
3 motivi per cui è necessario un nuovo modello di accesso remoto
3 motivi per cui è necessario un nuovo modello di accesso remoto3 motivi per cui è necessario un nuovo modello di accesso remoto
3 motivi per cui è necessario un nuovo modello di accesso remoto
 
3 raisons de changer votre modèle d'accès à distance
3 raisons de changer votre modèle d'accès à distance3 raisons de changer votre modèle d'accès à distance
3 raisons de changer votre modèle d'accès à distance
 
3 motivos por los que ahora es el momento perfecto para adoptar un nuevo mode...
3 motivos por los que ahora es el momento perfecto para adoptar un nuevo mode...3 motivos por los que ahora es el momento perfecto para adoptar un nuevo mode...
3 motivos por los que ahora es el momento perfecto para adoptar un nuevo mode...
 
3 Gründe für eine neue Art des Remotezugriffs
3 Gründe für eine neue Art des Remotezugriffs3 Gründe für eine neue Art des Remotezugriffs
3 Gründe für eine neue Art des Remotezugriffs
 
Chicago Tech Day Jan 2015: Foundry - HTTP2
Chicago Tech Day Jan 2015: Foundry - HTTP2Chicago Tech Day Jan 2015: Foundry - HTTP2
Chicago Tech Day Jan 2015: Foundry - HTTP2
 
Chicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWDChicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWD
 
Chicago Tech Day Jan 2015: Hidden Features
Chicago Tech Day Jan 2015: Hidden FeaturesChicago Tech Day Jan 2015: Hidden Features
Chicago Tech Day Jan 2015: Hidden Features
 
Customer Technology Day Chicago 2015
Customer Technology Day Chicago 2015Customer Technology Day Chicago 2015
Customer Technology Day Chicago 2015
 
Edge 2014: Maintaining the Balance: Getting the Most of Your CDN with IKEA
Edge 2014: Maintaining the Balance: Getting the Most of Your CDN with IKEAEdge 2014: Maintaining the Balance: Getting the Most of Your CDN with IKEA
Edge 2014: Maintaining the Balance: Getting the Most of Your CDN with IKEA
 
Edge 2014: Increasing Control with Property Manager with eBay
Edge 2014: Increasing Control with Property Manager with eBayEdge 2014: Increasing Control with Property Manager with eBay
Edge 2014: Increasing Control with Property Manager with eBay
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

Velocity Conference 2013: A Picture Costs A Thousand Words

  • 1. A PICTURE COSTS A THOUSAND WORDS Guy Podjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai
  • 2. YOU HAVE AN IMAGE PROBLEM Faster ForwardTM ©2013 Akamai
  • 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. 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. Images make up 61% of Page Bytes h"p://h"parchive.org/interes2ng.php#bytesperpage     Faster ForwardTM ©2013 Akamai
  • 6. Images make up 69% of Page Bytes on Mobile h"p://mobile.h"parchive.org/interes2ng.php#bytesperpage     Faster ForwardTM ©2013 Akamai
  • 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. 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. OPTIMIZING IMAGE FORMATS Faster ForwardTM ©2013 Akamai
  • 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. 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. 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. 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. 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. JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks Faster ForwardTM ©2013 Akamai
  • 16. JPEG Compression - Simplified 1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance Y   Cb   Cr   Faster ForwardTM ©2013 Akamai
  • 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. 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. 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. Original  PNG:  574  KB   JPEG,  Q=90:  105  KB   Faster ForwardTM ©2013 Akamai
  • 21. Original  PNG:  574  KB   JPEG,  Q=75:  53  KB   Faster ForwardTM ©2013 Akamai
  • 22. Original  PNG:  574  KB   JPEG,  Q=40:  30  KB   Faster ForwardTM ©2013 Akamai
  • 23. Original  PNG:  574  KB   JPEG,  Q=20:  18  KB   Faster ForwardTM ©2013 Akamai
  • 24. Original  PNG:  574  KB   JPEG,  Q=10:  11  KB   Faster ForwardTM ©2013 Akamai
  • 25. Original  PNG:  574  KB   JPEG,  Q=5:  7  KB   Faster ForwardTM ©2013 Akamai
  • 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. 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. JPEG Metadata 120KB   Thumbnail   Faster ForwardTM ©2013 Akamai
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Got Through JPEG! Faster ForwardTM ©2013 Akamai
  • 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. 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. WebP vs JPEG Google:   Lossy  WebP    25%-­‐   34%  Smaller  than  JPEG   Yoav  Weiss:   Lossy  WebP  37%   Smaller  than  PNG   Faster ForwardTM ©2013 Akamai
  • 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. 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. WebP Encode/Decode Times Faster ForwardTM ©2013 Akamai
  • 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. 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. 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. 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. Image Format support is complicated… http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support Faster ForwardTM ©2013 Akamai
  • 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. OPTIMIZING IMAGE DELIVERY Faster ForwardTM ©2013 Akamai
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. OPTIMIZING IMAGE LOADING ORDER Faster ForwardTM ©2013 Akamai
  • 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. 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. 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. 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. 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. 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
  • 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. 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. Simply serve small images to mobile? Faster ForwardTM ©2013 Akamai
  • 76. Responsive Images over 471 Websites Tim  Kadlec:     Why  do  we  need  Responsive  Images?     72%  less  image  weight   Faster ForwardTM ©2013 Akamai
  • 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. Responsive Web Design (RWD) One  URL,  Adapt  to  screen  size   Faster ForwardTM ©2013 Akamai
  • 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. 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. 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. Standardizing Responsive Images @srcset <picture> Faster ForwardTM h"ps://github.com/sco"jehl/picturefill   ©2013 Akamai
  • 83. Stay Up To Date: http://responsiveimages.org/ Faster ForwardTM ©2013 Akamai
  • 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. Thank  You!     Ques2ons?   A PICTURE COSTS A THOUSAND WORDS Guy Podjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai