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

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