1. Accueil
  2. Écoconception Web
  3. 76 - Optimiser les images bitmap

N°76 - Optimiser les images bitmap

Objectif
Solution technique
Les images bitmap représentent souvent la majorité des octets téléchargés, juste avant les librairies CSS et Javascript. Leur optimisation est donc cruciale pour réduire la bande passante consommée. La première étape consiste à choisir le bon format entre bitmap (JPEG, PNG, GIF, etc.) et vectorielle (SVG). Les images bitmap / matricielles doivent être réservées essentiellement aux photos et aux éléments de l'interface qui ne peuvent pas être pris en charge par des icônes ou des styles CSS. Le choix du format bitmap dépend ensuite des caractéristiques de l'image : noir et blanc ou couleur, palette de couleurs, besoin de transparence, etc. Parmi ces caractéristiques, le fait de pouvoir dégrader l'image définitivement (lossy) oriente plutôt vers les formats JPEG et Webp (Google) tandis qu'un besoin de transparence et / ou l'impossibilité de dégrader l'image (lossless) orientera plutôt vers GIF ou PNG. Des outils tels que pngcrush, ImageMagick ou jpegtran vous aideront à réduire au maximum de poids des images matricielles.
Moyen de controle
Crée le
23 novembre 2015

Testez et faites reconnaître vos compétences

Logo Opquast Certfied

Opquast Certified est un test sur 1000 points permettant de vérifier le degré de maîtrise des meilleures pratiques du Web

Découvrir

Retrouvez cette fiche dans « Qualité Web »

Livre Qualité Web

En savoir +

Version numérique offerte pour l’achat de la version papier