It is important to choose the right image format to avoid sending unnecessary bytes and thus save bandwidth. Moreover, vectors should be used instead of bitmaps as screens and resolutions continue to grow.
By doing so, the interface does not depend on the screen’s resolution. This also limits the technical debt.
The first rule is to replace bitmap images (GIF, PNG, JPEG, WebP, etc.) with styles (CSS), pictograms, glyphs or icons provided for by a web font or standard typeface. This prevents the user from having to download additional resources.
If you are unable to use CSS or a standard typeface (already installed on the user’s device), you could instead use:
- a web font
- standard .SVG vector images
This 198 x 198 px image is:
- 118 KB as an uncompressed bitmap
- 6.5 KB as a JPEG (90% compressed)
- 3.8 KB as a PNG
- 0.7 KB as a minified SVG
In this case, the vector is 5-10 times smaller than the bitmap and can also be resized indefinitely.