Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Using ImageMagick to resize your Images [FSTO]

Avatar for newtron newtron
April 08, 2015
Technology
490
0

Using ImageMagick to resize your Images [FSTO]

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

Avatar for newtron

newtron

April 08, 2015

More Decks by newtron

See All by newtron
Universal web design [Accessibility Camp Toronto]
Avatar for newtron newtron
0
260
Universal web design [HackerYou a11y club]
Avatar for newtron newtron
0
240
Universal web design [Full Stack Toronto]
Avatar for newtron newtron
0
290
Information architecture as knowledge translation [World IA Day]
Avatar for newtron newtron
0
320
Improving performance with responsive (and responsible!) images [CSSDay.io]
Avatar for newtron newtron
1
420
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
Avatar for newtron newtron
0
310
Improving performance with responsive (and responsible!) images [CSSConf]
Avatar for newtron newtron
6
760
Universal Web Design: How to create an awesome experience for every user [OpenWest]
Avatar for newtron newtron
0
330
Improving performance with responsive (and responsible!) images [OpenWest]
Avatar for newtron newtron
2
410

Other Decks in Technology

See All in Technology
Metadata - Section 3 : Dublin Core Standard · DC
Avatar for mohab soliman mohab1
0
110
デザインレビューは自動化できるのか？─ Flutter × Figma で UI 品質保証を考える
Avatar for Hirokazu Tanaka techiro
2
820
TSKaigi Sendai 2026 - tsgo時代のTypeScript Playgroundはどう動くか
Avatar for teamLab teamlab
PRO
0
110
基本から分かる！AWSセキュリティ運用の考え方と任せ方
Avatar for cm-usuda-keisuke cmusudakeisuke
1
450
[JAWS Festa 2026]一番いい仕事は、請求書に現れない / jawsfesta2026
Avatar for sh_fk2 sh_fk2
2
360
AIコーディングはじめました
Avatar for 田中みそ miso
0
150
推論基盤と Scale-Up Interconnect の現状と制約から俯瞰する技術動向
Avatar for Masayuki Kobayashi markunet
2
840
あなたのDartコードは丸見えかもしれない ～reFlutterで暴くFlutterアプリの中身と多層防御～
Avatar for ZOZO Developers zozotech
PRO
0
780
なぜ東京にいる私が、新潟の技術コミュニティを運営するのか by 八雲慎之助
Avatar for やくも yakumo
0
220
HQ駆動開発で最高のAI-Contextを作ろう
Avatar for SansanTech sansantech
PRO
1
110
「いつか使う」の「いつか」は来ない 〜AI駆動開発における「作らない」判断について〜
Avatar for Kazuki Sakamoto/ikki0006 ikki0006
0
150
自律的なチームを作るためにTechPMがやらないこと
Avatar for Naoki Yoshitake ny7760
1
530

Featured

See All Featured
HDC tutorial
Avatar for Michiel Stock michielstock
2
1k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
600
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.2k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
460
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
380
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
5
55k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
3k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.6k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
630

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: [email protected] 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: [email protected] Slides + image credits: https://github.com/nwtn/pres-imagemagick-fsto