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

Using ImageMagick to resize your Images [WebPer...

Avatar for newtron newtron
March 18, 2015
Technology
820
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
230
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
310
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
300
Improving performance with responsive (and responsible!) images [CSSConf]
Avatar for newtron newtron
6
730
Universal Web Design: How to create an awesome experience for every user [OpenWest]
Avatar for newtron newtron
0
300
Improving performance with responsive (and responsible!) images [OpenWest]
Avatar for newtron newtron
2
390

Other Decks in Technology

See All in Technology
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
FDE という解 ― 暗黙知と明示知をつなぐ、伴走型エンジニアリング ―
Avatar for 太田 博三 otanet
0
150
【Cyber-sec+】経営層を"動かす"ための考え方
Avatar for Hisashi Hibino hssh2_bin
0
160
機械学習を「社会実装」するということ 2026年夏版 / Social Implementation of Machine Learning June 2026 Version
Avatar for Moe Uchiike（内池 もえ） moepy_stats
5
1.9k
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
930
protovalidate-es を導入してみた
Avatar for 弁護士ドットコム bengo4com
0
180
SONiCで構築・運用する生成AI向けパブリッククラウドネットワーク ～実装編～
Avatar for SONiC Users Group Japan sonic
0
110
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
2k
Snowflakeと仲良くなる第一歩
Avatar for あべ coco_se
4
440
2026TECHFRESH畢業分享會 - 葬送的通靈師：化系統與用戶雜訊成行動訊號
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
920
あなたの AI ワークスペースに、 専門コーダーを連れてくる - Amazon Quick Desktop 最新情報
Avatar for kawaji kawaji_scratch
1
130
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.9k

Featured

See All Featured
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
360
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
22k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
540
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
250
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
65
55k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
160

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