Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Using ImageMagick to resize your Images [GTA PHP]
newtron
April 07, 2015
Technology
0
240
Using ImageMagick to resize your Images [GTA PHP]
GTA PHP User Group,
2015-04-07
https://github.com/nwtn/pres-imagemagick-gtaphp
newtron
April 07, 2015
Tweet
Share
More Decks by newtron
See All by newtron
Universal web design [Accessibility Camp Toronto]
newtron
0
110
Universal web design [HackerYou a11y club]
newtron
0
120
Universal web design [Full Stack Toronto]
newtron
0
100
Information architecture as knowledge translation [World IA Day]
newtron
0
170
Improving performance with responsive (and responsible!) images [CSSDay.io]
newtron
1
240
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
newtron
0
180
Improving performance with responsive (and responsible!) images [CSSConf]
newtron
6
460
Universal Web Design: How to create an awesome experience for every user [OpenWest]
newtron
0
170
Improving performance with responsive (and responsible!) images [OpenWest]
newtron
2
260
Other Decks in Technology
See All in Technology
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
pastelinc
0
760
雑な攻撃からELBを守る一工夫 +おまけ / Know-how to protect servers from miscellaneous attacks
hiroga
0
340
1人目QAエンジニアよもやま話 / QA Test Talk Vol.1
nametake
4
220
What's new in Vision
satotakeshi
0
140
#JP_Stripes Sapporo Stripeの活用例を色々ご紹介します!
miu_crescent
0
100
PUTとPOSTどっち使う?
hankehly
0
170
データをモデリングしていたら、組織をモデリングし始めた話 / engineers-in-carta-vol3-data-engineer
pei0804
4
3.2k
音のような言葉 〜ちゃちゃっとチャットで楽しむちょっとしたコツ〜 / words like sounds
satoryu
1
1.3k
ソフトウェアライセンス 2022 / Software License 2022
cybozuinsideout
PRO
1
860
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
ritou
2
410
2022年度新卒技術研修「良いコードの書き方」講義
excitejp
PRO
0
230
NFT(非代替性トークン)、DeFi(分散金融) の虚像と実像 / NFT (Non-Fungible Token), DeFi (Decentralized Finance): False and Real Images
ks91
PRO
0
240
Featured
See All Featured
Done Done
chrislema
174
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Designing Experiences People Love
moore
130
22k
Scaling GitHub
holman
451
140k
Music & Morning Musume
bryan
35
4.2k
Faster Mobile Websites
deanohume
294
28k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Atom: Resistance is Futile
akmur
255
20k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Transcript
David Newton, St. Michael’s Hospital 1 1 Using ImageMagick to
resize your Images GTA PHP User Group, 2015-04-07 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides + image credits: https://github.com/nwtn/pres-imagemagick-gtaphp
2
3 Responsive images are a pain in the butt
4
5
6
7 ImageMagick, y’all
8
9 $ brew install imagemagick
10 $ brew install php56-imagick
11 $ apt-get install php-imagick
12 Condition (unoptimized input) File size: mean File size: %
difference Photoshop CC, with optimization 260,305 bytes ImageMagick `-resize` 385,795 bytes 48.21%
13 How does image resizing work?
14 685,936 pixels 189,739 pixels
15 …to 64 pixels? How do we get from 16
pixels…
16 != resampling
17 …to 64 pixels? How do we get from 16
pixels…
18 …to 64 pixels? How do we get from 16
pixels… Background interpolation
19 …to 64 pixels? How do we get from 16
pixels… Nearest-neighbour interpolation
20 Nearest-neighbour interpolation
21 Bicubic interpolation
22 Nearest-neighbour vs. bicubic interpolation
23 7 colours 1,146 colours
24
More colours = More bytes* 25
26 https://github.com/nwtn/image-resize-tests/
27 How do we know which options are best?
Quality objective: measured with DSSIM 28
29 Control Test Difference
30
Quality subjective: from me 31
Test a variety of images 32
33 The best* settings for ImageMagick
34 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:
35 https://github.com/toy/image_optim https://github.com/ajslater/picopt https://imageoptim.com/
36 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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:
37 mogrify vs. convert
38
39 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
40 resampling filter
41 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
42 Adaptive resize Distort resize Geometry Interpolative resize Liquid rescale
Resize Sample Scale Thumbnail
43 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
44
45
46 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
47
48 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
49 Fancy
50 sharpening
51 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
52 -unsharp 0.25x0.25+8+0.045 radius sigma gain threshold
53 -unsharp 0.25x0.25+8+0.045 radius sigma gain threshold
54 colour reduction
55 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
56
57
58
59
60
61 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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:
62 7 colours 1,146 colours
63 7 colours 7 colours
64 quality and compression
65 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
66 quality 10 quality 40 quality 70 quality 100
67 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
68 metadata
69 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
70 progressive rendering
71 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
72
73
Progressive JPEGs Good? Evil? 74
75 colour space
76 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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
77
78 The best* settings for ImageMagick
79 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:
80 mogrify -path OUTPUT_PATH -filter Triangle - define filter:support=2.0 -thumbnail
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:
81 Why even bother?
82 Condition (unoptimized input) File size: mean File size: %
difference My settings, optimization 218,274 bytes My settings, no optimization 259,852 bytes 19.05%
83 Condition (unoptimized input) File size: mean File size: %
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%
84 Condition (unoptimized input) File size: mean File size: %
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%
85 Condition (unoptimized input) File size: mean File size: %
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%
86 PHP Imagick
87
88
89 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() ✔ ✔
90
91 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() ✔ ✔
92 OK… but it’s still a pain in the butt
93 https://github.com/nwtn/php-respimg/ Resizing with smart defaults + more coming soon?
94
95 https://www.npmjs.com/package/grunt-respimg Resizing with smart defaults SVG to PNG rasterization
Optimization
96 $ npm install grunt-respimg --save-dev
97
98
David Newton, St. Michael’s Hospital 99 Using ImageMagick to resize
your Images GTA PHP User Group, 2015-04-07 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides + image credits: https://github.com/nwtn/pres-imagemagick-gtaphp