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

Using ImageMagick to resize your Images [WebPer...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
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
750
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
SREでアラート疲れを 解決しよう！
Avatar for KairiM kairim0
1
230
脆弱性診断って、何をしているの？ 〜弱点を見つけて、会社の改善につなげるまで〜
Avatar for KeeG keeg
0
880
転んだ話が背中を預ける理由になる / A_story_about_falling_down_gives_you_a_reason_to_watch_each_other_s_backs.pdf
Avatar for Pauli pauli
3
360
AI 時代の Azure エンジニアリング ～ 私たちは何を磨き、何を任せるのか ～
Avatar for Akira Inoue chack411
1
590
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
7
2.9k
AIがコードを書く時代に、エンジニアは何で自分の価値を証明するのか / In an era where AI writes code how do engineers prove their value
Avatar for CARTA Engineering carta_engineering
3
860
ブラウザとサーバーから考えるAI時代のフロントエンド監視
Avatar for Shogo Fukami shogo4131
3
860
子育てエンジニアの可処分時間が減っても成長を諦めない戦い方
Avatar for aki sudoakiy
6
4.5k
「事実」を「計測」して、「解釈」する 〜AWS Lambdaのメモリ最適解の見つけ方〜
Avatar for maimyyym maimyyym
0
140
hackers_champloo_2026_tidb
Avatar for makocchi makocchi
0
140
Snapshot Testing in Practice: Predictable and Reliable SwiftUI Views
Avatar for Felipe Espinoza fespinoza
0
200
ハードウェアコンペでもAI駆動開発が進んでいる話
Avatar for misoji engineer iotengineer22
1
690

Featured

See All Featured
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
320
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
5.2k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
620
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
570
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
970
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
600
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
430

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