Comment optimiser les images sur son site web ?

Les images sont les éléments qui alourdissent le plus le poids des pages web. Pourtant, les images sont indispensables, pour mettre en valeur vos articles ou vos produits (si vous êtes e-commerçant). Si vous souhaitez améliorer la performance et la vitesse de chargement de votre site web, vous devez avoir une priorité : réduire le poids de vos images et le nombre de requêtes HTTP qui leur sont associées. Ceci inclut aussi bien les images intégrées dans vos contenus que les images qui font partie du design de votre site web (logo, icônes, etc.).

Cet article est consacré à l’optimisation des images pour le web. Nous l’avons divisé en plusieurs parties. Dans un premier temps, nous reviendrons sur les trois principaux formats d’images sur le web : le JPEG, le GIF et le PNG. Quelles sont les caractéristiques de chacun de ces formats ? Quand privilégier l’un plutôt que l’autre ? Quelles sont les contraintes associées à chaque format ? Nous répondons à toutes ces questions.

Nous donnons ensuite trois conseils pour enregistrer vos images pour le web et réduire leur poids et optimiser les performances de votre site internet (du point de vue de la vitesse de chargement). Enfin, nous abordons brièvement quelques techniques permettant de réduire le nombre de requêtes HTTP liées aux images lors du chargement de vos pages web (sprites, CSS3, Data URIs).

Prêt à optimiser vos images pour le web ?

Vous êtes à la recherche de nouvelles banques d’images pour améliorer les visuels de votre site internet ? Nous vous invitons à découvrir notre Top 10 des banques d’images et de sites de photos.

Choisir le bon format web pour vos images : JPEG, GIF, PNG ou WebP ?

Il existe quatre principaux formats d’images sur internet : le format JPEG, le format GIF, le format PNG et le format WebP. Ce sont les quatre seuls formats qui s’affichent correctement sur tous les navigateurs. Nous allons vous présenter les principales forces et faiblesses de chacun de ces formats, leur contexte d’utilisation, des conseils pour bien les utiliser et la manière d’optimiser vos images sur ces différents formats.

Format JPEG (haute qualité, peu compressible)

Le format JPEG a été créé en 1986, ce qui en fait le format le plus ancien. Ce format est idéal pour les photographies (c’est le format utilisé par la plupart des appareils photos numériques) et plus généralement pour les images utilisant un spectre de couleurs et de contrastes très large (plus de 16 millions de couleurs gérées). Par contre, la compression d’un JPEG entraîne une déperdition d’informations (contrairement au format PNG). Quand une image JPEG est de faible qualité, car trop compressée, ça se voit (image pixelisée et floue). Le format JPEG perd sa qualité assez rapidement dans la compression. D’ailleurs, l’algorithme utilisé pour définir les informations à supprimer en cas de compression n’est pas très performant. Les informations supprimées sont souvent sélectionnées dans les zones de faible contraste de l’image. Si votre image contient des différences de contrastes importantes d’un pixel à l’autre, le rendu sera médiocre : certaines zones seront conservées intactes dans la compression, et d’autres auront subi une perte d’informations très visible dans ses conséquences. Ce qui, pour le coup, créer un contraste et des effets non voulus. Plus vos images contiennent des couleurs et des couleurs distinctes, moins le poids du JPEG est compressible.

Malgré ces défauts, le JPEG reste le format phare du web. Notamment parce qu’il permet un rendu très satisfaisant des images de haute qualité et qu’il offre une densité d’informations supérieure aux autres formats. Concrètement, vous aurez plus d’informations dans un JPEG de 500ko que dans un PNG de 500 ko. Cette densité d’information permet d’obtenir des images riches visuellement et très qualitatives pour un poids optimisés.

L’optimisation des images de votre site internet est l’une des principales techniques pour réduire le temps de chargement des pages de votre site. Pour aller plus loin et si votre site est sous WordPress, découvrez 9 techniques pour améliorer la vitesse de chargement de votre site WordPress.

Nous vous conseillons d’utiliser la fonction « Enregistrer pour le web » de Photoshop pour tester la différence de qualité entre vos images JPEG en fonction de la taille et du niveau de compression choisis. En effet, lorsque vous enregistrez une image sur Photoshop, vous avez le choix entre « Enregistrer sous » et « Enregistrer pour le web ». Si vous cliquez sur « Enregistrer pour le web », Photoshop vous propose des fonctionnalités pour optimiser votre image et ajuster la qualité. Une fonction de prévisualisation vous permet de voir tout de suite le résultat de vos optimisations. Le but de la fonction « Enregistrer pour le web » est de réussir à allier bonne qualité et poids réduit.

