Lossless Image Optimisation Techniques for WebApps

- 6th October 2014 at Itnig (Web Performance Barcelona).
- Reused for WebPerfDays.org Barcelona on 20th November

Transcript

1. Image Optimisation Techniques for WebApps Nil Portugués Caldero contact@nilportugues.com 20th November
2. The problem: device fragmentation 700 KB JPG 600 KB JPG 1600x800px 400 KB WEBP 700 KB JPG 600 KB JPG 1200x600px 600 KB JPG 400 KB JPG 300 KB WEBP 768x300px 250 KB JPG 100 KB JPG 80 KB WEBP 768x300px 170 KB JPG 50 KB JPG 40 KB WEBP 700 KB JPG 600 KB JPG 700 KB JPG 600 KB JPG
3. Application Code Image repository (eg. SQL table) Solution Architecture Queue workers Queue System CDN n m n m Image Token/Detokenizer Image Optimisation Enqueuer Browser or App <img src=http://example.com/image.jpg> {{IMG|6fd86da74659f04253285e853af26845}} Resize image & Image Optimisation
4. Optimiser Script Strategy FORMAT / CONVERSION JPG (progressive) JPG (baseline) PNG GIF GIF (animated) SVG JPG (progressive) Optimise Huffman Remove metadata Optimise Huffman To JPG if no transparency channel JPG (baseline) Remove metadata Optimise Huffman Optimise Huffman To JPG if no transparency channel PNG 32 to 24 bits transparency Optimize LWZ PNG better? GIF Trim palette GIF (animated) Trim palette SVG Trim XML code WebP For Chrome users For Chrome users
5. Thanks! Nil Portugués Caldero contact@nilportugues.com