Using ImageMagick to resize your Images [FSTO]

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

3.

3 Responsive images are a pain in the butt

7.

7 ImageMagick, y’all

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.

pixels…

16.

pixels… Background interpolation

17.

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.

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.

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.


40.

40 Adaptive resize Distort resize Geometry Interpolative resize Liquid rescale
Resize Sample Scale Thumbnail

41.


42.

42

43.

43

44.


45.

45

46.


47.

47 Fancy

48.

48 sharpening

49.


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.


54.

54

55.

55

56.

56

57.

57

58.

58

59.

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.


64.

64 quality 10 quality 40 quality 70 quality 100

65.


66.

66 metadata

67.


68.

68 progressive rendering

69.


70.

70

71.

71

72.

Progressive JPEGs Good? Evil? 72

73.

73 colour space

74.


75.

75

76.

76 The best* settings for ImageMagick

77.

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.

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.

difference My settings, optimization 218,274 bytes My settings, no optimization 259,852 bytes 19.05%

81.

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.

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.

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

Using ImageMagick to resize your Images [FSTO]

Using ImageMagick to resize your Images [FSTO]

Want more?

Transcript