velocity conference 2013: a picture costs a thousand words
DESCRIPTION
In this tutorial, Akamai's Guy Podjarny, will review these techniques, and help you identify and implement the techniques that are right for you. We'll share tools that can help implementation, and share data about the results you can expect. Finally, we'll discuss what's next for image optimization, and how you can get involved. Watch the presentation here: Part 1: http://www.youtube.com/watch?v=a3X71PCwPD8 Part 2: http://www.youtube.com/watch?v=zZHP8K2OFjwTRANSCRIPT
©2013 Akamai Faster ForwardTM
A PICTURE COSTS A THOUSAND WORDS
Guy Podjarny (@guypod) CTO, Web Experience, Akamai
©2013 Akamai Faster ForwardTM
YOU HAVE AN IMAGE PROBLEM
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
Images make up 61% of Page Bytes
h"p://h"parchive.org/interes2ng.php#bytesperpage
©2013 Akamai Faster ForwardTM
Images make up 69% of Page Bytes on Mobile
h"p://mobile.h"parchive.org/interes2ng.php#bytesperpage
©2013 Akamai Faster ForwardTM
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
©2013 Akamai Faster ForwardTM
What is there to optimize with images?
- Optimizing image formats
- Optimizing image delivery
- Optimizing image loading process
- Optimizing images for mobile
©2013 Akamai Faster ForwardTM
OPTIMIZING IMAGE FORMATS
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks
©2013 Akamai Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks 2. Split Luminance & Chrominance
Y Cb Cr
©2013 Akamai Faster 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
©2013 Akamai Faster 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)
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=90: 105 KB
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=75: 53 KB
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=40: 30 KB
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=20: 18 KB
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=10: 11 KB
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=5: 7 KB
©2013 Akamai Faster ForwardTM
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
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
JPEG Metadata
120KB Thumbnail
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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…
©2013 Akamai Faster 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
©2013 Akamai Faster 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.
©2013 Akamai Faster 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% …”
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
Retina Images
bg_header_retina.png – 56 KB
bg_header.png – 14KB
1 2
4 3
• Marketing-speak for 2x pixel ratio • 1 CSS pixel = 4 real pixels
• Other ratios are possible (1.5x common) 3X
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
Got Through JPEG!
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
WebP vs PNG
Google: Lossless WebP 26%-‐34% Smaller than PNG
Yoav Weiss: Lossless WebP 33%-‐42% Smaller than PNG
©2013 Akamai Faster ForwardTM
WebP vs JPEG
Google: Lossy WebP 25%-‐ 34% Smaller than JPEG
Yoav Weiss: Lossy WebP 37% Smaller than PNG
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
WebP Encode/Decode Times
©2013 Akamai Faster 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?!
©2013 Akamai Faster 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)
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
Image Format support is complicated…
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
OPTIMIZING IMAGE DELIVERY
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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…
©2013 Akamai Faster ForwardTM
To Shard or not to Shard? 89 Parallel Reqs h"p://wn.com/
-‐ 10 Shards -‐ 8 seconds to download top 22KB image
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
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: im
age/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
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
OPTIMIZING IMAGE LOADING ORDER
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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
©2013 Akamai Faster 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”
©2013 Akamai Faster ForwardTM
RESPONSIVE IMAGES
©2013 Akamai Faster ForwardTM
Download and Shrink
Smaller Screen, Same Size Image
h"p://img.2meinc.net/2me/daily/2013/1305/485_nat_oklahoma_recovery_0523.jpg
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
Simply serve small images to mobile?
©2013 Akamai Faster ForwardTM
Responsive Images over 471 Websites
Tim Kadlec: Why do we need Responsive Images?
72% less image weight
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
Responsive Web Design (RWD) One URL, Adapt to screen size
©2013 Akamai Faster 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
©2013 Akamai Faster 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.
©2013 Akamai Faster 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
©2013 Akamai Faster ForwardTM
Standardizing Responsive Images
@srcset
<picture>
h"ps://github.com/sco"jehl/picturefill
©2013 Akamai Faster ForwardTM
Stay Up To Date: http://responsiveimages.org/
©2013 Akamai Faster ForwardTM
SUMMARY
©2013 Akamai Faster 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…
©2013 Akamai Faster ForwardTM
A PICTURE COSTS A THOUSAND WORDS
Guy Podjarny (@guypod) CTO, Web Experience, Akamai
Thank You! Ques2ons?