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
Nil Portugués Caldero
contact@nilportugues.com20th November
The problem: device fragmentation
700 KB JPG
600 KB JPG
1600x800px
400 KB WEBP
700 KB JPG
600 KB JPG
1200x600px
600 KB JPG...
Application Code Image
repository
(eg. SQL table)
Solution Architecture
Queue
workers
Queue
System
CDN
n m n m
Image
Token...
Optimiser Script Strategy
FORMAT /
CONVERSION
JPG
(progressive)
JPG
(baseline)
PNG GIF GIF
(animated)
SVG
JPG (progressive...
Thanks!
Nil Portugués Caldero
contact@nilportugues.com
Upcoming SlideShare
Loading in …5
×

of

Image Optimisation Techniques for WebApps Slide 1 Image Optimisation Techniques for WebApps Slide 2 Image Optimisation Techniques for WebApps Slide 3 Image Optimisation Techniques for WebApps Slide 4 Image Optimisation Techniques for WebApps Slide 5
Upcoming SlideShare
Resolution for a Faster Site
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Image Optimisation Techniques for WebApps

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

317

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×