Image optimisation

While designers usually share non-optimized images with developers, developers need to optimize them before storing in this git repository (for S3 storages linked to ImageKit you don't need to do it). This document describes tools and how to use them to optimize different formats of images.

Tools

1. SVG Optimization

   • Use SVGO for vector graphics (Web GUI for it: SVGOMG)

2. Raster Image Optimization

   • Use Squoosh.app for PNG and JPEG optimization
     • For JPEG: Use MozJPEG with 95% quality setting
     • For PNG: Use Squoosh's default PNG optimization

SVGO

When running npm run svgo, SVG files are optimized in two directories:

• resources/icons
• resources/img

The following svgo options are applied:

• --recursive - Process SVG files recursively.
• --multipass - Apply optimizations repeatedly until the output no longer differs from the previous step.
• --pretty - Produce readable and indented output.

SVGO makes use of the default preset, which includes a predefined set of plugins. We make minor customizations to this preset in the svgo.config.mjs file:

• removeViewBox: false - Retain the viewBox attribute in the SVG files, as this attribute is essential for responsive SVGs.