Slide 1
Slide 1 text
Image optimization for websites
Best Practices & Automatization
Slide 2
Slide 2 text
Best Practices
non-lossy
lossy
format
Tools
API
open-source?
overview
examples
Automatization
API CDN
scripting
When?
How?
patterns
overview
Slide 3
Slide 3 text
Page Weight Response Time
Almost 50% of the page weight for the Alexa Top-10 are images!
Slide 4
Slide 4 text
lossy optimization lossless optimization
Slide 5
Slide 5 text
lossy optimization
# designer
# tradeoff, decision
# loss of quality
# loss of weight (maybe a lot!)
# everybody is responsible!
lossless optimization
Slide 6
Slide 6 text
lossy optimization
lossless optimization
# developers
# must do!
# tools and automatization
# (almost) for free
Slide 7
Slide 7 text
lossy
optimization
Slide 8
Slide 8 text
Choose your format!
Slide 9
Slide 9 text
PNG
# very good for graphics
# truecolor and palett
# full transparency
# interlacing
# non-lossy
1,19 MB 4,86 KB
8,59 KB
Slide 10
Slide 10 text
JPG
# very good for fotos
# truecolor
# interlacing
# lossy
# no transparency
525 KB 41,3 KB
16,4 KB
Slide 11
Slide 11 text
GIF
9,75 KB
# simple animations
# yes/no transparency
# non-lossy
# interlacing
Slide 12
Slide 12 text
SVG
# not really an image format
# but: best solution for pure charts!
PNG
Slide 13
Slide 13 text
PNG in detail
Color reduction
Slide 14
Slide 14 text
182 KB / 100% 46,2 KB / 60%
182 KB / 100%
PNG
8,59 KB / PNG-8 / 256 4,07 KB / PNG-8 / 32
15,9 KB / PNG-24 / truecolor
Slide 15
Slide 15 text
JPEG in detail
Compression
Slide 16
Slide 16 text
182 KB / 100%
PNG
182 KB / 100% 46,2 KB / 60%
16 KB / 15%
Slide 17
Slide 17 text
Conclusion
Choose your format!
Color reduction
Compression
Partial Compression
Slide 18
Slide 18 text
Conclusion
Choose your format!
Color reduction
Compression
Partial Compression
Slide 19
Slide 19 text
Conclusion
Choose your format!
Color reduction
Compression
Partial Compression
Slide 20
Slide 20 text
Conclusion
Choose your format!
Color reduction
Compression
Partial Compression
Slide 21
Slide 21 text
non-lossy
optimization
Slide 22
Slide 22 text
Meta-Data Progressive-JPEG
Scale HTTP-Requests
Crushed PNG PNG8
Slide 23
Slide 23 text
Meta-Data
# EXIF, comments, thumbnails
# ~10% of image weight
# easy as hell!
# copyright?!
Progressive-JPEG
Scale HTTP-Requests
Crushed PNG PNG8
Slide 24
Slide 24 text
Meta-Data
Progressive-JPEG
# better user experience
# only for large images (~10 KB)
# easy as hell!
Scale HTTP-Requests
Crushed PNG PNG8
Slide 25
Slide 25 text
Meta-Data Progressive-JPEG
Scale
# don't scale in HTML
# CDNs
# mobile devices and retina displays
HTTP-Requests
Crushed PNG PNG8
Slide 26
Slide 26 text
Meta-Data Progressive-JPEG
Scale
HTTP-Requests
# less traffic
# ~10% of image weight
# CSS-sprites or Base64 images
Crushed PNG PNG8
Slide 27
Slide 27 text
Meta-Data Progressive-JPEG
Scale HTTP-Requests
Crushed PNG
# PNG is tricky!
# PNG uses chunks to be extendible
# a lot of chunks are not need for the web
# ~30% of image weight
PNG8
Slide 28
Slide 28 text
Meta-Data Progressive-JPEG
Scale HTTP-Requests
Crushed PNG
PNG8
# prefer PNG8 instead of GIF
# for icons and graphics
# don't forget to crush!
Slide 29
Slide 29 text
Minimize the
number of
HTTP requests!
CSS-Sprites
Base64
Slide 30
Slide 30 text
CSS-Sprites
# multiple (similar) images combined
# a lot of work, but worth it!
# less traffic
# ~10% of image weight
# modular sprites for sites > 3 pages
with CSS-Sprite / 1 Request
Google PageSpeed
92/100
without CSS-Sprite / 40 Requests
Google PageSpeed
62/100
PNG
Slide 31
Slide 31 text
Base64
# No HTTP-Requests
# As image/html or background image/css
# less traffic
# use for small images < 40 KB
# 24 x 24 px / PNG
# Original Size: 2405 Bytes
# Data URI Size: 3208 Bytes
data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAC8AAAAvCAYAAABzJ5OsAAAAAXNSR
0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrD
hsAAAj6SURBVGhDrZhpc1XHEYb10+AXAH+A7UM+IFlbHFdSlZSQPqZs3cX
BsSsVA0YbkliTgBCUEEpiC+MCgVgKYwkQS4EohMAFJkJX7X56Tl+Nju9yrs
NbOpqZnpnud7p7+hypSTKiVCpZu7a2Zq0jPY5Ray5G1nVpZCLvytMtSBtOr/F
Dg0r70vsbQV3ytZTHBJaXl2X//v2ya9cuaW9vl7a2Nunq6pKdO3dKd3e3jU+cO
PELfbGORpE5baoB0tu3bzfSMzMzRqIawWPHjtm6fD5v42qopKMSGiKfVnr8+
HHz7P379xNJZaSJTE5OytatW+Xq1auJZOMa76f3pfGrPI/SAwcOVPVgFuNE
zKNVCfWIg8zkY2Xk9sGDB2uS5KIir0bC5dyPOAKOavtiZCIfK8JTHR0dyWgjf
F3acC0iRGDLli3y8uXLRLKOegdoOG22bdtmbT3FtZA+JJ7fu3ev9UGsu5aduu
RjQ+R5Ol24tESC8G/evFl27NhhFzIGJZILumnTJiuZ3JV0riN376M3tlENDaUN
BAFjajdjDuTVwwlRgZCn+5RKrzK5XE52795tMkDF8gIQE/6/yQO84uRpvaYD
CJK7sSHWQJRIOZiHOC8vB
PNG
Slide 32
Slide 32 text
Tools
Slide 33
Slide 33 text
Tool Lizenz Interface Techniken Reduction Comment
Smush.it free to use web, plugins + Steve Souders!
Kraken.io free to use with
limitations
web, API, plugins + lossy & non-lossy!
ImageOpt open source Local GUI
PNGOUT, AdvPNG,
Pngcrush, extended
OptiPNG, JpegOptim,
jpegrescan, jpegtran,
and Gifsicle.
+
only Mac, slow
(PNGOut)
PNGGauntlet free to use Local GUI
combines PNGOUT,
OptiPNG, and DeflOpt
+
only Windows, slow
(PNGOut)
Enigma64 19.99 $ PSD-Plugin
lossless & optional
Base64
Slide 34
Slide 34 text
Tool Lizenz Interface Techniken Reduction Comment
JPEG-Mini free to use web, plugins ++
Puny-PNG
free version, Pro:
higher compression
& lossy
web, API, plugins ++
lossy & non-lossy!
each file max. 150 KB,
15 files max.
TinyPNG free to use web, CMD
pngquant /8-Bit +
Transparenz
++
each original file max
3MB, 20 files max.
CompressPNG free to use web PNG 8 + transparenz ++ 20 files max
Pngcrush open source
CMD removes chunks ++ slow
Slide 35
Slide 35 text
Tool Lizenz Interface Techniken Evaluation Comment
SpriteCow free to use web - generates css-file only
SpritePad free to use, Pro web +
generates sprite-png
and css-file
Spritebaker free to use web base64 ++
easy to use, use with
gzip only, no IE < 8
support, some browser
limit data URI size
Slide 36
Slide 36 text
Conclusion: Tools to optimize an existing web page / for free
2. Use special tools for big images additionally
# Tiny PNG
# JPEG-Mini
# PNG Crush
3. Use Data URI or CSS-Sprites for small images
# Spritebaker
# Spritepad
1. Use an allrounder for all images
# Kraken.io
Slide 37
Slide 37 text
Conclusion: Tools to optimize an existing web page / for free
2. Use special tools for big images additionally
# Tiny PNG
# JPEG-Mini
# PNG Crush
3. Use Data URI or CSS-Sprites for small images
# Spritebaker
# Spritepad
1. Use an allrounder for all images
# Kraken.io
Slide 38
Slide 38 text
Conclusion: Tools to optimize an existing web page / for free
2. Use special tools for big images additionally
# Tiny PNG
# JPEG-Mini
# PNG Crush
3. Use Data URI or CSS-Sprites for small images
# Spritebaker
# Spritepad
1. Use an allrounder for all images
# Kraken.io
Slide 39
Slide 39 text
Conclusion: Tools to generate a new web page / commercial
Use one tool for all - as a Photoshop-Plugin
# Enigma64
Slide 40
Slide 40 text
Automatization
Slide 41
Slide 41 text
Development Deployment
Life-Time & Legacy
Dynamic Images
Slide 42
Slide 42 text
Development
# do scripting!
# Python, Ruby, anything!
# pick your favorite tool
Deployment
# do scripting!
# Python, Ruby, anything!
# pick your favorite tool
Life-Time & Legacy
Dynamic Images
Slide 43
Slide 43 text
Development Deployment
Life-Time & Legacy
# include image optimization
# upload dialogs
# maintenance jobs
Dynamic Images
Slide 44
Slide 44 text
Development Deployment
Life-Time & Legacy
Dynamic Images
# Cloudinary.com
# Imgix.com
# CDNConnect.com
Slide 45
Slide 45 text
Questions?