Image Compression Tutorial

• in order to keep the extension size small, it's best practice to compress newly added images (PNG, JPEG, SVG).
• previous PRs: https://github.com/getAlby/lightning-browser-extension/pull/1827 and https://github.com/getAlby/lightning-browser-extension/pull/1834

Recommended Workflow

1. Check the image file's format. SVG should be used wherever we can. a. Make sure it's a real SVG file by looking at its source (SVGs can contain embedded JPEGs).
2. For raster images (i.e. non-SVGs), check the image file's resolution. Can it be downsampled or do we really need a 2,000 x 2,000px logo?
3. Compress all PNGs and JPEGs with ImageOptim.
4. Compress larger PNGs (> 30kB) with tinypng.com and then ImageOptim.
5. Compress SVGs with SVGOMG.
6. Carefully compare the compressed files with their originals, e.g. in Preview 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.

ImageOptim

• if you're on a Mac, you can download ImageOptim to compress PNGs (lossless) and JPEGs (slightly lossy).
• my settings are as follows:
  1. 
  2. 
  3. 
• 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.
• compare files with originals via Preview, browser, or Github PR page.

tinypng.com

• drag and drop diles into it
• check compression rate
• download files
• compress images with ImageOptim, which usually saves a few more bytes.
• compare files with originals via Preview, browser, or Github PR page.

SVGOMG

• 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.