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
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
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.
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.
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.
https://www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/ (Cribbed a lot of the mogrify options here.)
