Optimisation d'images pour le web: notre guide complet

Pourquoi l’optimisation des images est-elle si régulièrement conseillée? Optimiser les images permet-il réellement d’améliorer les performances d’un site web? Voilà certaines des questions auxquelles nous tenterons de répondre dans cet article.

Imaginez que vous deviez attendre cinq secondes pour chaque image quand vous faites défiler votre fil de nouvelles Instagram. Seriez-vous prêt à attendre aussi longtemps pour que chaque image se charge? Nous ne le pensons pas.

Les images sont nécessaires, mais elles peuvent être délicates à utiliser. Elles ajoutent beaucoup de volume à la page web et peuvent ralentir le chargement de votre site web.

Selon une étude de Google, un visiteur est 90% plus susceptible de quitter votre site web s’il prend cinq secondes à charger plutôt qu’une seule. Cela réduit non seulement les chances de conversion, mais a également un impact négatif sur le classement dans les résultats de recherche.

Optimiser les images pour le web signifie réduire le volume des fichiers sans perdre la qualité graphique. Cela permet d’améliorer le temps de chargement des pages et de réduire l’utilisation de l’espace disque.

Ce processus est très simple à utiliser. Avec les bons outils d’optimisation d’image, vous pouvez facilement améliorer les performances de votre site de manière significative.

Dans cet article, nous traiterons de l’importance de l’optimisation des images et de son impact sur votre site. Nous aborderons ensuite quelques façons différentes d’optimiser vos images.

Qu’est-ce que l’optimisation d’images pour le Web?

L’optimisation d’image est un processus visant à rendre vos images web aussi compactes que possible sans sacrifier leur qualité.

On pourrait comparer le concept à la préparation soignée de votre valise en vue d’un voyage. Vous devez tout organiser de manière minimiser le volume qu’occupe les vêtements, articles de toilette et autres bagages essentiels, afin qu’ils puissent tous entrer dans votre valise.

Il vous faut aussi éviter que votre bagage soit trop lourd pour être transporté. Après tout, vous devez être capable de vous déplacer aisément en portant votre valise.

Il en va de même pour le contenu multimédia de votre site web. Vous devez donc veiller à ce que vos images soient belles, tout en vous assurant qu’elles ne ralentissent pas votre site web.

Comment fonctionne l’optimisation d’images?

Regardons en détail le processus pour choisir une image à mettre sur votre site web.

Tout d’abord, les premières choses auxquelles porter attention sont les dimensions et/ou la résolution de l’image. Il s’agit d’éléments clés, qui peuvent avoir un impact important sur les performances.

Il est généralement recommandé d’utiliser une taille d’image identique aux dimensions d’affichage de votre site web. Cela implique généralement d’adapter les images aux diverses versions du site.

Par exemple, si la version mobile de votre site ne permet d’afficher des images d’une largeur allant jusqu’à 1000 pixels, il est inutile de téléverser une photo d’une largeur de 4000 pixels.

Une plus grande image offre bien sûr une meilleure résolution. La différence est toutefois souvent imperceptible pour vos visiteurs, et la différence de volume des fichiers ralentira votre site. Le simple fait de redimensionner l’image permet généralement de rendre le fichier beaucoup moins volumineux.

L’étape suivante est la compression des images. Nous aborderons en détails les différentes solutions de compression. Il se résument à deux types principaux : avec pertes et sans pertes, au niveau de la qualité.

La compression sans perte

La compression est un processus complexe visant à réduire le volume d’un fichier image, mais sans changer pas son apparence. La résolution et la qualité de l’image restent les mêmes.

L’outil de compression trouve ainsi un moyen de réduire la taille du fichier sans sacrifier la qualité de l’image. Pour ce faire, il organise simplement mieux le codage du fichier.

La compression avec perte

La compression avec perte est généralement plus simple et permet des gains plus importants, aux dépends d’une certaine qualité. Elle permet de réduire le volume, et même la résolution, « tant que ça a l’air bon. »

