Using ImageMagick to resize your Images [WebPerfTO]

Toronto Web Performance Group,
2015-03-17
https://github.com/nwtn/pres-imagemagick-webperfto

Transcript

1. 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. 2
3. 3 Responsive images are a pain in the butt
4. 4
5. 5
6. 6
7. 7 ImageMagick, y’all
8. 8
9. 9 $ brew install imagemagick
10. 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. 11 How does image resizing work?
12. 12 685,936 pixels 189,739 pixels
13. 13 …to 64 pixels? How do we get from 16 pixels…
14. 14 != resampling
15. 15 …to 64 pixels? How do we get from 16 pixels…
16. 16 …to 64 pixels? How do we get from 16 pixels… Background interpolation
17. 17 …to 64 pixels? How do we get from 16 pixels… Nearest-neighbour interpolation
18. 18 Nearest-neighbour interpolation
19. 19 Bicubic interpolation
20. 20 Nearest-neighbour vs. bicubic interpolation
21. 21 7 colours 1,146 colours
22. 22
23. More colours = More bytes* 23
24. 24 https://github.com/nwtn/image-resize-tests/
25. 25 How do we know which options are best?
26. Quality objective: measured with DSSIM 26
27. 27 Control Test Difference
28. 28
29. Quality subjective: from me 29
30. Test a variety of images 30
31. 31 The best* settings for ImageMagick
32. 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. 33 https://imageoptim.com/
34. 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. 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. 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. 37 Adaptive resize Distort resize Geometry Interpolative resize Liquid rescale Resize Sample Scale Thumbnail
38. 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. 39 (x1 ,y2 ) (x2 ,y2 ) (x1 ,y1 ) (x2 ,y1 ) (x,y) = + + +
40. 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. 41
42. 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. 43 Fancy
44. 43 Fancy
45. 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
46. 45 -unsharp 0.25x0.08+8.3+0.045 radius sigma gain threshold
47. 46 -unsharp 0.25x0.08+8.3+0.045 radius sigma gain threshold
48. 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
49. 48
50. 49
51. 50
52. 51
53. 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
54. 53
55. More colours = More bytes* 54
56. 55
57. 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
58. 57 quality 10 quality 40 quality 70 quality 100
59. 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
60. 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
61. 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
62. 61
63. 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
64. 63
65. 63
66. 64
67. 64
68. 65 Progressive JPEGs Good? Evil?
69. 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
70. 67
71. 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:
72. 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:
73. 70 Why even bother?
74. 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%
75. 72 OK… but it’s still a pain in the butt
76. 73 https://www.npmjs.com/package/grunt-respimg
77. 74 Resizing with smart defaults SVG to PNG rasterization Optimization
78. 75 npm install grunt-respimg --save-dev
79. 76
80. 77
81. 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