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
![Page 1: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/1.jpg)
©2013 Akamai Faster ForwardTM
A PICTURE COSTS A THOUSAND WORDS
Guy Podjarny (@guypod) CTO, Web Experience, Akamai
![Page 2: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/2.jpg)
©2013 Akamai Faster ForwardTM
YOU HAVE AN IMAGE PROBLEM
![Page 3: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/3.jpg)
©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
![Page 4: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/4.jpg)
©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
![Page 5: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/5.jpg)
©2013 Akamai Faster ForwardTM
Images make up 61% of Page Bytes
h"p://h"parchive.org/interes2ng.php#bytesperpage
![Page 6: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/6.jpg)
©2013 Akamai Faster ForwardTM
Images make up 69% of Page Bytes on Mobile
h"p://mobile.h"parchive.org/interes2ng.php#bytesperpage
![Page 7: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/7.jpg)
©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
![Page 8: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/8.jpg)
©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
![Page 9: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/9.jpg)
©2013 Akamai Faster ForwardTM
OPTIMIZING IMAGE FORMATS
![Page 10: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/10.jpg)
©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
![Page 11: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/11.jpg)
©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
![Page 12: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/12.jpg)
©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
![Page 13: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/13.jpg)
©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
![Page 14: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/14.jpg)
©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
![Page 15: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/15.jpg)
©2013 Akamai Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks
![Page 16: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/16.jpg)
©2013 Akamai Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks 2. Split Luminance & Chrominance
Y Cb Cr
![Page 17: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/17.jpg)
©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
![Page 18: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/18.jpg)
©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)
![Page 19: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/19.jpg)
©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
![Page 20: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/20.jpg)
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=90: 105 KB
![Page 21: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/21.jpg)
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=75: 53 KB
![Page 22: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/22.jpg)
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=40: 30 KB
![Page 23: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/23.jpg)
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=20: 18 KB
![Page 24: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/24.jpg)
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=10: 11 KB
![Page 25: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/25.jpg)
©2013 Akamai Faster ForwardTM
Original PNG: 574 KB JPEG, Q=5: 7 KB
![Page 26: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/26.jpg)
©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
![Page 27: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/27.jpg)
©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
![Page 28: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/28.jpg)
©2013 Akamai Faster ForwardTM
JPEG Metadata
120KB Thumbnail
![Page 29: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/29.jpg)
©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
![Page 30: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/30.jpg)
©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
![Page 31: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/31.jpg)
©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…
![Page 32: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/32.jpg)
©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
![Page 33: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/33.jpg)
©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.
![Page 34: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/34.jpg)
©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% …”
![Page 35: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/35.jpg)
©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
![Page 36: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/36.jpg)
©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
![Page 37: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/37.jpg)
©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
![Page 38: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/38.jpg)
©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
![Page 39: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/39.jpg)
©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
![Page 40: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/40.jpg)
©2013 Akamai Faster ForwardTM
Got Through JPEG!
![Page 41: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/41.jpg)
©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
![Page 42: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/42.jpg)
©2013 Akamai Faster ForwardTM
WebP vs PNG
Google: Lossless WebP 26%-‐34% Smaller than PNG
Yoav Weiss: Lossless WebP 33%-‐42% Smaller than PNG
![Page 43: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/43.jpg)
©2013 Akamai Faster ForwardTM
WebP vs JPEG
Google: Lossy WebP 25%-‐ 34% Smaller than JPEG
Yoav Weiss: Lossy WebP 37% Smaller than PNG
![Page 44: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/44.jpg)
©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
![Page 45: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/45.jpg)
©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
![Page 46: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/46.jpg)
©2013 Akamai Faster ForwardTM
WebP Encode/Decode Times
![Page 47: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/47.jpg)
©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?!
![Page 48: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/48.jpg)
©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)
![Page 49: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/49.jpg)
©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
![Page 50: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/50.jpg)
©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
![Page 51: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/51.jpg)
©2013 Akamai Faster ForwardTM
Image Format support is complicated…
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support
![Page 52: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/52.jpg)
©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
![Page 53: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/53.jpg)
©2013 Akamai Faster ForwardTM
OPTIMIZING IMAGE DELIVERY
![Page 54: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/54.jpg)
©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
![Page 55: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/55.jpg)
©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
![Page 56: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/56.jpg)
©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…
![Page 57: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/57.jpg)
©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
![Page 58: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/58.jpg)
©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
![Page 59: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/59.jpg)
©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?
![Page 60: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/60.jpg)
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/
![Page 61: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/61.jpg)
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"
![Page 62: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/62.jpg)
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/
![Page 63: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/63.jpg)
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
![Page 64: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/64.jpg)
©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
![Page 65: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/65.jpg)
©2013 Akamai Faster ForwardTM
OPTIMIZING IMAGE LOADING ORDER
![Page 66: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/66.jpg)
©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
![Page 67: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/67.jpg)
©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
![Page 68: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/68.jpg)
©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
![Page 69: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/69.jpg)
©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
![Page 70: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/70.jpg)
©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
![Page 71: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/71.jpg)
©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”
![Page 72: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/72.jpg)
©2013 Akamai Faster ForwardTM
RESPONSIVE IMAGES
![Page 73: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/73.jpg)
©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
![Page 74: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/74.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
![Page 75: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/75.jpg)
©2013 Akamai Faster ForwardTM
Simply serve small images to mobile?
![Page 76: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/76.jpg)
©2013 Akamai Faster ForwardTM
Responsive Images over 471 Websites
Tim Kadlec: Why do we need Responsive Images?
72% less image weight
![Page 77: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/77.jpg)
©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
![Page 78: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/78.jpg)
©2013 Akamai Faster ForwardTM
Responsive Web Design (RWD) One URL, Adapt to screen size
![Page 79: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/79.jpg)
©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
![Page 80: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/80.jpg)
©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.
![Page 81: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/81.jpg)
©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
![Page 82: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/82.jpg)
©2013 Akamai Faster ForwardTM
Standardizing Responsive Images
@srcset
<picture>
h"ps://github.com/sco"jehl/picturefill
![Page 83: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/83.jpg)
©2013 Akamai Faster ForwardTM
Stay Up To Date: http://responsiveimages.org/
![Page 84: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/84.jpg)
©2013 Akamai Faster ForwardTM
SUMMARY
![Page 85: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/85.jpg)
©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…
![Page 86: Velocity Conference 2013: A Picture Costs A Thousand Words](https://reader033.vdocument.in/reader033/viewer/2022051609/5474a8e0b4af9fb40a8b5895/html5/thumbnails/86.jpg)
©2013 Akamai Faster ForwardTM
A PICTURE COSTS A THOUSAND WORDS
Guy Podjarny (@guypod) CTO, Web Experience, Akamai
Thank You! Ques2ons?