Par exemple, l’algorithme pourrait décider de « simplifier » deux nuances de bleu très similaires en une seule nuance. Il peut aussi ignorer certains petits détails en arrière-plan, en déterminant qu’ils ne sont pas très importants.

L’outil de compression peut également supprimer les informations supplémentaires qui sont cachées dans le fichier image. Des métadonnées incluent entre autre le moment et l’endroit où une photo a été prise, de même que l’appareil utilisé. Ces données ne sont pas toujours utiles pour un site Web.

Le résultat de ces diverses étapes se cumule pour offrir des résultats parfois très important.

Par exemple, imaginons une image JPG de départ d’un volume de 5MB. Nous la redimensionnons, puis la compressons soigneusement. Nous supprimons ensuite les informations supplémentaires et l’enregistrons en tant que fichier WebP.

L’image qui en résultat ne fait plus que 100KB et parait toujours bien. Elle se charge toutefois désormais beaucoup plus vite.

Et c’est le but de l’optimisation des images : rendre les images assez petites pour être chargées rapidement, mais elles ont toujours l’air assez bien pour montrer votre chien génial.

C’est un exercice d’équilibre, mais avec un peu de pratique, vous aurez le coup de main. Les visiteurs de votre site vous remercieront quand ils pourront voir votre mignon petit chien sans attendre que l’image se charge.

Comment choisir un outil d’optimisation des images?

Le meilleur algorithme de compression d’image est celui qui peut créer les plus petits fichiers d’image sans perdre en qualité. Cependant, cela dépend aussi du type de compression qui peut vous aider à obtenir la taille de fichier que vous voulez.

Comme nous l’avons mentionné plus tôt, il existe deux types de compression :

Compression sans perte :

Pour reprendre notre exemple précédent, cette solution s’apparente à faire vos valises en utilisant des sacs de rangement sous vide.

Vous prenez ensuite soin d’extirper tout l’air de chacun d’entre eux, ce qui rend vos bagages plus petits. Quand vous ouvrez votre valise, une fois rendu à destination, tout est exactement comme vous l’avez emballé.

Les algorithmes de compression sans perte fonctionnent exactement comme cela. Ils essaient de conserver l’image autant que possible, tout en réduisant la taille du fichier.

Quand vous affichez l’image, elle parait identique à l’originale. Cette solution est donc idéale pour maintenir la résolution des images et préserver les données.

Compression avec perte :

La compression avec perte est plus comme un tri des bagages lors de la préparation pour un long voyage. Vous décidez alors que n’avez-vous pas besoin de dix t-shirts, alors vous optez pour n’en prendre que quatre.

Votre valise sera par conséquent bien plus légère. Vous n’aurez toutefois pas accès à tout que vous aviez prévu au départ.

Cette peut vous donner les plus petites tailles de fichiers possibles. Ces gains se font toutefois au prix d’une diminution lente mais permanente de la qualité de l’image. JPEG, ou JPG, est un type d’image qui implique couramment ce type de perte.

Les différents types de compression sont donc mieux adaptés pour certaines images que d’autres. Nous aborderons plus en détail le choix du bon outil d’optimisation un peu plus loin dans cet article.

Est-ce que l’optimisation des images compte?

Sur près de 80% des pages web sur internet, des images sont les éléments ayant le plus d’impact. Les optimiser peut améliorer significativement les performances de votre site web et lui permettre de se démarquer.

Les moteurs de recherche comme Google se fie entre autres à des indicateurs appelés Core Web Vitals (CWV) pour décider quel site se classe plus haut dans les résultats.

Les Core Web Vitals sont un ensemble de mesures qui évaluent les performances d’un site web. Parmi celles-ci, l’une des mesures les plus importantes étant le Largest Contentful Paint, ou LCP.

Le LCP mesure le temps nécessaire au chargement de l’élément multimédia le plus important de la page. Pour la plupart des sites web, Il s’agit généralement de l’image ayant la plus grande taille.

