The document discusses techniques for optimizing images for web applications. It notes that device fragmentation leads to different optimal image sizes and formats for different devices. It proposes a solution architecture that uses a queue and workers to optimize images on upload by resizing and converting them to different formats. The document outlines various optimization strategies for different image formats like JPEG, PNG, GIF and SVG to reduce file sizes while maintaining quality.

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