Il faut savoir aussi que la plupart des JPEG sur internet sont des JPEG progressif. Cela signifie que l’image commence à s’afficher en mauvaise qualité sur la page avant d’apparaître dans son état normal. Cela permet à la page de se charger plus vite. Tous les navigateurs supportent les JPEG progressifs, mais sur certains le délai d’affichage des images est assez long. Le rendu ou non du JPEG progressif dépend aussi des appareils de lecture (et de leur processeur). Par exemple, les JPEG progressif ne fonctionnent pas (jusqu’à présent) sur Mobile Safari, le navigateur par défaut utilisé pour les iPhones et les iPads. Malgré ces quelques problèmes de prise en charge, le JPEG progressif  reste une bonne manière d’optimiser l’expérience utilisateur et de compresser le JPEG sans perte d’informations.

Vous pouvez convertir vos JPEG classiques en JPEG progressifs directement grâce à la fonction « Enregistrer pour le web » de Photoshop. Vous pouvez aussi utiliser l’outil Imgopt (à installer) ou l’outil web Imgonline.

 GIF (images animées, faible qualité)

Le format GIF permet de réunir plusieurs images dans un seul fichier. Le format GIF a été créé en 1987, un an après le format JPEG, pour accélérer le transfert d’images dans un contexte de connexions très lentes. Après être tombé en désuétude, le format GIF est revenu au goût du jour dans les années 2000, grâce à la possibilité de créer des images animées. Le format GIF supporte la transparence mais ne gère par contre que 256 couleurs, ce qui limite considérablement la qualité des images. Par contre, contrairement aux format JPEG, le GIF ne perd pas d’informations lors de la compression. Dans quelles circonstances opter pour le format GIF ? Lorsque, pour une même image, la taille du fichier est moins importante en GIF qu’en PNG-8. Ou bien lorsqu’une animation ne peut par être remplacée par du CSS3.

Lorsque vous créez un GIF, vous avez quelques options à votre disposition pour mixer la qualité des images et le poids du
fichier. Vous pouvez d’abord utiliser un algorithme de tramage (dither), qui permet d’ajouter plus de couleurs et de contrastes au GIF. L’algorithme analyse les pixels adjacents de différentes couleurs et sélectionne une couleur nouvelle qu’il intègre entre ces pixels adjacents. Vous pouvez ajuster le niveau de tramage sur Photoshop (Enregistrer pour le web). Le tramage impacte le poids des GIF. En moyenne un GIF qui fait 5 ko avec un tramage de 0 en fera le double avec tramage de 100. Là encore, il faut mixer entre qualité (de l’image) et légèreté (du fichier). Idem si vous réduisez le nombre de couleurs du GIF, votre fichier s’allégera.

Il faut savoir aussi que les GIF utilisent un algorithme de compression qui supprime les redondances horizontales, et non les redondances verticales. Pour la simple et bonne raison qu’il lit les pixels de manière horizontale, ligne par ligne. Les GIF qui utilisent un dégradé vertical sont pour cette raison beaucoup moins lourds que ceux qui utilisent un dégradé horizontal (de l’ordre de 4 fois moins lourds). Nous vous conseillons de faire pivoter votre GIF si vous pouvez pour améliorer la compression et réduire le poids du fichier.

Si une image contient très peu de couleurs et des bordures bien délimitées, le format PNG-8 est à privilégier au format GIF. En effet, les PNG utilisent une méthode différente de compression. Faites des tests pour arbitrer entre les deux formats.

Pour finir sur les GIF : si l’animation est extrêmement rudimentaire, remplacez le GIF par du CSS3 (voir plus bas). Les animations CSS3 sont moins lourdes que les animations GIF et donc meilleures en termes de performance. Là encore, testez les deux formats pour faire le meilleur choix.

Pour conclure, les GIF, même s’ils sont moins populaires qu’au début des années 2000, restent une option intéressante pour les images de petite taille n’ayant besoin que d’un spectre de couleurs très limité. Dans le cas contraire, le rendu esthétique sera mauvais et surtout le poids du fichier sera très élevé. Si les GIFs sont en général légers, c’est qu’ils contiennent très peu d’informations. Mais en réalité, le rapport poids / quantité d’informations est beaucoup moins intéressant que celui du JPEG.

Evidemment, le format GIF n’est clairement pas pertinent sur certains types d’images, comme les photos de vos produits par exemple (si vous êtes e-commerçant). En revanche, pour les logos le format GIF convient tout à fait.

