Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using ImageMagick to resize your Images [FSTO]

C3e8ba214714b1402f3073334249fcdc?s=47 newtron
April 08, 2015
Technology
0
230

Using ImageMagick to resize your Images [FSTO]

Full Stack Toronto,
2015-04-08
https://github.com/nwtn/pres-imagemagick-fsto

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

April 08, 2015
Tweet

More Decks by newtron

See All by newtron
Universal web design [Accessibility Camp Toronto]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
120
Universal web design [HackerYou a11y club]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
120
Universal web design [Full Stack Toronto]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
110
Information architecture as knowledge translation [World IA Day]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
180
Improving performance with responsive (and responsible!) images [CSSDay.io]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
1
250
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
190
Improving performance with responsive (and responsible!) images [CSSConf]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
6
470
Universal Web Design: How to create an awesome experience for every user [OpenWest]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
180
Improving performance with responsive (and responsible!) images [OpenWest]
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
2
270

Other Decks in Technology

See All in Technology
ここが好きだよAWS管理ポリシー_devio2022/i_am_iam_lover
325ce6fcd0a74ff78990b8632817da55?s=48 yukihirochiba
0
3.2k
cobra は便利になっている
6ed12627fec46a135f1bce5d56f3568e?s=48 nwiizo
0
140
Power BI のうらがわ
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
1
150
Learning to Solve Hard Minimal Problems
2c88806cbaab6024dc95b9a654c99d86?s=48 takmin
1
470
Power Automate for desktopで 配信環境を改善してみた話
C97407daeb9ad3a654e6a0ad8701b972?s=48 akiika
0
320
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
8785139c395ce2345ce535822b522dde?s=48 kentosuzuki
1
510
Step-by-Step MLOps and Microsoft Products
0fa6038e477031fcca028bab0efe07e3?s=48 shisyu_gaku
1
570
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
E96c81ea6ec9fc4258a1fba04ae7ca5e?s=48 ryook
5
2.7k
eBPFで実現するコンテナランタイムセキュリティ / Container Runtime Security with eBPF
2f73f93f91c4401b0baf12029226a681?s=48 tobachi
PRO
5
1.8k
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
1
490
EC／CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
Fee058832252e72722b8b03073ff6324?s=48 masaru_b_cl
0
430
Getting Started in Product Management
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
120

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
32
11k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.9k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.7k
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
87
12k
Adopting Sorbet at Scale
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
63
7.6k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
127
5.5k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
267
21k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
6k

