Comment optimiser des images pour le web

Une photo sortie d'un reflex ou d'un smartphone récent pèse entre 3 et 8 Mo et mesure souvent 4 000 pixels de large. Placée dans un bloc de 800 pixels sur une page d'accueil, elle sera réduite à l'affichage par le navigateur — mais téléchargée en entier. Sur une connexion mobile ordinaire, cela fait plusieurs secondes pendant lesquelles le visiteur regarde un rectangle vide. Optimiser une image pour le web, c'est ramener ce fichier sous les 200 Ko sans que personne ne voie la différence à l'écran.

Redimensionner d'abord, compresser ensuite

L'ordre compte, et la plupart des gens l'inversent. Une image de 4 000 × 3 000 pixels contient 12 millions de pixels ; la même en 1 600 × 1 200 en contient 1,9 million, soit six fois moins de données à encoder. Aucun réglage de compression ne rattrape cet écart : un fichier de 4 000 pixels de large compressé à qualité 50 reste lourd et devient visiblement sale, alors que le même réduit à 1 600 pixels puis compressé à qualité 82 sort plus léger et plus propre.

Pour choisir la largeur cible, mesurez la largeur réelle du bloc où l'image s'affiche, puis multipliez par deux pour couvrir les écrans à haute densité :

• Vignette de liste ou avatar : bloc de 300 à 400 px, donc export en 600 à 800 px.
• Illustration d'article : bloc de 700 à 800 px, donc export en 1 400 à 1 600 px.
• Bandeau pleine largeur : c'est le seul cas où l'on ne double pas, le coût en poids l'emportant sur le gain visible — 1 920 px suffisent presque toujours, 2 560 px étant un plafond raisonnable.

Au-delà, le gain visuel devient indétectable alors que le poids continue de grimper. L'outil pour redimensionner une image à une largeur précise fait ça en une opération, et le calcul se déroule dans votre navigateur : le fichier ne part sur aucun serveur.

Deuxième réflexe, souvent oublié : recadrer. Des marges vides, un ciel uniforme sur le tiers supérieur, une bordure inutile — ce sont des pixels payés au prix fort.

Choisir le format selon le contenu de l'image

Il n'existe pas de « meilleur format » dans l'absolu, seulement un format adapté à chaque type de contenu.

Le cas le plus fréquent reste le PNG mal placé. Une photo enregistrée en PNG parce que « c'est plus propre » pèse facilement 2 à 3 Mo là où le JPEG équivalent en ferait 250 à 400 Ko : sans perte, le PNG encode fidèlement chaque grain de bruit du capteur. À l'inverse, une capture d'écran passée en JPEG produit des halos grisâtres autour des lettres. L'outil de conversion entre JPG, PNG, WebP, GIF et BMP permet de produire deux versions du même fichier et de comparer les poids avant de trancher.

Cas particulier : les photos d'iPhone en HEIC. Seul Safari les affiche, depuis sa version 17 ; Chrome, Edge et Firefox ne les lisent pas, et la plupart des gestionnaires de contenu les refusent à l'import. Il faut les convertir en JPG avant toute autre opération.

Régler la qualité sans dégrader visiblement

Pour le JPEG, la zone utile se situe entre 75 et 85. Au-dessus de 90, le poids explose pour un gain que l'œil ne perçoit pas. En dessous de 65, les blocs de 8 × 8 pixels propres à l'algorithme apparaissent dans les ciels et les dégradés, et des halos se forment le long des contours nets. Pour le WebP avec perte, une qualité de 75 à 80 donne à peu près le rendu d'un JPEG à 85, dans un fichier plus léger.

Deux réglages font une vraie différence :