Vous souhaitez proposer votre site internet en plusieurs langues mais vous vous posez des tas de questions sur le comment ? Nous vous invitons à lire notre article « la traduction du site web : coût, choix prestataires et organisation du projet« .

PNG (bonne qualité, compression sans perte)

Le format PNG est le plus récent. Il a émergé au milieu des années 1990, avec pour objectif de remédier aux défauts du format GIF et d’allier les avantages du GIF et du JPEG. Le format PNG, contrairement au JPEG, permet de compresser une image sans aucune perte de qualité / d’informations. Sur Photoshop, vous pouvez créer deux types d’images PNG : le PNG-8 et le PNG-24. Chacun de ces deux formats a des avantages et des inconvénients qu’il faut prendre en compte.

Le format PNG est idéal si vous souhaitez apporter de la transparence dans vos images. La transparence correspond à l’opacité de l’image et permet notamment de bien distinguer les éléments d’arrière-plan de vos images. La transparence est importante lorsque par exemple vous intégrer du texte sur vos images. Le format GIF supporte aussi la transparence, mais au prix d’un alourdissement du fichier. A la différence du GIF, l’algorithme du format PNG reconnaît les patterns horizontaux en plus des patterns verticaux – ce qui offre une qualité de compression plus élevée.

Quelle est la différence entre le PNG-8 et le PNG-24 ? Le PNG-8 est celui qui se rapproche le plus du format GIF. Comme lui, il propose une palette de 256 couleurs. Il est donc à utiliser pour les images intégrant peu de couleurs. Pour une même image, la version PNG-8 sera plus légère que la version GIF. Si vous n’avez pas besoin d’animations, il faut clairement privilégier le PNG-8 au GIF. Le format PNG-8 est idéal pour les images de type logo. Les fichiers PNG-8 sont toujours très légers. Le PNG-24 quant à lui se rapproche sur bien des aspects du format JPEG. Comme lui, il peut supporter plus de 16 millions de nuances de couleurs. D’un point de vue strictement esthétique, le rendu sera le même que vous choisissiez du JPEG ou du PNG (avant la compression). Cependant, comme nous l’avons dit précédemment, le PNG ne perd aucunes informations lors de la compression. Ce qui signifie deux choses : la qualité de l’image après compression sera meilleure avec le format PNG. En revanche, le poids du fichier sera plus lourd (5 à 10 fois plus lourd). Pour réduire le poids du PNG-24, vous devez réduire le nombre couleurs et réduire le bruit. Si vous n’avez pas besoin de transparence pour vos images, il est plus judicieux de choisir le JPEG plutôt que le PNG-24.

Vous connaissez maintenant l’essentiel de ce qu’il faut savoir sur les différences entre les trois formats d’images stars du web : JEPG, GIF et PNG.

Vous souhaitez créer ou améliorer le logo de votre société sans vous ruiner ? Découvrez notre article « Coût de création d’un logo – Zoom sur 4 options« .

WebP (vitesse de chargement améliorée)

WebP est un format d’image moderne créé par Google pour qui offrir une compression supérieure avec et sans perte pour les images sur le Web. Grâce à WebP, les webmasters et les développeurs web peuvent créer des images plus petites et plus riches qui rendent le web plus rapide.

Les images WebP sans perte sont 26 % plus petites que les images PNG. Les images WebP avec perte sont 25 à 34 % plus petites que les images JPEG comparables, à indice de qualité SSIM équivalent.

WebP sans perte prend en charge la transparence (également connue sous le nom de canal alpha) pour un coût de seulement 22 % d’octets supplémentaires. Dans les cas où la compression RVB avec perte est acceptable, WebP avec perte prend également en charge la transparence, ce qui permet généralement de réduire la taille des fichiers de 3 fois par rapport au PNG.

Comment fonctionne le format WebP ? La compression WebP avec perte utilise le codage prédictif pour coder une image, la même méthode utilisée par le codec vidéo VP8 pour compresser les images clés dans les vidéos. Le codage prédictif utilise les valeurs des blocs de pixels voisins pour prédire les valeurs d’un bloc, puis n’encode que la différence. La compression WebP sans perte utilise des fragments d’image déjà vus afin de reconstruire exactement les nouveaux pixels. Elle peut également utiliser une palette locale si aucune correspondance intéressante n’est trouvée.

100% gratuit - 3 min

   

Confiez les fondations de votre site web à un professionnel.            

Un prestataire certifié garantira la gestion des problèmatiques techniques dés la création de votre site web.

• Architecture du site
• Sécurité du site et sauvegarde des serveurs
• Base d'un bon référencement sur Google

Je fais une estimation

