Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Using ImageMagick to resize your Images [WebPerfTO]
newtron
March 18, 2015
Technology
2
270
Using ImageMagick to resize your Images [WebPerfTO]
Toronto Web Performance Group,
2015-03-17
https://github.com/nwtn/pres-imagemagick-webperfto
newtron
March 18, 2015
Tweet
Share
More Decks by newtron
See All by newtron
newtron
0
60
newtron
0
64
newtron
0
55
newtron
0
110
newtron
1
140
newtron
0
99
newtron
6
370
newtron
0
130
newtron
2
210
Other Decks in Technology
See All in Technology
soracom
0
450
lmi
2
830
pohjus
0
3.3k
you
0
270
torisoup
10
5.1k
fufuhu
3
130
manuelmeyer
0
120
twada
PRO
6
1.9k
mamix1116
3
400
puhitaku
3
1.1k
xecus
0
170
chaspy
6
1.2k
Featured
See All Featured
phodgson
87
3.9k
sferik
610
54k
akmur
252
19k
matthewcrist
73
7.5k
chriscoyier
499
130k
eileencodes
113
25k
moore
125
21k
pauljervisheath
196
15k
caitiem20
308
17k
kneath
219
15k
3n
163
22k
gr2m
83
11k
Transcript
David Newton, St. Michael’s Hospital 1 1 Using ImageMagick to
resize your Images Toronto Web Performance Group, 2015-03-17 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides + image credits: https://github.com/nwtn/pres-imagemagick-webperfto
2
3 Responsive images are a pain in the butt
4
5
6
7 ImageMagick, y’all
8
9 $ brew install imagemagick
10 Condition File size: mean File size: % difference Photoshop
CC, with optimization 260,304.70 KB ImageMagick `-resize` 337,665.98 KB 52.39%
11 How does image resizing work?
12 685,936 pixels 189,739 pixels
13 …to 64 pixels? How do we get from 16
pixels…
14 != resampling
15 …to 64 pixels? How do we get from 16
pixels…
16 …to 64 pixels? How do we get from 16
pixels… Background interpolation
17 …to 64 pixels? How do we get from 16
pixels… Nearest-neighbour interpolation
18 Nearest-neighbour interpolation
19 Bicubic interpolation
20 Nearest-neighbour vs. bicubic interpolation
21 7 colours 1,146 colours
22
More colours = More bytes* 23
24 https://github.com/nwtn/image-resize-tests/
25 How do we know which options are best?
Quality objective: measured with DSSIM 26
27 Control Test Difference
28
Quality subjective: from me 29
Test a variety of images 30
31 The best* settings for ImageMagick
32 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH With optimization:
33 https://imageoptim.com/
34 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
OUTPUT_WIDTH -unsharp 0.25x0.25+8.00+0.065 - dither None -posterize 136 -background Black - alpha Background -quality 82 -define jpeg:fancy- upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude- chunk=all -interlace none -colorspace sRGB - strip INPUT_PATH Without optimization:
35 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
36 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
37 Adaptive resize Distort resize Geometry Interpolative resize Liquid rescale
Resize Sample Scale Thumbnail
38 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
39 (x1 ,y2 ) (x2 ,y2 ) (x1 ,y1 )
(x2 ,y1 ) (x,y) = + + +
40 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
41
42 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
OUTPUT_WIDTH -unsharp 0.25x0.25+8.00+0.065 - dither None -posterize 136 -background Black - alpha Background -quality 82 -define jpeg:fancy- upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude- chunk=all -interlace none -colorspace sRGB - strip INPUT_PATH
43 Fancy
43 Fancy
44 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
45 -unsharp 0.25x0.08+8.3+0.045 radius sigma gain threshold
46 -unsharp 0.25x0.08+8.3+0.045 radius sigma gain threshold
47 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
48
49
50
51
52 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
OUTPUT_WIDTH -unsharp 0.25x0.25+8.00+0.065 - dither None -posterize 136 -background Black - alpha Background -quality 82 -define jpeg:fancy- upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude- chunk=all -interlace none -colorspace sRGB - strip INPUT_PATH
53
More colours = More bytes* 54
55
56 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
57 quality 10 quality 40 quality 70 quality 100
58 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
OUTPUT_WIDTH -unsharp 0.25x0.25+8.00+0.065 - dither None -posterize 136 -background Black - alpha Background -quality 82 -define jpeg:fancy- upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude- chunk=all -interlace none -colorspace sRGB - strip INPUT_PATH
59 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
60 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
OUTPUT_WIDTH -unsharp 0.25x0.25+8.00+0.065 - dither None -posterize 136 -background Black - alpha Background -quality 82 -define jpeg:fancy- upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude- chunk=all -interlace none -colorspace sRGB - strip INPUT_PATH
61
62 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH
63
63
64
64
65 Progressive JPEGs Good? Evil?
66 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
OUTPUT_WIDTH -unsharp 0.25x0.25+8.00+0.065 - dither None -posterize 136 -background Black - alpha Background -quality 82 -define jpeg:fancy- upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude- chunk=all -interlace none -colorspace sRGB - strip INPUT_PATH
67
68 mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2.0 -thumbnail OUTPUT_WIDTH
-unsharp 0.25x0.08+8.3+0.045 -dither None - posterize 136 -quality 82 -define png:preserve-colormap=true - interlace none INPUT_PATH With optimization:
69 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
OUTPUT_WIDTH -unsharp 0.25x0.25+8.00+0.065 - dither None -posterize 136 -background Black - alpha Background -quality 82 -define jpeg:fancy- upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude- chunk=all -interlace none -colorspace sRGB - strip INPUT_PATH Without optimization:
70 Why even bother?
71 Condition File size: mean File size: % difference My
settings, optimization 221,583.36 KB My settings, no optimization 260,250.18 KB 17.45% Photoshop CC, optimization 260,304.70 KB 17.48% CodeIgniter / ExpressionEngine 276,112.95 KB 24.61% Photoshop CC, no optimization 299,709.70 KB 35.26% TYPO3.CMS 321,602.95 KB 45.14% WordPress 337,665.98 KB 52.39% Drupal 344,246.42 KB 55.36% Perch 348,735.82 KB 57.38% Craft CMS 372,055.63 KB 67.91% grunt-responsive-images 426,623.28 KB 92.36%
72 OK… but it’s still a pain in the butt
73 https://www.npmjs.com/package/grunt-respimg
74 Resizing with smart defaults SVG to PNG rasterization Optimization
75 npm install grunt-respimg --save-dev
76
77
David Newton, St. Michael’s Hospital 78 1 Using ImageMagick to
resize your Images Toronto Web Performance Group, 2015-03-17 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides + image credits: https://github.com/nwtn/pres-imagemagick-webperfto