Compresser les images de son site sans perdre en qualité

Chaque vendredi, une fleuriste photographie le bouquet de la semaine et l'envoie sur son site directement depuis son téléphone. Sur mobile, la page met de longues secondes à s'afficher, et certains clients abandonnent avant d'avoir vu les fleurs. Compresser une image avant de la publier prend deux minutes quand on connaît la méthode, et la photo reste aussi nette à l'écran.

Pourquoi une photo trop lourde ralentit la page

Deux notions se confondent souvent. Les dimensions, en pixels, décrivent la taille de l'image : un téléphone récent produit des photos de 4 000 pixels de large, parfois plus. Le poids, en kilo-octets (Ko) ou en mégaoctets (Mo), correspond à la quantité de données à télécharger. La compression réduit le poids sans changer les dimensions.

Publiée telle quelle, une photo de téléphone pèse souvent plusieurs mégaoctets, alors qu'elle s'affiche dans un cadre de quelques centaines de pixels. Le navigateur télécharge pourtant le fichier entier. Avec cinq ou six images de ce genre, la page devient pénible à charger en 4G, et la grande photo du haut retarde tout le reste. Google mesure ce délai : c'est l'un des indicateurs présentés dans l'article sur la vitesse du site et les Core Web Vitals.

Le bon format pour chaque image

Choisir le bon format fait déjà gagner beaucoup de poids :

• JPEG : le format classique des photos de plats, de produits ou de vitrine. Sa compression dite « avec perte » supprime des détails invisibles à l'œil, selon un niveau de qualité réglable.
• PNG : pour un logo, une capture d'écran avec du texte ou un produit détouré sur fond transparent. Sa compression « sans perte » conserve chaque pixel, ce qui le rend lourd pour une photo.
• WebP : il remplace l'un comme l'autre, avec des fichiers nettement plus légers à qualité comparable. Les navigateurs actuels l'affichent, et beaucoup d'outils de création de site l'acceptent.
• AVIF : plus récent et plus léger encore, mais pas accepté partout.
• SVG : un format de dessin, parfait pour un logo, qui reste net à toutes les tailles. Vérifiez que votre outil l'accepte.

Les iPhone enregistrent souvent leurs photos au format HEIC, que tous les outils n'acceptent pas. Le téléphone les convertit parfois en JPEG à l'envoi ; sinon, l'option « Le plus compatible », dans les réglages de l'appareil photo, fait enregistrer directement en JPEG.

Redimensionner à la taille d'affichage

Avant de compresser, réduisez l'image à la largeur qu'elle occupera sur la page. Voici quelques repères courants, qui tiennent compte des écrans haute définition :

• grande image en pleine largeur, comme le bandeau d'accueil : 1 600 à 2 000 pixels de large ;
• photo insérée dans un texte ou une colonne : 1 000 à 1 200 pixels ;
• vignette de produit ou de galerie : 500 à 800 pixels, davantage pour la version qui s'agrandit au clic ;
• logo : environ deux fois sa taille d'affichage, s'il n'existe pas en SVG.

La documentation de votre thème indique souvent ces dimensions ; sinon, demandez-les à la personne qui a créé votre site. Recadrez au passage dans les proportions du cadre, paysage ou carré, pour que l'outil ne coupe pas la photo au milieu d'une assiette ou d'un visage. WordPress et d'autres solutions créent aussi des versions réduites automatiquement, mais un fichier préparé avant l'envoi reste plus sûr et occupe moins de place sur l'hébergement.

Compresser sans abîmer

Le réglage de qualité

La plupart des outils proposent un curseur de qualité gradué jusqu'à 100. Pour une photo destinée au web, un réglage autour de 75 à 80 offre en général un bon compromis. Comparez le résultat à taille réelle et guettez les défauts typiques : un ciel uni qui se marbre, des halos autour des contours, des dégradés qui forment des bandes. Dès qu'ils apparaissent, remontez d'un cran.

Gardez toujours vos originaux, car chaque nouvel enregistrement en JPEG dégrade un peu plus l'image. Aucune compression ne rattrape non plus une photo floue ou sombre : pour la prise de vue, suivez les conseils sur les photos produits sans studio.

Des outils gratuits

• Squoosh, une application web gratuite conçue par une équipe de Google, traite une image à la fois : choix du format, réglage de la qualité et comparaison avant et après.
• TinyPNG compresse plusieurs fichiers d'un coup, JPEG compris malgré son nom. Sa version gratuite comporte des limites, indiquées sur le site.
• GIMP, logiciel de retouche libre et gratuit, convient à ceux qui retouchent déjà leurs photos.
• Les outils déjà installés : sur Mac, Aperçu ajuste la taille d'une image et l'exporte en JPEG avec un curseur de qualité ; sur Windows, l'application Photos sait redimensionner une image.

Si un bouton a changé de nom, cherchez les mots « redimensionner », « exporter » ou « qualité ». Sur WordPress, des extensions compressent les images au moment de l'envoi : lisez ce que couvre leur version gratuite et n'en activez qu'une seule.

Une routine à chaque nouvelle photo

Si vous publiez vous-même vos photos, du plat du jour aux nouveautés de la boutique, suivez chaque fois le même enchaînement :

1. rangez l'original dans un dossier à part ;
2. recadrez et redimensionnez la photo selon l'emplacement prévu ;
3. exportez-la en WebP si votre site l'accepte, sinon en JPEG, avec une qualité réglée entre 75 et 80 ;
4. renommez le fichier et préparez son texte alternatif, selon la méthode de l'article sur le référencement des images ;
5. vérifiez le poids : quelques centaines de Ko au plus pour une grande photo, moins de 100 Ko pour une vignette ;
6. publiez, puis affichez la page sur votre téléphone, wifi coupé.

Le poids s'affiche d'un clic droit, avec « Lire les informations » sur Mac ou « Propriétés » sur Windows. Pensez aussi aux informations cachées des photos de téléphone, comme la date ou le lieu de la prise de vue : l'export pour le web les retire souvent, sans garantie, ce qui mérite une vérification pour les photos prises chez vous.

Pour alléger vos pages dès cette semaine

1. Passez votre page la plus riche en photos dans PageSpeed Insights, l'outil gratuit de Google, et notez les images qu'il signale.
2. Traitez d'abord la grande image d'accueil, puis les photos de vos pages les plus visitées.
3. Si votre outil n'accepte ni WebP ni redimensionnement et que vos pages restent lentes, estimez le prix d'un site neuf avec le configurateur de devis avant de multiplier les correctifs.