@urre 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
Happy optimizations!
