Up your Assets: Batch image scripting with ImageMagick

Images on the web need to look sharp on displays with very high DPI, while still small enough to download fast. When you have many assets, it becomes cumbersome to manually resize and export all of them.

With the new iPhone 6+, the need for "retina" alternative images is even bigger. Now you might even want to supply both a "@2x" image and a "@3x" image.

From my examples, you will be able to solve some common problems using ImageMagick's tools `convert`, `mogrify` and `identify`.

Transcript

1. UP YOUR ASSETS CASINO SAGA’S IMAGE ASSET WORKFLOW
2. ASSETS SIZE 77.7 MEGAPIXELS MAP
3. NORMAL, TILT-SHIFT ASSETS SIZE VERSIONS 1.4 MEGAPIXELS REGIONS 40 FILES
4. FULL, CLOSEUP ASSETS SIZE VERSIONS 10 MEGAPIXELS HERO AVATARS 10 FILES
5. FULL, CLOSEUP, MEDIUM CLOSEUP, CAGE ASSETS SIZE VERSIONS UP TO 46 MEGAPIXELS BOSS AVATARS 40 FILES
6. ASSETS SIZE 190 * 160 PX GAME THUMBNAILS 240 FILES
7. PROBLEM
8. WE NEED SEVERAL HERO SIZES WANTED: BATCH RESIZING TOOL
9. ImageMagick: `mogrify`
10. ImageMagick: `mogrify` Batch convert files to a destination Tip: Make all avatars same size `hero-full.sh`
11. hero-full.sh
12. Retina Add a folder “WxH@2x” Resize into twice the size Let frontend detect whether to use retina images
13. “3x retina” For iPhone 6+ and other devices with high density Resize into three times the size
14. PROBLEM
15. IMAGE RESIZES LOOK BLURRY WANTED: BEST SHARPENING ALGORITHM
16. Sharpening Tip: Resize first, sharpen later Visual comparison: Sharpening methods Note: Perceptual (subjective) matter Note: Sharpness demands vary
17. PROBLEM
18. BOSSES HAVE DIFFERENT ASPECTS WANTED: BEST RESIZING METHOD
19. METHOD PROS CONS BY MAX HEIGHT MOGRIFY -RESIZE 999X160
20. VERY DIFFERENT SIZE RESULTS METHOD PROS CONS HEIGHT IS KNOWN (CSS) BY MAX HEIGHT MOGRIFY -RESIZE 999X160
21. METHOD PROS CONS BY TOTAL NUMBER OF PIXELS MOGRIFY -RESIZE @20000
22. EXTREMELY HARD TO KNOW DIMENSIONS METHOD PROS CONS AVATARS VERY EVEN IN SIZE BY TOTAL NUMBER OF PIXELS MOGRIFY -RESIZE @20000
23. METHOD PROS CONS BY DIMENSIONS CONSTRAINT MOGRIFY -RESIZE 120X160
24. NOT PERFECT DIMENSION-WISE METHOD PROS CONS EASY TO FIT (CSS) BY DIMENSIONS CONSTRAINT MOGRIFY -RESIZE 120X160
25. PROBLEM
26. BOSSES HAVE DIFFERENT BASELINE WANTED: FITTING TOP-MARGIN AND CENTRING
27. ImageMagick: `identify`
28. ImageMagick: `identify -f “format”` CSS LESS HTML JSON
29. Identify: CSS identify -format “FORMAT” .%t {
 width:%[w]px;
 height:%[h]px;
 }
30. Identify: LESS identify -format “FORMAT” .generate-max(
 $width, $height,
 %t, %w, %h
 );
31. Identify: LESS identify -format “FORMAT” .generate-max(
 $width, $height,
 %t, %w, %h
 );
32. `IDENTIFY` AND LESS SAVE THE DAY PADS WITH INDIVIDUAL MARGIN FOR ALL IMAGES
33. Identify: HTML identify -format “FORMAT” <p>
 <span>%w x %h</span>
 <img src=“%f”>
 </p>
34. Identify: HTML identify -format “FORMAT” <p>
 <span>%w x %h</span>
 <img src=“%f”>
 </p> • Generate a size report for an export
35. Identify: JSON identify -format “FORMAT” {
 “filename": "%f",
 “width": "%w",
 “height": "%h"
 },
36. Identify: JSON identify -format “FORMAT” {
 “filename": "%f",
 “width": "%w",
 “height": "%h"
 }, • Which image is widest?
 images.sort(function(a, b){
 return a.width - b.width;
 });
 • Which image has most pixels?
 images.sort(function(a, b) {
 return a.width * a.height -
 b.width * b.height;
 });
37. PROBLEM
38. PNG AVATARS ARE LARGE IN FILE SIZE WANTED: BEST COMPRESSION ALGORITHM
39. CODEC METHOD CONS PNG LOSSLESS ZLIB COMPRESSION
40. LARGE FILESIZE FOR PHOTOS CODEC METHOD CONS FILTERING + DEFLATE PNG LOSSLESS ZLIB COMPRESSION
41. CODEC METHOD CONS 8-BIT PNG LOSSLESS ZLIB COMPRESSION
42. VISUAL ARTEFACTS WITH LARGER FILES CODEC METHOD CONS REDUCES PALETTE 8-BIT PNG LOSSLESS ZLIB COMPRESSION original 256 128 64 32
43. VISUAL ARTEFACTS WITH LARGER FILES CODEC METHOD CONS REDUCES PALETTE 8-BIT PNG LOSSLESS ZLIB COMPRESSION 118K 38K 31K 26K 21K
44. PNG color-reduction tools ImageAlpha (Mac) pngquant pngnq-s9 mediancut-posterizer
45. CODEC METHOD CONS WEBP LOSSY AND LOSSLESS, WITH ALPHA CHANNEL original WebP
46. LOW CROSS BROWSER SUPPORT CODEC METHOD CONS SEVERAL WEBP LOSSY AND LOSSLESS, WITH ALPHA CHANNEL 118K 18K
47. CODEC METHOD CONS JNG JPEG WITH PNG ALPHA CHANNEL INSIDE SVG original JNG
48. SAFARI REQUIRES AJAX WORKAROUND CODEC METHOD CONS <IMAGE MASK=“URL(#M)” JNG JPEG WITH PNG ALPHA CHANNEL INSIDE SVG 118K 60K
49. UP YOUR ASSETS
50. <CS-AVATAR SIZE=“320X240” TYPE=“HERO- FULL” KEY=“DWARF”></CS-AVATAR>