Image Compression Tutorial

Why

In order to keep the extension size small and reduce loading times, we need to compress image files.

is it a photo or a regular shape?
- photo:
- regular shape:
use JPEG for photos.
use SVG for regular shapes. SVGs are smaller than PNGs and can be infinitely scaled without losing quality.
- SVGs with lots of details and effects, such as drop shadows, can be larger than PNGs. Make sure to compare the PNG file size to the transport-compressed SVG file size (gzip, or on our server even Brotli). By transferred data, the SVG is a usually a lot smaller (at better quality) than the PNG. SVGOMG shows gzip-compressed SVG file sizes by default.
use PNG for regular shapes we cannot get as SVGs.

check that the SVG file is not a fake SVG that only wraps a JPEG or PNG file.
- Fake SVGs can be spotted by their unusually large size. E.g. when most SVGs are 3-10kB but one is 40-300kB.
- Open suspected fake SVGs in a text editor and check for something like <image ... xlink:href="data:image/png;base64,iVBORw0KGgoA..., which means it's a fake SVG.
- Fake SVGs should be replaced with a real SVG or converted to PNG/JPEG. You can copy the full data:... string and enter it in your browser's URL bar. Then save the PNG/JPEG with File > Save Page as....
Compress SVGs with SVGOMG.

check the image file's resolution. Can it be downsampled or do we really need a 2,000 x 2,000px logo?
- to find out the desired resolution, inspect the DOM element's size and multiply it by 2 (since CSS pixels shown in the inspector don't correspond to image pixels on modern high-resolution displays):
  - Here the PNG should be 134px * 2 x 60px * 2 = 268px x 120px large.

first compress the PNG with tinypng (➡️ instructions).
then compress it with ImageOptim (➡️ instructions). Skip this step if you cannot run ImageOptim. TinyPNG is the more important compression.
optional: repeat this process at least once for up to 10% extra savings.

carefully compare the compressed files with their originals, e.g. in an image viewer or your browser. Github's pull request pages also offer a good interface for this but if you can, don't commit large originals in the first place so the repo doesn't get blown out of proportion.

if you're on a Mac, you can download ImageOptim to compress PNGs (lossless) and JPEGs (slightly lossy).
my settings are as follows:
JFYI:
- ImageOptim replaces files that you drag into it. Make sure to only feed it copies or files under git version control so you don't lose the uncompressed originals.

jakearchibald.github.io/svgomg
zoom into the image by holding Command + mouse wheel
drag the "number precision" and "transform precision" sliders all the way to the left
toggle the "show original" switch back and forth to check for changes
- usually there will be slight or very noticeable geometry changes. Gaps might appear or shapes can be altered. Only very simple SVGs have no changes when the sliders are all the way to the left.
increase the "number precision" slider to the right. Step by step until no changes to the original appear anymore, or the changes are so minimal that they won't matter for your purposes (e.g. if the image is shown at only very small sizes):
1. Number precision 0: changed geometry:
2. Number precision 1: with gaps:
3. Number precision 2: all good now:
download the file and make extra sure "show original" is not active because if it is the original, uncompressed file will be downloaded. If you can see how much smaller the new file is next to the download button everything is fine:
I leave all other settings at their default. Some might save additional space but then you risk having a broken SVG in some browsers.