Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Optimising Product Images with ImageMagick for Web on Your Local Computer

Guide to Locally Optimising Product Images For Web with Image Magick

All tools for image formatting, compression, and rule-based/bulk processing should be tested for quality before being put into active use.

We spend quite a deal of time and effort to make images that look really great, and it’s silly to throw that away just because the bulk-processing tool at the last step is convenient. Because customer experience and our site’s performance both depend a lot on the speed of the page, we should do everything possible to balance image-quality and image-size concerns.

By processing, resizing, and compressing these images, we can compare any new tools back against the originals and against a full-quality photoshop export w/ the same constraints (the .psd file is there too).

Processes we’ve tested:

  • ImageMagik
  • Pillow
  • Photoshop
  • ShortPixel (glossy compression only)

Things to note when evaluating tests are:

  • Changes in color
  • Pixelization/artifacts being brought in, especially around the edges of images
  • Pixelization/artifacts being brought in, especially for certain colors
  • Loss of quality in small details
  • Color Space and Color Profile changes

Requirements:

You need to have ImageMagick installed locally: brew install imagemagick You may also need to have rename installed, which can be done through: brew install rename

What We're Doing

We're optimising product images on three fronts:

  • We're resizing them to fit different use cases, such as for a results grid, as thumbnails, and as product/magnified images. This ensures that we're never forcing a user to load bigger files than they have to.
  • We're creating two versions of each image -- one for regular screens, and one for retina screens. We use retina.js to load in retina images where appropriate.
  • We're optimising the image weight (size), as images tend to be the heaviest part of any page, and we can make real gains here (especially given that we're working with high quality, hi res images from the photostudio.

The Script:

You can run this in any directory. Just make sure that the "original" image you're optimising are in a subdirectory named "original".

In your terminal, type the following:

rsync -avr original/* grid/ &&
 rsync -avr original/* grid2x/ &&
 rsync -avr original/* product/ &&
 rsync -avr original/* product2x/ &&
 rsync -avr original/* altviews2x/ &&
 rsync -avr original/* altviews/ &&
 magick mogrify -density 72 -thumbnail 1100x1100 -filter Triangle -define filter:support=2 -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 product2x/*.jpg &&
 magick mogrify -density 72 -thumbnail 550x550 -filter Triangle -define filter:support=2 -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 product/*.jpg &&
 magick mogrify -density 72 -thumbnail 750x750 -filter Triangle -define filter:support=2 -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 grid2x/*.jpg &&
 magick mogrify -density 72 -thumbnail 375x375 -filter Triangle -define filter:support=2= -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 grid/*.jpg &&
 magick mogrify -density 72 -thumbnail 160x160 -filter Triangle -define filter:support=2= -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 altviews2x/*.jpg &&
 magick mogrify -density 72 -thumbnail 80x80 -filter Triangle -define filter:support=2= -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 altviews/*.jpg &&
 rename "s/.jpg/-grid\x402x.jpg/" grid2x/*.jpg &&
 rename "s/.jpg/-grid.jpg/" grid/*.jpg &&
 rename "s/.jpg/-product\x402x.jpg/" product2x/*.jpg &&
 rename "s/.jpg/-product.jpg/" product/*.jpg &&
 rename "s/.jpg/-altview\x402x.jpg/" altviews2x/*.jpg &&
 rename "s/.jpg/-altview.jpg/" altviews/*.jpg &&
 mkdir -p optimised/product &&
 mkdir optimised/grid &&
 mkdir optimised/altviews &&
 mv grid2x/* optimised/grid/ &&
 mv grid/* optimised/grid/ &&
 mv product2x/* optimised/product/ &&
 mv product/* optimised/product/ &&
 mv altviews2x/* optimised/altviews/ &&
 mv altviews/* optimised/altviews/ &&
 rm -r product &&
 rm -r product2x &&
 rm -r grid &&
 rm -r grid2x &&
 rm -r altviews &&
 rm -r altviews2x

For filesize comparison, I've included a screenshot of my directory after the script runs below.

Optimising the Optimization

I've included the script above as a shell script that you can save and run locally. It is commented for what each step does, and which variables to modify. To run it, execute the following command in the correct directory in your terminal (no $):

$ chmod +x optimise.sh # This will make your script executable. You only need to type this once to modify permissions.

$ ./optimise.sh # This will run the script.


Further Reading:

https://www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/ (Cribbed a lot of the mogrify options here.)

#!/bin/sh
############
#
# To run this script, type the following (no $):
#
# $ chmod +x optimise.sh # This will make your script executable. You only need to type this once to modify permissions.
# $ ./optimise.sh "Your optional commit message" # This will actually run the code.
#
# You can run this in any directory. Just make sure that the "original" image you're optimising are in a subdirectory named "original"
#
############
# Just a tooltip to let you know the script is running.
printf "\033[0;32m ... Starting to optimise images...\033[0m\n"
# The script.
rsync -avr original/* grid/ &&
rsync -avr original/* grid2x/ &&
rsync -avr original/* product/ &&
rsync -avr original/* product2x/ &&
rsync -avr original/* altviews2x/ &&
rsync -avr original/* altviews/ &&
magick mogrify -density 72 -thumbnail 1440x1440 -filter Triangle -define filter:support=2 -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 product2x/*.jpg &&
magick mogrify -density 72 -thumbnail 720x720 -filter Triangle -define filter:support=2 -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 product/*.jpg &&
magick mogrify -density 72 -thumbnail 750x750 -filter Triangle -define filter:support=2 -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 grid2x/*.jpg &&
magick mogrify -density 72 -thumbnail 375x375 -filter Triangle -define filter:support=2= -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 grid/*.jpg &&
magick mogrify -density 72 -thumbnail 116x116 -filter Triangle -define filter:support=2= -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 altviews2x/*.jpg &&
magick mogrify -density 72 -thumbnail 58x58 -filter Triangle -define filter:support=2= -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 altviews/*.jpg &&
rename "s/.jpg/-grid\x402x.jpg/" grid2x/*.jpg &&
rename "s/.jpg/-grid.jpg/" grid/*.jpg &&
rename "s/.jpg/-product\x402x.jpg/" product2x/*.jpg &&
rename "s/.jpg/-product.jpg/" product/*.jpg &&
rename "s/.jpg/-altview\x402x.jpg/" altviews2x/*.jpg &&
rename "s/.jpg/-altview.jpg/" altviews/*.jpg &&
mkdir -p optimised/product &&
mkdir optimised/grid &&
mkdir optimised/altviews &&
mv grid2x/* optimised/grid/ &&
mv grid/* optimised/grid/ &&
mv product2x/* optimised/product/ &&
mv product/* optimised/product/ &&
mv altviews2x/* optimised/altviews/ &&
mv altviews/* optimised/altviews/ &&
rm -r product &&
rm -r product2x &&
rm -r grid &&
rm -r grid2x &&
rm -r altviews &&
rm -r altviews2x
printf "\033[0;32m ... And you're done!\033[0m\n"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment