Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Faster ForwardTM
PUTTING YOUR IMAGES ON A DIET
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
Everything you wanted to...
Faster ForwardTM
We have an image problem…
Images appear simple
Images seem friendly
Images look like they can’t hurt
But ...
Faster ForwardTM
Images make up 63-66% of Page Bytes
17%
3%
5%
9%
3%
1054,
63%
Desktop Bytes
Scripts CSS Flash Other HTML ...
Faster ForwardTM
Image Byte Increase over last 3 years
It’s not more images,
It’s BIGGER images
2.2x more Image Bytes in 3...
Faster ForwardTM
What is there to optimize with images?
- Today’s focus: Image Compression
- Optimizing image formats & en...
Faster ForwardTM
LET’S START AT THE BEGINNING…
Faster ForwardTM
GIF – Graphics Interchange Format
- 27 Years Old (1987)
- 256 Colors
- “Simple” Transparency
- No partial...
Faster ForwardTM
PNG – Portable Network Graphics
- 18 Years Old (1996)
- Supports 8-32 bit color palettes
- PNG8 and PNG24...
Faster ForwardTM
Lossless PNG Compression
- Delta-Filter Encoding
- Write pixels as delta from neighbors
- Compress using ...
Faster ForwardTM
Lossless PNG Optimization
- Delta Filter Optimization
- Per row, choose comparison target: None, Left, Up...
Faster ForwardTM
JPEG – Joint Photographic Experts Group
- 22 years old (1992)
- Supports RGB Colors (24 bit)
- Supports c...
Faster ForwardTM
JPEG Dominates Page Bytes, But PNG Is Growing
17%
25%
Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks
Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks
2. Split Luminance & Chrominance
Y Cb...
Faster ForwardTM
YCbCr (YUV) Visualization – Grand Tetons
Source:
IE Blog
Faster ForwardTM
Chroma Subsampling
- Chroma diffs are less noticeable
- Subsampling “merges” adjacent pixels
- Most popul...
Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks
2. Split Luminance & Chrominance
3. C...
Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks
2. Split Luminance & Chrominance
3. C...
Faster ForwardTM
JPEG Compression - Simplified
1. Divide image into 8x8 pixel blocks
2. Split Luminance & Chrominance
3. C...
Faster ForwardTM
Original PNG: 574 KB JPEG, Q=90: 105 KB
Faster ForwardTM
Original PNG: 574 KB JPEG, Q=75: 53 KB
Faster ForwardTM
Original PNG: 574 KB JPEG, Q=40: 30 KB
Faster ForwardTM
Original PNG: 574 KB JPEG, Q=20: 18 KB
Faster ForwardTM
Original PNG: 574 KB JPEG, Q=10: 11 KB
Faster ForwardTM
Original PNG: 574 KB JPEG, Q=5: 7 KB
Faster ForwardTM
Lossy Compression – Not for Everyone
GIF, 11 KB
JPEG, Q=80, 8 KB
JPEG, Q=30, 4 KB
Average Color not
repre...
Faster ForwardTM
JPEG Optimization
- Control Quality
- 75-85 tops
- Quality level ≠ percentage
- Tools interpret quality d...
Faster ForwardTM
JPEG Metadata
120KB
Thumbnail
Faster ForwardTM
JPEG Optimization
- Control Quality
- 75-85 tops, try to go lower
- Tune Huffman Buffer Size
- Remove Met...
Faster ForwardTM
JPEG Baseline vs. Progressive
Baseline
Progressive
http://www.bookofspeed.com/chapter5.html
Pro-Tip: Conf...
Faster ForwardTM
Baseline vs Progressive – Visual Progress
Baseline
Progressive
Patrick Meenan:
“… Looking at the
Speed In...
Faster ForwardTM
JPEG Baseline vs. Progressive
Baseline
Progressive
http://www.bookofspeed.com/chapter5.html
1 2
0 0
1 0
0...
Faster ForwardTM
Baseline vs Progressive – File Size
Baseline – Progressive Size for 100,000 JPEGs
Stoyan Stefanov:
Images...
Faster ForwardTM
Progressive vs Baseline – Current Reality
Ann Robson:
“… In a thousand-image
sample, 92.6% are
baseline …...
Faster ForwardTM
Lossless JPEG Optimization
- Control Quality
- 75-85 tops, try to go lower
- Tune Huffman Buffer Size
- R...
Faster ForwardTM
Retina Images
bg_header_retina.png – 56 KB
bg_header.png –
14KB
1 2
43
• Marketing-speak for 2x pixel rat...
Faster ForwardTM
JPEG Retina Trick
- Retina images often 3-4x file size
- Regular images are “fuzzy” on Retina
- Double si...
Faster ForwardTM
Lossless JPEG Optimization
- Control Quality
- 75-85 tops, try to go lower
- Tune Huffman Buffer Size
- R...
Faster ForwardTM
Got Through JPEG!
Next Up:
Faster ForwardTM
WebP – Web Picture?
- 3 Years Old (2011)
- Pronounced “Weppy”
- Supports Lossless & Lossy Modes
- Very we...
Faster ForwardTM
WebP vs PNG
Google:
Lossless WebP 26%-34%
Smaller than PNG
Yoav Weiss:
Lossless WebP 33%-42%
Smaller than...
Faster ForwardTM
WebP vs JPEG
Google:
Lossy WebP 25%-
34% Smaller than JPEG
Yoav Weiss:
Lossy WebP 37%
Smaller than PNG
Faster ForwardTM
WebP – Impressed Yet?
- 26% - 42% Smaller than PNG
- 25% - 37% Smaller than JPEG
- Supports Alpha Transpa...
Faster ForwardTM
JPEG XR (eXtended Range)
- 4 Years Old (2009)
- Smaller files than JPEG
- A big bigger than WebP
- Patent...
Faster ForwardTM
Similarity Tests
- Formats work differently
- Quality # means different
visual quality per format
- Simil...
Faster ForwardTM
WebP vs JPEG-XR vs Optimized JPEG (Akamai Data)
Nick Doyle (Akamai):
1. WebP & JXR Both better than JPEG....
Faster ForwardTM
JPEG 2000
- 6-14 Years Old (2000/2008)
- Uses DWT instead of DCT
- Along with other improvements
- ~30% S...
Faster ForwardTM
Processing Images Ain’t Easy…
- Images are 60% of bytes - likely <95% of memory usage
- Resized Retina im...
Faster ForwardTM
Mozilla still undecided
- Ran a comparative study: JPEG, JXR, WebP, HEVC-MSP
- Used 4 algorithms to find ...
Faster ForwardTM
New Image Formats - Summary
Format Size vs
JPEG
Proggressive Transparency
Support
Hardware
Decoding
Encod...
Faster ForwardTM
Faster ForwardTM
When to use which format?
- For tiny images (e.g. 1x1 pixel) use GIF
- PNG-8 practically always smaller
-...
Faster ForwardTM
A PICTURE COSTS A THOUSAND WORDS
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
Thank You!
Questions?
Upcoming SlideShare
Loading in …5
×