• Le sous-échantillonnage de la chrominance. Le mode 4:2:0, appliqué par défaut, divise par deux la définition des informations de couleur dans chaque direction, soit quatre fois moins d'échantillons de couleur que de pixels. Invisible sur une photo, mais du texte rouge sur fond blanc en ressort baveux. Pour une image contenant du texte ou un logo, préférez le 4:4:4, ou passez en PNG ou WebP.
• Le JPEG progressif. L'image apparaît d'abord grossière puis se précise, au lieu de se dessiner ligne par ligne. Au-delà de 10 Ko environ, c'est plus agréable à l'usage et souvent un peu plus léger.

Pour un PNG, la notion de qualité n'existe pas : tout se joue sur la palette. Repasser une image à aplats en PNG-8, soit 256 couleurs, fait souvent fondre le poids de moitié sans différence perceptible sur un logo. Sur une photo, la même opération produit un effet de bandes dans les dégradés.

Repères de poids une fois l'opération terminée : 20 à 50 Ko pour une vignette, 80 à 150 Ko pour une illustration d'article, moins de 250 Ko pour un bandeau. Le module de compression d'images JPG, PNG et WebP affiche le poids obtenu, de quoi vérifier immédiatement si l'on est dans ces ordres de grandeur.

Les pièges qui alourdissent un fichier sans qu'on le voie

• Les métadonnées EXIF. Modèle d'appareil, réglages, coordonnées GPS et vignette intégrée : plusieurs dizaines de Ko inutiles, et une fuite d'information si la photo a été prise chez vous.
• Le profil colorimétrique. Un profil Adobe RGB ou ProPhoto ajoute du poids et fait virer les couleurs là où il est ignoré. Le sRGB reste le seul choix sûr pour le web.
• La transparence perdue. Un PNG transparent enregistré en JPEG voit son fond devenir noir ou blanc, sans le moindre avertissement. Un logo destiné à être posé sur une couleur doit rester en PNG ou WebP.
• L'agrandissement. Passer une image de 600 px à 1 600 px n'invente aucun détail : cela ajoute du poids et du flou.
• La recompression en cascade. Chaque enregistrement d'un JPEG déjà compressé empile de nouveaux artefacts. Repartez de l'original, jamais du fichier déjà publié.
• Le bruit. Haute sensibilité, feuillage dense, gravier : le bruit est aléatoire, donc quasi incompressible. C'est souvent l'explication d'un fichier qui reste lourd malgré des réglages corrects.

Le fichier ne fait pas tout : l'intégration compte autant

Une image parfaitement compressée peut malgré tout dégrader une page. Trois points à vérifier côté HTML :

• Renseignez la largeur et la hauteur sur chaque balise d'image, ou un rapport d'aspect en CSS. Sinon le navigateur ne réserve pas l'espace et le texte saute quand l'image arrive.
• Servez plusieurs tailles via srcset, avec sizes pour décrire la largeur d'affichage réelle. Un mobile téléchargera la version 800 px au lieu de celle en 1 600 px.
• Différez ce qui est sous la ligne de flottaison, mais surtout pas l'image principale du haut de page : la passer en chargement paresseux retarde son affichage et dégrade le Largest Contentful Paint, dont le seuil considéré comme bon est de 2,5 secondes.

Quand le résultat ne convient pas

Si l'image reste lourde après compression, elle contient encore trop de pixels ou trop de bruit : réduisez la largeur d'un cran supplémentaire plutôt que de baisser encore la qualité. Si les couleurs ont viré, le profil colorimétrique est en cause : reconvertissez en sRGB. Si le rendu est mou, vous avez descendu la qualité trop bas ou redimensionné deux fois de suite : recommencez depuis l'original. Et si le fichier est refusé à l'import, vérifiez son format réel — un fichier renommé en .jpg mais qui est en réalité un HEIC sera rejeté.

Redimensionnement, recadrage, conversion de format et compression s'exécutent intégralement dans le navigateur sur Convertu : rien n'est transmis, rien n'est stocké. Ces quatre outils demandent en revanche un compte et relèvent de l'abonnement à 7 €/an, tout comme la conversion HEIC, qui passe elle par un serveur avec une conversion offerte chaque jour sans inscription.