Using ImageMagick to resize your Images [WebPerfTO]

C3e8ba214714b1402f3073334249fcdc?s=47 newtron
March 18, 2015
Technology
2
240

Using ImageMagick to resize your Images [WebPerfTO]

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

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

March 18, 2015
Tweet

Want more?

C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
55
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
47
C3e8ba214714b1402f3073334249fcdc?s=48 newtron
0
49
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
30
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
2
87
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
140
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
1
200
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
360
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
100
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
190
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
60
250k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
5
770

Transcript

  1. 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: david@davidnewton.ca Slides + image credits: https://github.com/nwtn/pres-imagemagick-webperfto
  2. 2.

    2

  3. 3.

    3 Responsive images are a pain in the butt

  4. 4.

    4

  5. 5.

    5

  6. 6.

    6

  7. 7.

    7 ImageMagick, y’all

  8. 8.

    8

  9. 9.

    9 $ brew install imagemagick

  10. 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.

    11 How does image resizing work?

  12. 12.

    12 685,936 pixels 189,739 pixels

  13. 13.

    13 …to 64 pixels? How do we get from 16

    pixels…
  14. 14.

    14 != resampling

  15. 15.

    15 …to 64 pixels? How do we get from 16

    pixels…
  16. 16.

    16 …to 64 pixels? How do we get from 16

    pixels… Background interpolation
  17. 17.

    17 …to 64 pixels? How do we get from 16

    pixels… Nearest-neighbour interpolation
  18. 18.

    18 Nearest-neighbour interpolation

  19. 19.

    19 Bicubic interpolation

  20. 20.

    20 Nearest-neighbour vs. bicubic interpolation

  21. 21.

    21 7 colours 1,146 colours

  22. 22.

    22

  23. 23.

    More colours = More bytes* 23

  24. 24.

    24 https://github.com/nwtn/image-resize-tests/

  25. 25.

    25 How do we know which options are best?

  26. 26.

    Quality objective: measured with DSSIM 26

  27. 27.

    27 Control Test Difference

  28. 28.

    28

  29. 29.

    Quality subjective: from me 29

  30. 30.

    Test a variety of images 30

  31. 31.

    31 The best* settings for ImageMagick

  32. 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.

    33 https://imageoptim.com/

  34. 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.

    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.

    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.

    37 Adaptive resize Distort resize Geometry Interpolative resize Liquid rescale

    Resize Sample Scale Thumbnail
  38. 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.

    39 (x1 ,y2 ) (x2 ,y2 ) (x1 ,y1 )

    (x2 ,y1 ) (x,y) = + + +
  40. 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.

    41

  42. 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.

    43 Fancy

  44. 44.

    43 Fancy

  45. 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. 46.

    45 -unsharp 0.25x0.08+8.3+0.045 radius sigma gain threshold

  47. 47.

    46 -unsharp 0.25x0.08+8.3+0.045 radius sigma gain threshold

  48. 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. 49.

    48

  50. 50.

    49

  51. 51.

    50

  52. 52.

    51

  53. 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. 54.

    53

  55. 55.

    More colours = More bytes* 54

  56. 56.

    55

  57. 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. 58.

    57 quality 10 quality 40 quality 70 quality 100

  59. 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. 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. 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. 62.

    61

  63. 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. 64.

    63

  65. 65.

    63

  66. 66.

    64

  67. 67.

    64

  68. 68.

    65 Progressive JPEGs Good? Evil?

  69. 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. 70.

    67

  71. 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. 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. 73.

    70 Why even bother?

  74. 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. 75.

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

  76. 76.

    73 https://www.npmjs.com/package/grunt-respimg

  77. 77.

    74 Resizing with smart defaults SVG to PNG rasterization Optimization

  78. 78.

    75 npm install grunt-respimg --save-dev

  79. 79.

    76

  80. 80.

    77

  81. 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: david@davidnewton.ca Slides + image credits: https://github.com/nwtn/pres-imagemagick-webperfto