Putting Your Images on a Diet (SmashingConf, 2014)

4,716 views

Published on

Images are quickly becoming one of the most critical factors for web performance. On one hand, users are demanding more visual websites, driving an increase in the number of images on a page and making background images cool again. On the other hand, technology trends such as Retina displays and RWD are making it much harder to choose the right image to download at any given time, avoiding the download of excess bytes.

In this talk, I go over what you can do to maximize the impact of every image byte. I explain the concept of Image Compression, understand how it applies to different image formats, and show the tools and techniques you should use to communicate the best visuals with the fewest bytes. Lastly, I show how to combine image compression and Retina displays, and discuss some newer image formats and how you can take advantage of them today

Published in: Technology
  • Be the first to comment

Putting Your Images on a Diet (SmashingConf, 2014)

  1. 1. Faster ForwardTM PUTTING YOUR IMAGES ON A DIET Guy Podjarny (@guypod) CTO, Web Experience, Akamai Everything you wanted to know about image compression… and then some.
  2. 2. Faster ForwardTM We have an image problem… Images appear simple Images seem friendly Images look like they can’t hurt But while you weren’t looking… Images Have Been Taking over The World (wide web)
  3. 3. Faster ForwardTM Images make up 63-66% of Page Bytes 17% 3% 5% 9% 3% 1054, 63% Desktop Bytes Scripts CSS Flash Other HTML Images 23% 5% 0% 1% 5% 552, 6 6% Mobile Bytes Scripts CSS Flash Other HTML Images
  4. 4. Faster ForwardTM Image Byte Increase over last 3 years It’s not more images, It’s BIGGER images 2.2x more Image Bytes in 3 years 32% more bytes in 1 year
  5. 5. Faster ForwardTM What is there to optimize with images? - Today’s focus: Image Compression - Optimizing image formats & encoding - There are other ways to optimize images - Optimize Image Loading - Optimize Image Delivery - Responsive Images - …
  6. 6. Faster ForwardTM LET’S START AT THE BEGINNING…
  7. 7. Faster ForwardTM GIF – Graphics Interchange Format - 27 Years Old (1987) - 256 Colors - “Simple” Transparency - No partial (Alpha) transparency - Supported Everywhere - Supports Animation - Previously Patented - Patents expired by now
  8. 8. Faster ForwardTM PNG – Portable Network Graphics - 18 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
  9. 9. 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 Left Delta Source: Sergey Chikuyonok, Smashing Magazine
  10. 10. 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
  11. 11. Faster ForwardTM JPEG – Joint Photographic Experts Group - 22 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
  12. 12. Faster ForwardTM JPEG Dominates Page Bytes, But PNG Is Growing 17% 25%
  13. 13. Faster ForwardTM JPEG Compression - Simplified 1. Divide image into 8x8 pixel blocks
  14. 14. Faster ForwardTM JPEG Compression - Simplified 1. Divide image into 8x8 pixel blocks 2. Split Luminance & Chrominance Y Cb Cr
  15. 15. Faster ForwardTM YCbCr (YUV) Visualization – Grand Tetons Source: IE Blog
  16. 16. Faster ForwardTM Chroma Subsampling - Chroma diffs are less noticeable - Subsampling “merges” adjacent pixels - Most popular is 4:2:2, 4:2:0 - Reduce Chroma bytes by 2x or 4x - Tools often deduce subsamplling - Based on quality tier - Photoshop Example: - no subsampling for quality 51-100 - 4:2:0 subsamplling for quality 0-50 Source: JPEG For The Horseshoe Crabs
  17. 17. Faster ForwardTM JPEG Compression - Simplified 1. Divide image into 8x8 pixel blocks 2. Split Luminance & Chrominance 3. Chroma Subsampling 4. Write pixels as ~delta from average • and round (DCT + Quantization) Y Cb Cr
  18. 18. Faster ForwardTM JPEG Compression - Simplified 1. Divide image into 8x8 pixel blocks 2. Split Luminance & Chrominance 3. Chroma Subsampling 4. Write pixels as ~delta from average and round (DCT + Quantization) 5. Write as line, compress (Huffman) = -9,-1,0(x62)
  19. 19. Faster ForwardTM JPEG Compression - Simplified 1. Divide image into 8x8 pixel blocks 2. Split Luminance & Chrominance 3. Chroma Subsampling 4. Write pixels as delta from average and round (DCT + Quantization) 5. Write as line, compress (Huffman) Q=10 Q=50 Original
  20. 20. Faster ForwardTM Original PNG: 574 KB JPEG, Q=90: 105 KB
  21. 21. Faster ForwardTM Original PNG: 574 KB JPEG, Q=75: 53 KB
  22. 22. Faster ForwardTM Original PNG: 574 KB JPEG, Q=40: 30 KB
  23. 23. Faster ForwardTM Original PNG: 574 KB JPEG, Q=20: 18 KB
  24. 24. Faster ForwardTM Original PNG: 574 KB JPEG, Q=10: 11 KB
  25. 25. Faster ForwardTM Original PNG: 574 KB JPEG, Q=5: 7 KB
  26. 26. Faster ForwardTM Lossy Compression – Not for Everyone GIF, 11 KB JPEG, Q=80, 8 KB JPEG, Q=30, 4 KB Average Color not representative PNG, 7 KB
  27. 27. Faster ForwardTM JPEG Optimization - Control Quality - 75-85 tops - Quality level ≠ percentage - Tools interpret quality differently - Tune Huffman Buffer Size - Use Arithmetic Encoding (vs Huffman) - Low adoption, no browser support - Tools: jpegtran, ImageMagick 0 50 100 150 200 250 300 350 0 20 40 60 80 100 120 Quality vs File Size
  28. 28. Faster ForwardTM JPEG Metadata 120KB Thumbnail
  29. 29. Faster ForwardTM JPEG Optimization - Control Quality - 75-85 tops, try to go lower - Tune Huffman Buffer Size - Remove Metadata - Tools: jpegtran, ImageMagick
  30. 30. Faster ForwardTM JPEG Baseline vs. Progressive Baseline Progressive http://www.bookofspeed.com/chapter5.html Pro-Tip: Configure how blocks are “interlaced” (The “Coefficient”) - Controls minimum quality level - Affects Size
  31. 31. 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…
  32. 32. Faster ForwardTM JPEG Baseline vs. Progressive Baseline Progressive http://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. 33. 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. Progressive Smaller Baseline Smaller
  34. 34. 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.... still only 7% …”
  35. 35. Faster ForwardTM Lossless JPEG Optimization - Control Quality - 75-85 tops, try to go lower - Tune Huffman Buffer Size - Remove Metadata - Consider (and default to) Progressive over Baseline - Tune Progressive Scan coefficients - Tools: jpegtran, ImageMagick, jpegrescan (~1.2% better)
  36. 36. Faster ForwardTM Retina Images bg_header_retina.png – 56 KB bg_header.png – 14KB 1 2 43 • Marketing-speak for 2x pixel ratio (or more) • 1 CSS pixel = 4 real pixels • Other ratios are possible (1.5x common) 3X
  37. 37. Faster ForwardTM JPEG Retina Trick - Retina images often 3-4x file size - Regular images are “fuzzy” on Retina - Double size, Lower Quality = Sharper Image, Smaller File - Discovered by Netvlies & Thomas Fuchs - Popularized by Filament Group - Not clear WHY it works - Artifact of tools “Quality” level? - Higher Memory Usage - More on that later…
  38. 38. Faster ForwardTM Lossless JPEG Optimization - Control Quality - 75-85 tops, try to go lower - Tune Huffman Buffer Size - Remove Metadata - Consider (and default to) Progressive over Baseline - Tune Progressive Scan coefficients - Consider Retina Double-Size-Low-Quality Trick - Tools: jpegtran, ImageMagick, jpegrescan, ImageOptim
  39. 39. Faster ForwardTM Got Through JPEG! Next Up:
  40. 40. Faster ForwardTM WebP – Web Picture? - 3 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 Google for global use - Nokia still claiming related Patents
  41. 41. Faster ForwardTM WebP vs PNG Google: Lossless WebP 26%-34% Smaller than PNG Yoav Weiss: Lossless WebP 33%-42% Smaller than PNG
  42. 42. Faster ForwardTM WebP vs JPEG Google: Lossy WebP 25%- 34% Smaller than JPEG Yoav Weiss: Lossy WebP 37% Smaller than PNG
  43. 43. 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?! 23+ 12.1+
  44. 44. Faster ForwardTM JPEG XR (eXtended Range) - 4 Years Old (2009) - Smaller files than JPEG - A big bigger than WebP - Patented by Microsoft - Under “Open Spec Promise” - Jxrlib has BSD License - Support: IE 9+ (incl. Mobile) - Properly works in IE 10+ - Includes IE Mobile 10+
  45. 45. Faster ForwardTM Similarity Tests - Formats work differently - Quality # means different visual quality per format - Similarity algorithms help detect “similar” images - Across image formats - Sample algo: DSSIM
  46. 46. Faster ForwardTM WebP vs JPEG-XR vs Optimized JPEG (Akamai Data) Nick Doyle (Akamai): 1. WebP & JXR Both better than JPEG. 2. Beware the different Quality scales
  47. 47. Faster ForwardTM JPEG 2000 - 6-14 Years Old (2000/2008) - Uses DWT instead of DCT - Along with other improvements - ~30% Smaller than JPEG - Based on initial Akamai research - Patented, but free to use - As agreed by ~20 patent-owning org’s - Support: Safari & Mobile Safari - iOS 6+, Mac Safari, not Win Safari
  48. 48. Faster ForwardTM Processing Images Ain’t Easy… - Images are 60% of bytes - likely <95% of memory usage - Resized Retina images take up 4x the memory! - Output pushed to GPU, often through slow Mobile BUS - GPUs now starting to process YUV – faster with less RAM for JPEGs - Network time is not the only thing that matters… Typical Image Decoding Flow (Source: IE Blog): 30 KB JPG Input ~300 KB in YUV (~10 bbp) 1 MB After Upsampling (~32 bbp) RAM: Often 300-800ms on Mobile
  49. 49. Faster ForwardTM Mozilla still undecided - Ran a comparative study: JPEG, JXR, WebP, HEVC-MSP - Used 4 algorithms to find “comparable” image across formats - HEVC-MSP deemed best, results inconclusive for others - Note: Study used PNG’s as source - Akamai’s studies used “live” website images 0.8 0.9 1 1.1 1.2 1.3 50 55 60 65 70 75 80 85 90 95 Relative File Size, Kodak Image Set, Y-SSIM JPEG JPEG XR WebP HEVC-MSP 0.5 0.6 0.7 0.8 0.9 1 1.1 50 55 60 65 70 75 80 85 90 95 Relative File Size, Kodak Image Set, RGB-SSIM JPEG JPEG XR WebP HEVC-MSP
  50. 50. Faster ForwardTM New Image Formats - Summary Format Size vs JPEG Proggressive Transparency Support Hardware Decoding Encoder Browser Support JPEG N/A N/A No No jpegtran Everybody WebP -35% -35% Yes No cwebp JPEG XR -30% N/A In Spec, not Browsers Maybe jxrlib JPEG 2000 -30% N/A In Spec, not Browsers Maybe OpenJPEG 10+ 12.1+4+23+ 6+6+
  51. 51. Faster ForwardTM
  52. 52. 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/JXR/J2K where possible - Serve only to supporting clients - For Animation, use GIF - Seat back and reap the rewards…
  53. 53. Faster ForwardTM A PICTURE COSTS A THOUSAND WORDS Guy Podjarny (@guypod) CTO, Web Experience, Akamai Thank You! Questions?

×