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.

All Posts

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!