A Picture Costs A Thousand Words

©2013 AkamaiFaster ForwardTM
A PICTURE COSTS A THOUSAND WORDS
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai

YOU HAVE AN IMAGE PROBLEM

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

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

Images make up 61% of Page Bytes
h"p://h"parchive.org/interes2ng.php#bytesperpage

Images make up 69% of Page Bytes on Mobile
h"p://mobile.h"parchive.org/interes2ng.php#bytesperpage

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

What is there to optimize with images?
-  Optimizing image formats
-  Optimizing image delivery
-  Optimizing image loading process
-  Optimizing images for mobile

OPTIMIZING IMAGE FORMATS

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

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

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

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

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

JPEG Compression - Simplified
1.  Divide image into 8x8 pixel blocks

2.  Split Luminance & Chrominance
Y
Cb
Cr

3.  Write pixels as ~delta from average
•  and round (DCT + Quantization)
Y
Cb
Cr

3.  Write pixels as ~delta from average
and round (DCT + Quantization)
4.  Write as line, compress (Huffman)
=
-‐9,-‐1,0(x62)

3.  Write pixels as delta from average
and round (DCT + Quantization)
4.  Write as line, compress (Huffman)
Q=10
Q=50
Original

Original
PNG:
574
KB
JPEG,
Q=90:
105
KB

Original
PNG:
574
KB
JPEG,
Q=75:
53
KB

Original
PNG:
574
KB
JPEG,
Q=40:
30
KB

Original
PNG:
574
KB
JPEG,
Q=20:
18
KB

Original
PNG:
574
KB
JPEG,
Q=10:
11
KB

Original
PNG:
574
KB
JPEG,
Q=5:
7
KB

Lossy Compression – Not for Everyone
GIF,
11
KB

JPEG,
Q=80,
8
KB

JPEG,
Q=30,
4
KB

Average
Color
not

representa2ve

PNG,
7
KB

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

JPEG Metadata
120KB

Thumbnail

JPEG Optimization
-  Remove Metadata
-  Tools: jpegtran, ImageMagick

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

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…

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

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.

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%
…”

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

Lossless JPEG Optimization
-  Consider (and default to) Progressive over Baseline
-  Tune Progressive Scan coefficients
-  Tools: jpegtran, ImageMagick, jpegrescan

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

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

Lossless JPEG Optimization
-  Consider (and default to) Progressive over Baseline
-  Tune Progressive Scan coefficients
-  Consider Retina Double-Size-Low-Quality Trick
-  Tools: jpegtran, ImageMagick, jpegrescan

Got Through JPEG!

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

WebP vs PNG
Google:

Lossless
WebP
26%-‐34%

Smaller
than
PNG

Yoav
Weiss:

Lossless
WebP
33%-‐42%

Smaller
than
PNG

WebP vs JPEG
Google:

Lossy
WebP

25%-‐

34%
Smaller
than
JPEG

Yoav
Weiss:

Lossy
WebP
37%

Smaller
than
PNG

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

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

WebP Encode/Decode Times

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?!

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)

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

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

Image Format support is complicated…
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support

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

OPTIMIZING IMAGE DELIVERY

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

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

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…

89

Parallel

Reqs
h"p://wn.com/

-‐  10
Shards

-‐  8
seconds
to
download
top
22KB
image

-  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

Delivering WebP
-  To Deliver WebP, we must detect WebP Support
Ilya
Grigorik:

Please
go
ahead!

Me:

Ilya,
can
I
shamelessly

reuse
your
Google
I/O

WebP
Slides?

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>

<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"

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...
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

WebP Delivery & Akamai
Deﬁne
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

OPTIMIZING IMAGE LOADING ORDER

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

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

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

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

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

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”

RESPONSIVE IMAGES

Download and Shrink
Smaller Screen,
Same Size Image
h"p://img.2meinc.net/2me/daily/
2013/1305/485_nat_oklahoma_recovery_0523.jpg

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

Simply serve small images to mobile?

Responsive Images over 471 Websites
Tim
Kadlec:

Why
do
we
need
Responsive
Images?

72%
less
image
weight

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

Responsive Web Design (RWD)
One
URL,
Adapt
to
screen
size

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

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.

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

Standardizing Responsive Images
@srcset
<picture>
h"ps://github.com/sco"jehl/pictureﬁll

Stay Up To Date: http://responsiveimages.org/

SUMMARY

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…

A PICTURE COSTS A THOUSAND WORDS
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
Thank
You!

Ques2ons?

A Picture Costs A Thousand Words

More Related Content

What's hot

Viewers also liked

Similar to A Picture Costs A Thousand Words

More from Guy Podjarny

Recently uploaded

A Picture Costs A Thousand Words