Tuto : Optimiser vos images pour le web

Dernière modification 19 avril 2023

Dimensions de l'image et poids

Le poids de l'image dépend en grande partie de ses dimensions (largeur × hauteur). Recadrez donc l'image pour ne garder que les éléments vraiment utiles et redimensionnez l'image !

Optimiser une photo

Le format le plus adapté aux photos est le JPG. En revanche, le rendu des aplats de couleurs et des textes pourra être médiocre. Le JPG peut être compressé pour être allégé. Le taux de compression est généralement exprimé en %.



La qualité perçue étant proportionnelle au taux de compression on peut retenir de cette courbe 2 principes :

• Pour avoir une belle image, il n'est pas utile de garder une compression à 100%. À 85%, on divise le poids par 2 avec une bonne qualité visuelle !
• Compresser vos images en dessous de 40% vous apportera un gain de poids quasi nul pour une qualité très médiocre.

Visuellement, on ne perçoit pas de différence entre le JPG à 100% et le JPG à 80%. Mais le poids de l'image est passé de 79 ko à 37 ko !

Si on compresse davantage, on voit des défauts apparaître (pixels autour de la tête de l'astronaute). Ici à 40% (14 ko) et 0% (6 ko).

En résumé, dans la plupart des cas, vous pouvez compresser vos photos entre 95% et 40%.

Optimiser une image avec des aplats de couleur

Le format d'image le plus adapté aux aplats est le PNG en couleurs indexées (aussi appelé png-8). En revanche, il rend très mal les dégradés :

PNG 128 couleurs (39 ko) et PNG 8 couleurs (14 ko).

Ce format est parfois bien adapté aux petites photos.

Bien adapté aux logos et aux icônes, on lui préfèrera aujourd'hui des fichiers vectoriels en SVG aux contours plus précis sur smartphones.

Optimiser une image avec un fond transparent

Une image translucide ou avec des parties transparentes est intéressantes pour des effets de superposition. Pour garder la transparence (canal alpha) le PNG classique (aussi appelé png-24) est le plus adapté. Il n'est pas vraiment optimisable et reste très lourd en général. On l'utilisera donc de préférence pour des petites images.

Le PNG indexé peut aussi être utilisé, mais propose uniquement une transparence tout ou rien.

Le cas du WebP

Le nouveau format WebP est plus léger que JPG et permet la transparence. On le trouve de plus en plus sur les sites web.

Pour moi, il pose pour l'instant un problème majeur : les ordinateurs et les logiciels ne savent actuellement pas les lire. Impossible donc d'enregistrer une image WebP depuis internet pour l'utiliser sur son ordinateur. On est loin de l'esprit de partage d'internet...

Il existe des extensions de navigateur pour enregistrer les WebP en JPG. Par exemple pour Firefox : WebP / Avif image converter.

Tutoriel Photoshop et Gimp

Niveau requis :
Photoshop niveau basique
ou
Gimp niveau basique (logiciel libre et gratuit)

Avec Photoshop

Alors là, c'est facile. Pour une fois l'interface est plutôt bien faîte pour un produit Adobe, même si la commande a été planquée au fin fond du logiciel sur les dernières versions 🙄.

1. Ouvrir votre image (vous pouvez faire un glissé déposé)
2. Cliquez sur Fichier > Exportation > Enregistrer pour le web (pensez à vous faire un raccourci)
3. Vous pouvez tester tous les paramètres et comparer jpg et png. Le poids de l'image finale est affiché en bas à gauche. Vous pouvez également modifier les dimensions de l'image.
4. Cliquez sur Enregistrer

Avec Gimp

Il existait un plug-in pour Gimp similaire à la fonction Photoshop : Gimp Save for web, mais il n'est plus facilement accessible...

Sinon pour redimensionner :

1. Glisser-déposer une image dans Gimp
2. Image > Échelle et taille des images
3. Largeur
4. Échelle

Enregistrer un jpg :

1. Fichier > Exporter
2. nomdufichier.jpg
3. Taper Entrée
4. Déplacer le curseur de qualité (compression)
5. Vous pouvez utiliser Afficher dans la fenêtre d'image et options avancées
6. Taper Entrée

Enregistrer un png indexé :

1. Image > Mode > Couleurs indexés (régler le nombre de couleurs). Pour faire une modification par la suite sur l'image, repassez en mode RVB
2. Fichier > Exporter
3. nomdufichier.png
4. Taper Entrée
5. Décocher toutes les options
6. Taper Entrée

Pour aller plus loin

Fichiers vectoriels

Le format SVG est désormais supporté par les navigateurs. Idéal pour les grandes images en aplats. Si Illustrator fait aussi du svg, le logiciel rêvé pour faire du dessin vectoriel est Inkscape (libre et gratuit).

Une ancienne mode, un peu compliqué selon moi, consistait à placer ses icônes dans une font. On obtenait ainsi des fichiers vectoriels compatibles avec tous les navigateurs via @font-face.

Un grand JPG

Parfois un grand jpg très compressé et redimensionné par le navigateur sera un peu moins lourd qu'un jpg peu compressé à l'échelle originale.

JPG 80% de 200px de large (37 ko) et JPG 0% de 600px de large redimensionné à 200px (29 ko).

Flou jpg

Si vous aimez le brouillard, le paramètre flou de JPG permet de réduire considérablement le poids de l'image...

JPG sans flou (79 ko) et avec flou à 2 (27 ko).

Retour aux tutos

Besoin de l'aide d'un professionnel pour créer votre site ou votre publication graphique ? Contactez-moi !

Vous êtes libre de réutiliser cet article à condition de mentionner qu'il a été écrit par Creavolt.fr

Ces tutos peuvent vous intéresser

Inkscape, le logiciel de dessin intelligent et intuitif !

Écrire rapidement son CSS avec Emmet