More Related Content Similar to A Picture Costs A Thousand Words (20) More from Guy Podjarny (20) A Picture Costs A Thousand Words3. ©2013 AkamaiFaster ForwardTM
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
4. ©2013 AkamaiFaster ForwardTM
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
8. ©2013 AkamaiFaster ForwardTM
What is there to optimize with images?
- Optimizing image formats
- Optimizing image delivery
- Optimizing image loading process
- Optimizing images for mobile
10. ©2013 AkamaiFaster ForwardTM
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
11. ©2013 AkamaiFaster ForwardTM
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
12. ©2013 AkamaiFaster ForwardTM
Lossless PNG Compression
- Delta-Filter Encoding
- Write pixels as delta from neighbors
- Compress using LZ77
- Reference past sequences
- Compress using Huffman code
- Identify repeating sequences
- Code popular ones with fewer bytes
=
1,2,3,4,5,
0x20
=
1x25
=
1,2,3,4,5,
(-‐5,5)x5
Up
Delta
LeL
Delta
13. ©2013 AkamaiFaster ForwardTM
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
14. ©2013 AkamaiFaster ForwardTM
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
17. ©2013 AkamaiFaster ForwardTM
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
18. ©2013 AkamaiFaster ForwardTM
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)
19. ©2013 AkamaiFaster ForwardTM
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
27. ©2013 AkamaiFaster ForwardTM
JPEG Optimization
- Control Quality
- 75-85 tops, try to go lower
- Quality level is not a percentage
- Tune Huffman Buffer Size
- Low Adoption: Use Arithmetic Encoding instead of Huffman
- Tools: jpegtran, ImageMagick
0
50
100
150
200
250
300
350
0
20
40
60
80
100
120
Quality
vs
File
Size
29. ©2013 AkamaiFaster ForwardTM
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
30. ©2013 AkamaiFaster ForwardTM
JPEG Baseline vs. Progressive
Baseline
Progressive
h"p://www.bookofspeed.com/chapter5.html
Pro-‐Tip:
Configure
how
blocks
are
“interlaced”
(The
“Coefficient”)
-‐ Controls
minimum
quality
level
-‐ Affects
Size
31. ©2013 AkamaiFaster ForwardTM
Baseline vs Progressive – Visual Progress
Baseline
Progressive
Patrick
Meenan:
“…
Looking
at
the
Speed
Index,
we
saw
median
improvements
of
7%
on
Cable
and
15%
on
DSL
…”
Loading…
32. ©2013 AkamaiFaster ForwardTM
JPEG Baseline vs. Progressive
Baseline
Progressive
h"p://www.bookofspeed.com/chapter5.html
1
2
0
0
1
0
0
0
3
-‐1
0
0
1
2
0
0
1
0
0
0
3
-‐1
0
0
1
1
3
2
0
-‐1
0
0
0
0
0
0
1
1
3
2
0
-‐1
EOB
Mo’
zeros,
Mo’
compression
33. ©2013 AkamaiFaster ForwardTM
Baseline vs Progressive – File Size
Baseline
–
Progressive
Size
for
100,000
JPEGs
Stoyan
Stefanov:
Images
of
size
10K+
likely
smaller
as
Progressive.
Median
delta
is
3%,
Up
to
10%
common,
250KB
gap
extreme.
34. ©2013 AkamaiFaster ForwardTM
Progressive vs Baseline – Current Reality
Ann
Robson:
“…
In
a
thousand-‐image
sample,
92.6%
are
baseline
…”
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%
…”
35. ©2013 AkamaiFaster ForwardTM
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
36. ©2013 AkamaiFaster ForwardTM
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
37. ©2013 AkamaiFaster ForwardTM
Retina Images
bg_header_retina.png – 56 KB
bg_header.png – 14KB
1 2
43
• Marketing-speak for 2x pixel ratio
• 1 CSS pixel = 4 real pixels
• Other ratios are possible (1.5x common)
3X
38. ©2013 AkamaiFaster ForwardTM
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
39. ©2013 AkamaiFaster ForwardTM
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
41. ©2013 AkamaiFaster ForwardTM
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
44. ©2013 AkamaiFaster ForwardTM
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
45. ©2013 AkamaiFaster ForwardTM
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
47. ©2013 AkamaiFaster ForwardTM
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?!
48. ©2013 AkamaiFaster ForwardTM
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)
49. ©2013 AkamaiFaster ForwardTM
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
50. ©2013 AkamaiFaster ForwardTM
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,
19.5
Android
Webkit,
5.4
Opera
Mini,
1
Chrome
Mobile,
0.7
Opera,
0.3
IE
9,
13.2
IE
8,
10.2
IE
10,
9.7
IE
7,
6.2
Other,
0.9
IE,
40.2
52. ©2013 AkamaiFaster ForwardTM
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
54. ©2013 AkamaiFaster ForwardTM
Delivering Static Files – Basics
• Use a cookieless domain
• Usually requires new top level domain
• Cache images with a CDN
• Ideally, use Akamai ;)
• Leverage browser cache
• Cache long term
• Use Versioning
100ms
55. ©2013 AkamaiFaster ForwardTM
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
56. ©2013 AkamaiFaster ForwardTM
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…
58. ©2013 AkamaiFaster ForwardTM
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
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>
<html>
...
<img
src="awesome.jpg">
...
<html>
Cache-‐Control:
private
Or inject a
polyfill library!
Deploying new image formats on the web
+ No extra latency overhead, automated by the server
- Returned HTML should be marked with "Cache-Control: private"
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...
Deploying WebP via Accept negotiation
Accept:
image/webp
Accept:
image/png
+ No extra latency overhead
+ Fully transparent to your existing application!
Only works on
Opera…
(today)
UA Detection on
Images also valid
64. ©2013 AkamaiFaster ForwardTM
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
66. ©2013 AkamaiFaster ForwardTM
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
67. ©2013 AkamaiFaster ForwardTM
Loading Images with Scripts – Core Concept
Warning:
Over Simplified!!!
Full Example Here
-‐ Manual:
-‐ DIY
-‐ jQuery
Plugin
-‐ WP
Plugin
-‐ None
are
great
-‐ Func2onal,
not
fast
-‐ Automated:
-‐ Akamai
FEO
-‐ PageSpeed
-‐ …
Based
on
Y
axis,
somewhat
tricky
68. ©2013 AkamaiFaster ForwardTM
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
69. ©2013 AkamaiFaster ForwardTM
Low Quality Image Placeholders - LQIP
- Load low quality
images first
- Smaller, e.g. 20KB/img
- Wait for page to
complete loading
- Load high quality
image
- Bigger, e.g. 80KB/img
- Doesn’t delay anything
20KB
80KB
70. ©2013 AkamaiFaster ForwardTM
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
71. ©2013 AkamaiFaster ForwardTM
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”
74. ©2013 AkamaiFaster ForwardTM
Responsive Images – Is It Worth it?
128px,
2.9
KB
240px,
6.8
KB
320px,
10.6
KB
480px,
21.3
KB
Full
Res,
50.1
KB
Site:
lonelyplanet.com
Device:
iPhone
4
Before:
867
KB
Acer:
570
KB
77. ©2013 AkamaiFaster ForwardTM
Retina Fun
ipad_hero.jpg
113 KB
Served to iPad 2
ipad_hero_2x.jpg
360 KB
Served to iPad 3
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
79. ©2013 AkamaiFaster ForwardTM
Option #1: Script Loader of Responsive Images
Warning:
Over Simplified!!!
Full Details Here
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
80. ©2013 AkamaiFaster ForwardTM
Option #2: Use CSS for Images
Pros:
-‐ No
need
for
JavaScript
-‐ Non-‐MQ
browsers
load
“default”
image
(IE8…)
Cons:
-‐ Verbose
-‐ Verbose-‐er
with
Re2na
-‐ Not
equal
to
<img>
Warning:
Over Simplified!!!
Full Details Here
Tim
Kadlec:
This
technique
will
double-‐download
on
Android.
There
are
beher
(carefully
craced)
CSS/HTML
structures.
81. ©2013 AkamaiFaster ForwardTM
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
85. ©2013 AkamaiFaster ForwardTM
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…