Optimize Images

We recently made some optimizations in our resources library. There were a lot of unoptimized images, adding extra weight. After a while this piles up and adds upp to quite a few megabytes of images files. In addition to optimizations, it is important to carefully choose which format to use. Use SVG for vector based graphics, and JPG for (nearly) everything else. The use of a CDN is of course also very good to speed up delivery in different regions.

This is a quick post about some tools and commands for optimizing images.

File and folder sizes

Some commands to quickly locate and collect info about image sizes.

Find all svg images in the current folder

find . -type f | grep '.svg'

Get total size of all .svg images in the current folder

find . -type f -name '*.svg' -exec du -ch {} + | grep total$
1,7M    total

If you want to check the size of a folder:

du -sh  images/
(6.3 M)

Optimize SVG images

I’m using SVG Optimizer, a Nodej.s-based tool for optimizing SVG vector graphics files.

Install SVGO

npm install -g svgo

svgo *.svg

Output:

logo.svg:
Done in 28 ms!
17.751 KiB - 40.4% = 10.58 KiB

illustration.svg:
Done in 42 ms!
17.136 KiB - 5.6% = 16.168 KiB

badge.svg:
Done in 36 ms!
38.621 KiB - 56.8% = 16.702 KiB

Optimize jpg images

Install imageoptim-cli

npm i -g imageoptim-cli

I’m using imageoptim together with jpgmini (jpgmini or jpgmini light has to be installed)

imageoptim --jpegmini --quality 50-75 '**/*.jpg'

Output:

✓ house.jpg was: 9.78kB now: 7.46kB saving: 2.32kB (23.73%)
✓ cat.jpg was: 437kB now: 397kB saving: 40kB (9.16%)
...
✓ TOTAL was: 12.97MB now: 5.83MB saving: 7.14MB (44.94%)
✓ Finished

Optimize png images

Image Optim automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch optimisation of images part of your automated build process.

Install imageoptim-cli

npm i -g imageoptim-cli

Optimize png images in our current folder

imageoptim --imagealpha '**/*.png'

Output:

->  imageoptim --imagealpha 'diamonds.png'
i Running ImageAlpha...
i Running ImageOptim...
✓ diamonds.png was: 45.2kB now: 19.9kB saving: 25.3kB (55.94%)
✓ TOTAL was: 45.2kB now: 19.9kB saving: 25.3kB (55.94%)
✓ Finished

Resize

If you have large png images that need to be resized to a smaller size or ratio, we can batch resize them.

Use Mogrify from ImageMagick to resize all png images in the current folder (and subfolders) to 1280px. This also preserves the aspect ratio.

find . -name '*.png' -execdir mogrify -format png -resize 1280\> {} \;

WebP

WebP?

WebP is a modern image format developed by Google, that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

Let’s use the official cwebp encoder.

brew install webp

cwebp -q 75 diamonds.png -o output.webp

This command takes a PNG and outputs it to lossy WebP by way of the -o parameter. By default, the encoder outputs lossy WebP images, and the quality of the output can be set from 0 to 100 via the -q parameter. The default lossy quality setting is 75.

Output:

Saving file 'output.webp'
File:      diamonds.png
Dimension: 1200 x 1200
Output:    4520 bytes Y-U-V-All-PSNR 55.80 99.00 99.00   57.57 dB
           (0.03 bpp)
block count:  intra4:        461  (8.20%)
              intra16:      5164  (91.80%)
              skipped:      4450  (79.11%)
bytes used:  header:             57  (1.3%)
             mode-partition:   2806  (62.1%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       0%|       0%|       0%|      100%|    5625
      quantizer:  |      36 |      36 |      33 |      26 |
   filter level:  |      11 |       8 |       6 |       4 |

We can also use alpha transparency using the -alpha_q option:

cwebp -q 75 -alpha_q 10 source.png -o output.webp

Update 8 May 2024

These are more great tools you should check out:

• image Compressor
• SVGOMG
• Sqoosh

Happy optimizations!