Enregistrer et compresser vos images web avec soin

Comme vous pouvez vous en douter, plus le fichier d’une image est lourd, plus le temps de chargement de l’image est important. Quand on connaît les attentes des utilisateurs en matière de vitesse de chargement des pages web, l’enjeu est de poids (c’est le cas de le dire). Pour optimiser vos images pour le web, vous devez en optimiser le poids. Ce qui passe par trois choses :

• Réduire les dimensions de l’image.
• Enregistrer l’image « proprement » pour en réduire le poids.
• Compresser l’image en utilisant des outils.

Si vous souhaitez moderniser l’apparence et l’ergonomie de votre site e-commerce, lire notre article sur les 8 tendances ergonomie / design sur les sites ecommerce en 2016.

#1 Réduire les dimensions de l’image

Réduire les dimensions d’une image permet d’en réduire le poids. De manière très significative. Réduire le poids d’une image peut se faire avec la plupart des outils de lecture d’image. L’outil « Aperçu » sur Mac convient tout à fait. Vous pouvez aussi, bien entendu, utiliser des logiciels de photo, comme Photoshop (voir illustration ci-dessous). Photoshop permet de voir l’image à sa taille réelle et donc d’ajuster les dimensions en vous mettant à la place des internautes qui verront l’image sur la page web. Enregistrez l’image à la taille que vous souhaitez avant de l’importer sur votre CSM. Bien entendu, vous pourrez réduire les dimensions de l’image directement sur le CMS, mais cela ne réduira pas le poids de l’image sur votre serveur.

#2 Utiliser la fonction « Enregistrer pour le web »

Nous avons déjà parlé de cette fonction, mais son grand intérêt vaut qu’on y revienne. En choisissant l’option « Enregistrer pour le web » au moment d’enregistrer votre image sur votre ordinateur (ou sur votre serveur), vous accédez à une fenêtre d’options qui vous permet de réduire le poids de l’image. Cet outil de Photoshop est l’un des seuls à permettre facilement à la fois une réduction de la taille du fichier et la conservation presque intacte de la qualité de l’image. La fonction « Enregistrer sur le web » est accessible dans Fichier > Exporter > Enregistrer pour le web. Vous trouverez dans cette fenêtre tout un tas d’options pour optimiser le poids de vos images, avec possibilité de comparer par juxtaposition la version non optimisée avec une, deux ou trois versions optimisées (onglet « 2 vignettes » ou « 4 vignettes ») du point de vue du rendu.

#3 Utiliser des outils pour compresser les images

Il existe quelques outils très pratiques disponibles sur le web et gratuits pour compresser vos images. Ces outils suppriment les données cachées contenues dans vos fichiers d’images (les métadonnées, les profils de couleurs…) et qui n’ont aucun impact sur le rendu visuel de l’image. Nous vous conseillons notamment l’outil Tiny PNG (ou Tiny JPG : c’est la même chose, les deux outils supportent autant le format PNG que le format JPEG). Le fonctionnement de cet outil est très simple : vous uploadez vos images sur l’interface, l’outil les compressent en quelques secondes sans action de votre part. Une fois la compression terminée, vous n’avez plus qu’à télécharger les fichiers. La seule petite limite de cet outil : vous ne pouvez pas uploader plus de 20 images à la fois. Si vous avez l’intention de compresser 5000 images, cela vous prendra plusieurs heures. Par ailleurs, les images à compresser doivent avoir un poids inférieur à 5 MB – ce qui est le cas de la plupart des images.

Le petit conseil de La Fabrique du net
Si vous avez un Mac, nous vous recommandons aussi l’outil ImageOptim. Cet outil nécessite un téléchargement sur votre ordinateur, mais n’est pas payant.

Réduire le nombre de requêtes liées à des images

Nous avons insisté dans la partie précédente sur l’importance de réduire la taille des fichiers images. Mais ce n’est pas la seule chose que vous devez faire. Il est important aussi de réduire le nombre de requêtes liées aux images pour optimiser la vitesse de chargement des pages de votre site web. Pour réduire le nombre de requêtes, il y a essentiellement deux techniques. La première consiste à combiner vos images dans des « sprites ». La deuxième consiste à remplacer les fichiers images par du CSS3 ou des données URIs.

Réduire les requêtes grâce aux sprites

