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. Faster ForwardTM We have an image problem Images appear simple Images seem friendly Images look like they cant hurt But while you werent looking Images Have Been Taking over The World (wide web) 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. Faster ForwardTM Image Byte Increase over last 3 years Its not more images, Its BIGGER images 2.2x more Image Bytes in 3 years 32% more bytes in 1 year 5. Faster ForwardTM What is there to optimize with images? - Todays focus: Image Compression - Optimizing image formats & encoding - There are other ways to optimize images - Optimize Image Loading - Optimize Image Delivery - Responsive Images - 6. Faster ForwardTM LETS START AT THE BEGINNING 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. 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. 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. 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. 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 - Its a Lossy Format 12. Faster ForwardTM JPEG Dominates Page Bytes, But PNG Is Growing 17% 25% 13. Faster ForwardTM JPEG Compression - Simplified 1. Divide image into 8x8 pixel blocks 14. Faster ForwardTM JPEG Compression - Simplified 1. Divide image into 8x8 pixel blocks 2. Split Luminance & Chrominance Y Cb Cr 15. Faster ForwardTM YCbCr (YUV) Visualization Grand Tetons Source: IE Blog 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. 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. 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. 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. Faster ForwardTM Original PNG: 574 KB JPEG, Q=90: 105 KB 21. Faster ForwardTM Original PNG: 574 KB JPEG, Q=75: 53 KB 22. Faster ForwardTM Original PNG: 574 KB JPEG, Q=40: 30 KB 23. Faster ForwardTM Original PNG: 574 KB JPEG, Q=20: 18 KB 24. Faster ForwardTM Original PNG: 574 KB JPEG, Q=10: 11 KB 25. Faster ForwardTM Original PNG: 574 KB JPEG, Q=5: 7 KB 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. 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. Faster ForwardTM JPEG Metadata 120KB Thumbnail 29. Faster ForwardTM JPEG Optimization - Control Quality - 75-85 tops, try to go lower - Tune Huffman Buffer Size - Remove Metadata - Tools: jpegtran, ImageMagick 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. 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. 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. 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. 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. 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. 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. 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. 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. Faster ForwardTM Got Through JPEG! Next Up: 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. Faster ForwardTM WebP vs PNG Google: Lossless WebP 26%-34% Smaller than PNG Yoav Weiss: Lossless WebP 33%-42% Smaller than PNG 42. Faster ForwardTM WebP vs JPEG Google: Lossy WebP 25%- 34% Smaller than JPEG Yoav Weiss: Lossy WebP 37% Smaller than PNG 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. 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. 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. 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. 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 orgs - Support: Safari & Mobile Safari - iOS 6+, Mac Safari, not Win Safari 48. Faster ForwardTM Processing Images Aint Easy - Images are 60% of bytes - likely