Les fichiers d’image volumineux ont souvent un impact négatif sur le score LCP de votre site web. Si le vos note d’indicateurs Core Web Vitals comme le LCP sont mauvaise, cela peut avoir un effet négatif sur votre classement dans les résultats de recherche.

L’optimisation des images n’est donc pas seulement l’un des moyens les plus efficaces d’améliorer les performances de votre site. Elle peut aussi améliorer votre référencement SEO.

Différents types de fichiers image

Le bon format d’image peut affecter considérablement les performances de votre site. Cela a aussi un impact sur l’expérience utilisateur et même vos classements dans les moteurs de recherche.

Si vous utilisez des images sur votre site web, il est donc important de se familiariser avec les différents types de fichiers. Vous saurez dans quel contexte les utiliser.

JPEG (Joint Photographic Experts Group ou Groupe conjoint d’experts en photographie)

JPEG est l’un des plus anciens formats de fichiers d’image, avec BMP et GIF. Il demeure aussi l’un des plus utilisés, malgré l’apparition de nombreux formats mieux optimisés.

Avantages :

• Idéal pour les photographies et les images complexes comptant un grand nombre de couleurs.
• Offre un bon équilibre entre la taille du fichier et la qualité de l’image.
• Format le plus largement pris en charge, compatible avec tous les navigateurs et appareils.

Inconvénients :

• JPG utilise la compression avec perte. Cela signifie que certaines données sont malheureusement perdues quand l’image est compressée.
• Ne favorise pas l’utilisation de filtres transparents.
• Mal adapté aux images incluant du texte ou des bords nets. Certains éléments peuvent être flous.

JPG est idéal pour : Photographies, illustrations complexes et toute image pour laquelle une légère perte de qualité n’est pas perceptible ou importante.

PNG (Portable Network Graphics ou Graphiques réseau portables)

PNG est un format polyvalent apparu en 1996. Il fournit des images de haute qualité tout en prenant en charge la transparence.

Avantages :

• Favorise l’utilisation de filtres transparents.
• Utilise une compression sans perte, évitant toute perte de qualité lors de l’enregistrement.
• Idéal pour les images avec du texte ou des bords nets. Permet une résolution supérieure à JPG.

Inconvénients :

• Le volume des fichiers est nettement plus important que le format JPEG pour les photos et images.
• Se révèle moins efficace pour les photographies complexes.

PNG est idéal pour : Logos, captures d’écran, ou images avec texte. Ce format est aussi parfait pour toute image qui nécessite de la transparence.

GIF (Graphics Interchange Format ou format d’échange graphique)

Les GIFs sont devenu populaire sur internet grâce à leurs animations en boucle. Vous pouvez maintenant couramment les voir sous forme d’autocollants animés ou de mèmes.

Avantages :

• Prend en charge des animations simples de courte durée.
• Fichiers de taille très modeste pour des images simples.
• Largement pris en charge dans les navigateurs et les appareils

Inconvénients :

• Limité à une palette de seulement 256 couleurs.
• Ne convient pas pour les photographies ou les images complexes.
• Peut entraîner des fichiers très volumineux quand il est question de longues animations.

GIF est idéal pour : créer des animations simples, des icônes et des graphiques très simples.

WebP

Les formats d’image mentionnés ci-dessus sont assez anciens. Les besoins d’Internet ont en quelques sortes dépassé leurs capacités. C’est pourquoi Google a proposé un format d’image plus efficace: WebP.

Avantages :

• Offre le choix entre une compression avec ou sans perte.
• Permet la prise en charge de l’animation et de la transparence.
• La taille des fichiers est environ 25-35% plus petite que celles de formats JPG et PNG
• Offre un meilleur rapport qualité-volume que le format JPG.

Inconvénients :

• N’est pas pris en charge par les appareils et navigateurs moins récents.

WebP est idéal pour : Presque toutes les situations, si votre public utilise des appareils et navigateurs modernes. Particulièrement adapté aux sites web qui doivent équilibrer la qualité et la performance.

SVG (Graphiques vectoriels évolutifs)

