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
Fo example a 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.