Le sprite est une technique qui consiste à combiner plusieurs images positionnées les unes à côté des autres. Cette technique peut contribuer à augmenter légèrement le poids de vos pages dans la mesure où vous créez du CSS additionnel. Mais les sprites CSS permettent d’augmenter la vitesse de chargement dans la mesure où le nombre de requête est considérablement réduit. Cette technique est à privilégier pour les petites images (gif ou png) et les images qui sont reprises plusieurs fois sur votre site. Exemples : les icônes, le logo du site, les images de fond…Il est très pertinent de créer un sprite pour regrouper en une seule image toutes vos icônes lorsqu’elles apparaissent les unes à côté des autres.

La création des sprites s’effectue avec du code CSS et suppose donc une connaissance de ce langage informatique (différent du HTML). Tout l’intérêt des CSS sprites est de ne charger qu’une seule image au lieu de plusieurs et donc de diminuer le nombre de requêtes HTTP envoyées au serveur lors du chargement de la page web sur laquelle les sprites sont intégrés.

Voici un exemple de sprite :

Et un autre :

D’un point de vue technique, la création d’un sprite implique de commencer par choisir une image principale, et de définir ensuite des sous-images via la propriété CSS background-position. Il existe plusieurs outils – comme Css-Sprit, qui permettent de créer assez facilement vos sprites en important les images à combiner.

Découvrez notre guide complet sur l’art de coder un email en HTML / CSS.

Réduire les requêtes grâce au CSS3

Une autre manière de réduire le nombre de requêtes liées aux images consiste à remplacer vos images par du CSS. A noter que cela n’est possible que pour les petites images : pour vos boutons CTA par exemple. Le langage de programmation CSS permet de créer des effets graphiques (formes, dégradés, animations…). Les possibilités en la matière ont été élargies par l’arrivée du nouveau standard CSS, le CSS3. Bien sûr, cette technique contribue à générer plus de fichiers CSS, mais améliore globalement les performances en termes de vitesse de chargement en réduisant le nombre de requêtes.

Le CSS est très pratique notamment pour créer des dégradés simples sur les images basiques. Exemples d’icônes dont le dégradé a été produit par un codage CSS3 :

Voici à quoi ressemble le code HTML :

  <a href="#">Click Me</a>  <a href="#" class="buy">Buy This</a>  <a href="#" class="info">More Info</a>  

Dans votre CSS, vous devez définir le dégradé :

  a {     background-image:      linear-gradient(to bottom, #FFF, transparent);     background-color: #DDD;    border: 1px #DDD solid;  }  

Pour que chaque icône ait sa propre couleur, vous devez définir les propriétés « background-color » et « border-color » de chacune d’entre elles :

  .buy {    background-color: #C2E1A9;     border-color: #D8E5CE;  }  .info {    background-color: #AFCCD3;     border-color: #DAE9EC;  }  

Vous pouvez aussi créer des effets d’ombre avec les propriétés text-shadow et box-shadow. Vous trouverez assez facilement sur internet d’autres exemples d’utilisation du code CSS pour réduire les requêtes liées aux images. Pour créer vos boutons en CSS3, nous vous recommandons cet article très didactique en français.

Réduire les requêtes grâce au Data URIs

Vous pouvez enfin remplacer votre très petites images par des data URIs afin de réduire le nombre de requêtes HTTP. La technique consiste à convertir l’image en texte en utilisant une méthode appelée l’encodage Base64. Prenons l’exemple d’un petit triangle qui se retrouve sur quasiment toutes les pages de votre site.

Il est possible de transformer cette image par son équivalent texte (son URI data) en utilisant un encodeur Base64. La démarche à réaliser est assez simple : vous importer votre icône dans l’encodeur. Celui-ci vous donne son data URI. A vous ensuite d’intégrer ce Data URI dans la propriété backround-image de votre CSS :

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUh      EUgAAAAoAAAAQCAAAAAAKFLGcAAAAVUlEQVR4AWM4/B8GGOyfw5m6UQimx3       Y4c6PKTxjzUn4FnPmB7QaM+X+CDZz5P2E+nHlS6C2M+b86Ac78b3MYzlyq8       hPG/J/fAmSegQC22wzhxlBQAQBbjnsWelX9QwAAAABJRU5ErkJggg==);  

Cet encodage permet d’économiser une requête HTTP dans la mesure où l’image est directement intégrée dans le code en inline et n’a pas besoin d’être chargée lors de l’ouverture de la page pour s’afficher. Cette technique a cependant quelques inconvénients : premièrement, vous n’avez plus la possibilité de cacher le fichier. Deuxièmement, cela alourdit votre CSS, parfois de manière assez conséquente (suivant la longueur de l’URI data). Vous devez donc tester les vitesses de vos pages avec et sans URI data pour choisir la version la plus rapide. Pour un tutoriel complet sur la création de Data URI, lire cet article très complet (en français).