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

Using ImageMagick to resize your Images [WebPer...

Avatar for newtron newtron
March 18, 2015
Technology
840
2

Using ImageMagick to resize your Images [WebPerfTO]

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

Avatar for newtron

newtron

March 18, 2015

More Decks by newtron

See All by newtron
Universal web design [Accessibility Camp Toronto]
Avatar for newtron newtron
0
250
Universal web design [HackerYou a11y club]
Avatar for newtron newtron
0
240
Universal web design [Full Stack Toronto]
Avatar for newtron newtron
0
280
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
410
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
740
Universal Web Design: How to create an awesome experience for every user [OpenWest]
Avatar for newtron newtron
0
320
Improving performance with responsive (and responsible!) images [OpenWest]
Avatar for newtron newtron
2
400

Other Decks in Technology

See All in Technology
作って終わりじゃないサーバーレス 〜9年運用する大規模EC物流API基盤の設計・運用のリアル〜
Avatar for ZOZO Developers zozotech
PRO
0
220
データ_AIの事業の勝敗をわけるもの
Avatar for KJ(Kenji Matsuda) nek0128
1
460
AIエージェントの権限管理 3:  Agentic RAG の Fine grained access control 編
Avatar for Renya Kujirada ren8k
0
140
Railsのように考える: See through the Master
Avatar for Koji SHIMADA snoozer05
PRO
4
1.1k
事業課題から技術的負債に向き合う
Avatar for SansanTech sansantech
PRO
2
2k
Minecraft JavaのMODをSwiftで作る
Avatar for 1mash0 1mash0
0
180
「守り」で活用するオンデバイスLLM 〜写ってはいけないを総力戦で防ぐ〜 / iOSDC Japan 2026
Avatar for nakamuuu nakamuuu
0
180
山手線を徒歩で一周してわかった、 位置情報アプリは「足」が最強のデバッガー
Avatar for hinakko hinakko
0
170
What the customer really needed
Avatar for Yasunobu Kawaguchi kawaguti
PRO
3
210
AIエージェントの自己改善をどう設計するか / How to Design Self-Improvement for AI Agents
Avatar for 223 22mi
25
16k
その Lambda、8分で 管理者権限まで奪われます
Avatar for k1nakayama k1nakayama
6
3.1k
映像変換サーバーなしで端末内でHLSを生成してライブ配信
Avatar for HikaruSato hikarusato
0
130

Featured

See All Featured
HDC tutorial
Avatar for Michiel Stock michielstock
2
870
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
280
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
470
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
410
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Between Models and Reality
Avatar for mayunak mayunak
4
460
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
320
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
260
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
510
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k

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