Si nous l’avons gardé pour la fin, c’est que SVG est un peu différent des autres formats d’image. Ce type de fichier ne compose pas les images à partir de pixels. Elles sont plutôt enregistrées sous forme de formules mathématiques.

Avantages :

• Peut être agrandie à n’importe quelle taille sans perte de qualité ou de résolution.
• Fichiers de très petites tailles pour des graphiques simples.
• Le style peut être personnalisé avec CSS et le fichier manipulé avec JavaScript.
• Idéalement adapté pour un design réactif. S’ajuste facilement à tous les types d’écrans.

Inconvénients :

Les vecteurs mathématiques offrent des résultats décevants pour les photographies complexes.
Peut être lent à charger si l’image est très complexe.
Nécessite beaucoup plus de puissance de traitement que les autres formats d’images.

SVG est idéal pour : logos, icônes, émojis, et illustrations simples. Ce format est spécifiquement destiné aux éléments graphiques qui doivent être beaux à n’importe quelle taille.

3 approches pour l’optimisation des images pour le Web

L’optimisation d’images ne demande pas de connaissances techniques avancées. Même un débutant peut facilement en profiter.

Il existe de nombreux outils qui peuvent vous aider à facilement redimensionner, compresser et convertir des images en différents formats.

Ci-dessous, nous aborderons quelques méthodes différentes qui s’offrent à vous.

1. Redimensionner et recadrer les images

Tout d’abord, l’une des étapes les plus simples d’optimiser vos images est de les redimensionner ou de les recadrer. Le choix d’outil pour ce faire dépend bien sûr de vos préférences personnels.

Si vous avez de l’expérience avec un outil d’édition comme Adobe Photoshop ou Gimp, vous avez accès à une foule d’options. Pour des utilisateur moins expérimentés, des solutions simples comme Canva ou Microsoft Photo faire le travail.

Ces outils vous permettent tout d’abord de rogner et redimensionner des images. Pour des outils comme Gimp ou Photoshop, ces options sont accessibles dans la section Image de la barre supérieur.

L’option Échelle et taille d’image disponible dans de ce menu permet d’ajuster la taille de l’image. Vous pouvez également choisir de rogner selon le contenu ou selon votre sélection.

Si vous n’avez accès à aucun de ces outils, vous pouvez simplement utiliser le lecteur de photos par défaut de votre appareil pour redimensionner et recadrer.

Les outils d’édition vous permettre aussi d’enregistrer vos image à des niveaux de résolution plus bas ou modifier leur format, afin de réduire la taille des fichiers. Ces options sont généralement disponibles au moment de la sauvegarde du fichier.

2. Utiliser un outil en ligne pour compresser et optimiser les images

Les outils d’optimisation d’images en ligne vous permettent également tout ce que l’on vient de mentionner, et même un peu plus.

Certains outils d’optimisation vous permettent de traiter plusieurs images à la fois. Cette option peut vous faire gagner beaucoup de temps si vous avez un grand nombre d’images.

TinyPNG

TinyPNG est une application web d’optimisation très conviviale. Elle vous permet de compresser jusqu’à 20 images 5 Mo chacune à la fois.

Cet outil est gratuit à utiliser et prend en charge les images WebP, PNG et JPG. Il ne permet pas les images SVG ni les fichiers d’un volume supérieur à 5 Mo.

Pour optimiser une image avec TinyPNG, il suffit de téléverser vos fichiers d’images dans le cadre affiché en haut de la page et d’attendre que le processus de compression soit terminé.

Vous pouvez ensuite voir les résultats et télécharger vos images optimisées. D’après nos tests, la taille des images diminue généralement de 40 à 70 %.

Kraken.io

Kraken.io est un autre outil d’optimisation d’images en ligne que vous pouvez utiliser. Il vous permet lui aussi de compresser plusieurs images à la fois.

Kraken offre une vaste variété d’options. Vous pouvez choisir le type de compression, la façon dont vous voulez exporter les fichiers, et plus encore.

Vous pouvez aussi choisir parmi trois modes d’optimisation: « Avec perte », « Sans perte » et « Expert ».

