Return to site

GREEN IT Developer 🌍💚: Avoid using bitmap images for the interface

· greenIT

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.