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.

Image Optimisation Techniques for WebApps

293 views

Published on

Image Optimisation Techniques for WebApps
Nil Portugués Calderó - 6th October 2014

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Image Optimisation Techniques for WebApps

  1. 1. Image Optimisation Techniques for WebApps Nil Portugués Caldero contact@nilportugues.com20th November
  2. 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. 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. 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. 5. Thanks! Nil Portugués Caldero contact@nilportugues.com

×