More Related Content Similar to Velocity Conference 2013: A Picture Costs A Thousand Words (20) More from Akamai Technologies (20) Velocity Conference 2013: A Picture Costs A Thousand Words1. 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
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
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
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
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
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
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
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
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
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
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