Le choix « Expert » vous donne plus de contrôle sur la façon dont vos images sont compressées. Vous pouvez choisir de prioriser la qualité d’image sur la taille du fichier, ou vice versa.

Pour optimiser une image avec Kraken.io, vous devez d’abord téléverser les images que vous souhaitez compresser. Sélectionnez ensuite un mode d’optimisation et une option de téléchargement.

3. Installer un plugin WordPress d’optimisation d’images

Si vous avez un site WordPress, il n’est pas nécessaire d’optimiser les images avant de les téléverser. Vous pouvez facilement automatiser le processus.

Il existe plusieurs plugins WordPress qui peuvent optimiser les images au fur et à mesure que vous les téléversez. Examinons un peu plus en détails quelques-uns des plugins d’optimisation d’images les plus populaires.

Smush

Smush est un optimiseur d’image WordPress très populaire. Il compte plus d’un million d’installations actives et une cote de cinq étoiles.

Ce plugin vous aide à améliorer le temps de chargement de vos page en compressant et redimensionnant vos images.

Il offre la fonction « Bulk Smush », qui détecte les images sur votre site qui peuvent être optimisées. Il vous permet ensuite de les compresser en masse.

Vous pouvez également définir les dimensions maximales des images. Smush redimensionnera alors automatiquement les images qui dépassent les limites, tout en maintenant les proportions originales.

La version gratuite de Smush offre de nombreuses fonctionnalités de personnalisation. Cela inclut le Lazy Loading et la compression de masse de Smush, qui vous aide à optimiser votre site WordPress avec un minimum d’efforts.

Smush Pro vous donne évidemment accès à plus de fonctionnalités. Cela inclut l’option de compresser automatiquement les images et de les enregistrer au format WebP. Les forfaits commencent toutefois à 15 $ (USD) par mois.

ShortPixel Image Optimizer

ShortPixel est un plugin WordPress de compression d’image très léger. Un de ses principaux avantages est qu’il prend en charge les formats d’image HEIC (format Apple), WebP et AV1 Image File Format (AVIF).

ShortPixel offre aussi un rognage intelligent. Les vignettes de vos images ne sont donc pas seulement optimisées mais aussi recadrées pour afficher automatiquement le sujet de l’image. Cette fonctionnalité est spécialement conçue et adaptée pour les sites de commerce électronique.

ShortPixel supporte trois méthodes de compression différentes : avec perte, sans perte, et « lustré » (lossy, glossy et lossless). Nous avons déjà vu la compression avec perte et sans perte. L’option « glossy » ou « lustrée » est toutefois plutôt unique.

Il s’agit d’un algorithme de compression avec « perte de haute qualité ». C’est une solution spécifique à ShortPixel et conçue pour les photographes. Si vous avez un site de portfolio de photographie, ShortPixel pourrait donc être parfait pour vos besoins d’optimisation d’images.

Le site vous permet également de compresser vos vignettes et de créer une sauvegarde de vos images originales.

Si vous souhaitez plus d’options, vous pouvez passer à la version premium. Les offres débutent à 9,99 $ par mois, mais vous pouvez aussi acheter des crédits et les utiliser au besoin.

Pour conclure sur comment l’optimisation d’images peut accélérer votre site web

L’optimisation des images peut avoir un impact positif important sur les performances de votre site web. Vous pouvez accélérer le chargement et améliorer vos classements dans les résultats de recherche en redimensionnant et en compressant vos images.

Dans cet article, nous vous avons présenté trois façons simples d’optimiser vos images :

• Redimensionnez et recadrez les images via un logiciel d’édition
• Utilisez un outil en ligne de compression d’images
• Installez un plugin WordPress d’optimisation

Nous espérons que cet article vous a éclairé sur l’optimisation d’images. Si c’est le cas, nous vous invitons à consulter nos autres autres articles et tutoriels.

N’hésitez pas non plus à consulter notre base de connaissance. Vous y trouverez une foule d’articles détaillés pouvant répondre à toutes vos questions web.