Transcript

  1. David Newton, St. Michael’s Hospital 1 1 Using ImageMagick to

    resize your Images Full Stack Toronto, 2015-04-08 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides + image credits: https://github.com/nwtn/pres-imagemagick-fsto

  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 (unoptimized input) File size: mean File size: %

    difference Photoshop CC, with optimization 260,305 bytes ImageMagick `-resize` 385,795 bytes 48.21%

  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 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 INPUT_PATH With optimization:

  33. 33 https://github.com/toy/image_optim https://github.com/ajslater/picopt https://imageoptim.com/

  34. 34 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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 vs. convert

  36. 36

  37. 37 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  38. 38 resampling filter

  39. 39 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  40. 40 Adaptive resize Distort resize Geometry Interpolative resize Liquid rescale

    Resize Sample Scale Thumbnail

  41. 41 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  42. 42

  43. 43

  44. 44 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  45. 45

  46. 46 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  47. 47 Fancy

  48. 48 sharpening

  49. 49 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  50. 50 -unsharp 0.25x0.25+8+0.045 radius sigma gain threshold

  51. 51 -unsharp 0.25x0.25+8+0.045 radius sigma gain threshold

  52. 52 colour reduction

  53. 53 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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. 54

  55. 55

  56. 56

  57. 57

  58. 58

  59. 59 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -quality 82 -colors NUMBER_OF_COLORS -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 If output file size is larger than input:

  60. 60 7 colours 1,146 colours

  61. 61 7 colours 7 colours

  62. 62 quality and compression

  63. 63 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  64. 64 quality 10 quality 40 quality 70 quality 100

  65. 65 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  66. 66 metadata

  67. 67 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  68. 68 progressive rendering

  69. 69 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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. 70

  71. 71

  72. Progressive JPEGs Good? Evil? 72

  73. 73 colour space

  74. 74 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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

  75. 75

  76. 76 The best* settings for ImageMagick

  77. 77 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 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 INPUT_PATH With optimization:

  78. 78 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail

    OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None - posterize 136 -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:

  79. 79 Why even bother?

  80. 80 Condition (unoptimized input) File size: mean File size: %

    difference My settings, optimization 218,274 bytes My settings, no optimization 259,852 bytes 19.05%

  81. 81 Condition (unoptimized input) File size: mean File size: %

    difference My settings, optimization 218,274 bytes My settings, no optimization 259,852 bytes 19.05% Photoshop CC, optimization 260,305 bytes 19.28% Photoshop CC, no optimization 299,710 bytes 35.26%

  82. 82 Condition (unoptimized input) File size: mean File size: %

    difference My settings, optimization 218,274 bytes My settings, no optimization 259,852 bytes 19.05% Photoshop CC, optimization 260,305 bytes 19.28% Photoshop CC, no optimization 299,710 bytes 35.26% basic `-resize` / WordPress* 385,795 bytes 76.75%

  83. 83 Condition (unoptimized input) File size: mean File size: %

    difference My settings, optimization 218,274 bytes My settings, no optimization 259,852 bytes 19.05% Photoshop CC, optimization 260,305 bytes 19.28% Photoshop CC, no optimization 299,710 bytes 35.26% CodeIgniter / ExpressionEngine 340,461 bytes 55.98% TYPO3.CMS* 359,112 bytes 64.52% basic `-resize` / WordPress* 385,795 bytes 76.75% Drupal* 397,588 bytes 82.15% Perch* 416,790 bytes 90.95% Craft CMS* 425,259 bytes 94.83% grunt-responsive-images* 500,273 bytes 129.20%

  84. 84 PHP Imagick

  85. 85

  86. 86

  87. 87 CLI Imagick DSSIM File Size -filter N/A N/A N/A

    -define filter:support setOption() ? ? -thumbnail thumbnailImage() ✗ ✗ -unsharp unsharpMaskImage() ✔ ✔ -dither & -posterize posterizeImage() ✔ ✔ -quality setImageCompressionQuality() ✔ ✗ -define jpeg:fancy-upsampling setOption() ✔ ✔ -define png:compression-filter setOption() ✔ ✔ -define png:compression-level setOption() ✔ ✔ -define png:compression-strategy setOption() ✔ ✔ -define png:exclude-chunk setOption() ✔ ✔ -interlace setInterlaceScheme() ✔ ✔ -colorspace setColorspace() ✔ ✔ -strip stripImage() ✔ ✔

  88. 88

  89. 89 CLI Imagick DSSIM File Size -filter custom ✔ ✗

    -define filter:support setOption() ✔ ✗ -thumbnail custom ✔ ✗ -unsharp unsharpMaskImage() ✔ ✔ -dither & -posterize posterizeImage() ✔ ✔ -quality setImageCompressionQuality() ✔ ✔ -define jpeg:fancy-upsampling setOption() ✔ ✔ -define png:compression-filter setOption() ✔ ✔ -define png:compression-level setOption() ✔ ✔ -define png:compression-strategy setOption() ✔ ✔ -define png:exclude-chunk setOption() ✔ ✔ -interlace setInterlaceScheme() ✔ ✔ -colorspace setColorspace() ✔ ✔ -strip stripImage() ✔ ✔

  90. 90 OK… but it’s still a pain in the butt

  91. 91 https://github.com/nwtn/php-respimg/ Resizing with smart defaults + more coming soon?

  92. 92 $ composer require nwtn/php-respimg

  93. 93

  94. 94 https://www.npmjs.com/package/grunt-respimg Resizing with smart defaults SVG to PNG rasterization

    Optimization

  95. 95 $ npm install grunt-respimg --save-dev

  96. 96

  97. 97

  98. David Newton, St. Michael’s Hospital 98 Using ImageMagick to resize

    your Images Full Stack Toronto, 2015-04-08 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides + image credits: https://github.com/nwtn/pres-imagemagick-fsto