Adieu, JPG : Voici Comment Optimiser Les Images Pour Le Web Moderne (WebP, SVG, et Plus)

Imagine avoir à attendre cinq secondes pour chaque image en faisant défiler Instagram. Peux-tu penser à quelqu’un voulant attendre aussi longtemps pour chaque image à charger ? Nous ne le pensons pas.

Les images, bien que nécessaires, peuvent être délicates à manipuler. Elles ajoutent beaucoup de volume à la page web et peuvent ralentir votre site, même si tout le reste est correctement fait.

Selon une recherche de Google, un visiteur est 90% plus susceptible de quitter votre site web lorsque le temps de chargement passe d’une seconde à cinq secondes. Cela non seulement réduit les chances de conversion, mais impacte également négativement l’optimisation des moteurs de recherche (SEO).

Optimiser les images pour le web — réduire leur taille sans perdre en qualité — peut t’aider à améliorer les temps de chargement de tes pages et à réduire le volume des fichiers. Ça semble demander beaucoup d’effort, mais avec les bons outils d’optimisation d’image, tu peux simplifier le processus et booster facilement les performances de ton site.

Dans ce guide, nous parlerons de l’importance de l’optimisation des images et de son impact sur ton site web. Ensuite, nous examinerons quelques différentes méthodes pour optimiser tes images.

Sautons directement dans le vif du sujet !

Qu’est-ce Que l’Optimisation d’Images pour le Web ?

L’optimisation d’image est le processus de rendre tes images web aussi compactes que possible sans sacrifier la qualité.

Pense-le comme préparer tes bagages pour un voyage — tu veux emporter tout ce dont tu as besoin, mais tu ne veux pas trimballer une valise lourde.

De même, nous voulons que nos images soient magnifiques mais, en même temps, qu’elles ne ralentissent pas notre site web.

Comment Fonctionne L’Optimisation Des Images ?

Disons que tu as une photo de ton chien que tu veux mettre sur ton site web.

Tout d’abord, nous examinons les dimensions, ou la résolution de l’image.

Si tu optimises ton site mobile et qu’il a seulement besoin d’afficher des images jusqu’à 1000 pixels de large, il est inutile de télécharger une photo de 4000 pixels de large. Certes, elle sera plus belle, mais cela sera imperceptible pour tes visiteurs et finira par ralentir ton site. Simplement redimensionner l’image peut considérablement réduire la taille du fichier.

Ensuite, nous passons à la compression. Nous discuterons des types de compression dans un instant. Pour l’instant, souviens-toi qu’il existe deux types : avec perte et sans perte.

Si nous utilisons une compression sans perte, nous disons à l’ordinateur, “Rends cela plus petit, mais ne change pas son apparence !”

L’algorithme, ou l’outil de compression, trouvera un moyen de réduire la taille du fichier sans perdre en qualité en organisant simplement mieux le fichier.

Si nous optons pour une compression avec perte, nous disons, “Rends cela plus petit, et ce n’est pas grave si tu dois enlever quelques éléments, tant que cela reste beau.”

L’algorithme peut décider que deux nuances de bleu très similaires ne font qu’une, ou que certains détails minuscules dans l’arrière-plan ne sont pas super importants. Ou peut-être que le ciel sombre n’a pas besoin d’autant de pixels dédiés au noir. Nous pouvons également éliminer des infos supplémentaires cachées dans le fichier image. Des choses comme le moment et le lieu de la prise de photo, quel appareil a été utilisé — des trucs dont nous n’avons pas besoin pour un site web.

Alors, pour résumer : nous commençons avec une photo de chien de 5MB. Nous la redimensionnons, puis la compressons soigneusement, enlevons les informations superflues, et l’enregistrons en tant que WebP. Maintenant, nous avons une image de 100KB qui est toujours magnifique mais se charge beaucoup plus rapidement.

Et c’est l’objectif de l’optimisation d’image : rendre les images suffisamment petites pour se charger rapidement, tout en restant assez belles pour mettre en valeur ton chien fantastique.

C’est un exercice d’équilibre, mais avec un peu de pratique, tu vas t’y habituer. Tes visiteurs de site te remercieront quand ils pourront voir ton adorable chiot sans attendre le chargement de l’image.

Comment Choisir Un Outil De Compression D’image ?

Le meilleur algorithme de compression d’image est celui qui peut créer les fichiers d’image les plus petits sans perdre en qualité. Cependant, cela dépend également du type de compression qui peut t’aider à atteindre la taille de fichier désirée.

Comme nous l’avons mentionné précédemment, il existe deux types de compression :

• Compression Sans Perte : Imagine-toi en train de préparer tes bagages pour un voyage en utilisant des sacs de rangement sous vide. Tu expulses tout l’air, rendant tes affaires plus petites. Et quand tu déballes, tout est exactement comme tu l’avais emballé. Les algorithmes de compression sans perte fonctionnent exactement de cette manière. Ils tentent de conserver autant que possible l’image tout en réduisant la taille du fichier. Quand tu ouvres l’image, elle paraît identique à l’originale. C’est idéal pour garder les images parfaitement claires sans supprimer de données.
• Compression Avec Perte : La compression avec perte, c’est un peu comme faire ses bagages pour un long voyage en laissant quelques affaires derrière. Peut-être que tu n’as pas besoin de tes dix t-shirts, donc tu n’en emportes que quatre. Certes, ton sac est plus léger, mais tu as aussi perdu une partie de ce que tu avais au départ. Cela peut te donner les tailles de fichiers les plus petites possibles, mais cela se fait au prix d’une baisse lente mais permanente de la qualité de l’image. Le JPEG, ou JPG, est un type d’image avec perte couramment utilisé.

Par exemple, si tu envoies des scans de documents où le texte doit être lisible, tu souhaiteras une compression sans perte. Mais pour des photos normales que tu as prises lors de ton voyage ? La compression avec perte fera un bon travail et te donnera également un fichier image beaucoup plus petit sans qu’il soit évident que l’image a été compressée.

Maintenant, la question est, est-ce que tout cela compte vraiment ?

L’Optimisation Des Images Est-Elle Importante ?

Près de 80% des pages web sur internet ont des images comme élément le plus impactant. Cela signifie que les optimiser peut donner à ton site web un coup de pouce significatif en termes de performance.

Les moteurs de recherche comme Google prennent également en compte les Core Web Vitals (CWV) pour décider quel site est mieux classé.

Core Web Vitals est un ensemble de métriques qui mesurent la performance d’un site, la métrique la plus importante étant le Largest Contentful Paint (LCP).

LCP mesure le temps nécessaire pour charger l’élément le plus grand de la page. Cela correspond généralement à l’image principale pour la plupart des sites web.

Ces fichiers image volumineux ont souvent un impact négatif sur le score LCP de ton site web. Et si le score reste ainsi pendant un certain temps, cela peut avoir un effet déprimant sur tes conversions.

Par conséquent, optimiser les images est l’une des méthodes les plus efficaces pour améliorer les performances de ton site et booster ton SEO.

Différents Types de Fichiers d’Images

Choisir le bon format d’image ne consiste pas seulement à rendre tes photos jolies.

Le format d’image approprié peut affecter de manière spectaculaire la performance de ton site web, l’expérience utilisateur, et même ton classement dans les moteurs de recherche.

Alors, si tu utilises des images sur ton site web, il est important de te familiariser avec les différents types de fichiers et de savoir quand les utiliser.

JPEG (Joint Photographic Experts Group)

JPEG est l’un des plus anciens formats de fichiers d’image, avec BMP et GIF.

Avantages :

• Idéal pour les photographies et les images complexes avec beaucoup de couleurs.
• Offre un bon équilibre entre la taille du fichier et la qualité de l’image.
• Largement pris en charge par tous les navigateurs et appareils.

Inconvénients :

• Il utilise une compression avec perte, ce qui signifie que certaines données sont perdues lorsque l’image est compressée.
• Ne prend pas en charge la transparence.
• Pas idéal pour les images contenant du texte ou des bords nets, car ils peuvent paraître flous.

Idéal pour : Photographies, illustrations complexes, et toutes les images où une légère perte de qualité n’est pas perceptible.

PNG (Portable Network Graphics)

PNG est un format polyvalent qui offre des images de haute qualité tout en prenant en charge la transparence.

Avantages :

• Prend en charge la transparence.
• Utilise une compression sans perte, donc il n’y a pas de perte de qualité lors de l’enregistrement.
• Idéal pour les images avec du texte ou des bords nets.

Inconvénients :

• Tailles de fichier plus grandes comparées au JPEG pour les photographies.
• Moins efficace pour les photographies complexes.

Idéal pour : Logos, captures d’écran, images avec texte ou toute image nécessitant de la transparence.

GIF (Format d’Échange de Graphiques)

Les GIFs ont conquis internet avec leurs animations en boucle, et tu peux les voir sous forme d’autocollants animés ou de mèmes.

Avantages :

• Prend en charge des animations simples.
• Taille de fichier réduite pour des images simples.
• Largement pris en charge par les navigateurs et les appareils

Inconvénients :

• Limité à 256 couleurs.
• Non adapté pour les photographies ou les images complexes.
• Peut entraîner de grandes tailles de fichiers pour les animations longues.

Idéal pour : Animations simples, icônes et graphiques très simples.

WebP

Puisque les formats d’image mentionnés ci-dessus sont assez anciens et qu’internet a largement dépassé leurs capacités, Google a créé WebP pour un format d’image plus efficace.

Avantages :

• Offre à la fois une compression avec perte et sans perte.
• Prend en charge l’animation et la transparence.
• Tailles de fichier nettement inférieures par rapport à JPEG et PNG (environ 25-35% plus petites).
• Rapport qualité-taille meilleur que JPEG.

Inconvénients :

• Non pris en charge par les navigateurs plus anciens (je te regarde, Internet Explorer).

Idéal pour : Pratiquement tout, si ton public utilise des navigateurs modernes. C’est particulièrement important pour les sites web qui doivent équilibrer qualité et performance.

SVG (Graphiques Vectoriels Scalables)

Le format SVG est un peu différent des autres formats d’image. Au lieu d’être composé de pixels, les SVG sont basés sur des formules mathématiques.

Avantages :

• Se redimensionne à n’importe quelle taille sans perdre en qualité.
• Taille de fichier très petite pour des graphiques simples.
• Peut être stylisé avec CSS et manipulé avec JavaScript.
• Idéal pour le design réactif.

Inconvénients :

• Non adapté pour des photographies complexes.
• Peut être lent à rendre s’il est très complexe.
• Nécessite plus de puissance de traitement que les images.

Idéal pour : Logos, icônes, illustrations simples et tout graphique qui doit paraître net à n’importe quelle taille.

3 Façons Faciles D’optimiser Les Images Pour Le Web

Maintenant que tu comprends ce qu’est l’optimisation, et quels sont les différents types de fichiers, voyons comment nous pouvons optimiser une image en action.

Heureusement, l’optimisation des images ne nécessite pas de connaissances techniques avancées. Il existe un certain nombre d’outils qui peuvent t’aider à redimensionner, compresser et convertir les images dans différents formats facilement.

Examinons de près quelques méthodes différentes.

1. Redimensionner et Rogner les Images

L’une des étapes les plus simples que tu peux prendre pour optimiser tes images est de les redimensionner ou de les recadrer. Tu pourrais utiliser un outil de retouche photo comme Adobe Photoshop pour les utilisateurs avancés ou Canva si tu préfères quelque chose de simple et prêt à l’emploi. Ces deux outils peuvent t’aider à recadrer et redimensionner les images et également à enregistrer en résolutions inférieures pour réduire la taille des fichiers.

Tu peux également utiliser la visionneuse de photos par défaut de ton ordinateur pour redimensionner et recadrer.

Si tu utilises Windows, tu peux facilement recadrer et redimensionner des images dans Microsoft Photos. Sur Mac, l’application s’appelle « Preview ».

Nous allons montrer comment cela fonctionne sur un ordinateur Windows.

Pour commencer, ouvre ton image dans l’application « Photos » en double-cliquant sur l’image.

Ensuite, clique sur la première icône pour Modifier l’image dans le menu supérieur :

Maintenant, clique sur l’icône Crop en haut de la barre de menu Éditer et décide quelle partie de l’image tu veux utiliser.

Tu peux également redimensionner des images en utilisant l’éditeur de photos Windows en cliquant sur les trois points puis en sélectionnant Redimensionner.

Maintenant, tu peux choisir différentes tailles d’image ou entrer tes propres dimensions pour l’image.

Si tu cliques sur Définir des dimensions personnalisées, tu peux changer la largeur et la hauteur de l’image et également contrôler sa qualité à l’aide du curseur.

Par exemple, si tu souhaites compresser l’image sans changer les dimensions, tu peux réduire la qualité de l’image pour obtenir des fichiers d’image plus petits.

À la fin, clique sur Enregistrer la copie redimensionnée. Nous te recommandons de choisir un nom différent pour l’image redimensionnée afin d’éviter d’écraser l’originale.

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

Tu peux aussi faire la même chose et un peu plus avec les outils d’optimisation d’image en ligne. Certains outils d’optimisation t’aident également à traiter les images en masse. Cela peut t’aider à économiser beaucoup de temps.

Squoosh

Chez DreamHost, nous adorons utiliser Squoosh pour plusieurs raisons :

• C’est gratuit et basé sur le web : Tu n’as pas besoin de télécharger ou d’installer quoi que ce soit.
• Affiche une comparaison en temps réel : Tu peux voir comment tes optimisations affectent instantanément la qualité de l’image.
• Prend en charge plusieurs formats de fichiers : Il te donne l’option de choisir le type de fichier de sortie. 
• Offre une sélection de méthodes de compression : Tu peux choisir entre les différentes méthodes/algorithme de compression et également voir comment ta sélection affecte la taille finale du fichier et la qualité de l’image en temps réel.

Voici comment tu peux redimensionner une image avec Squoosh.

Rends-toi sur https://squoosh.app et ajoute une image depuis ton appareil. Si tu testes simplement la plateforme, tu peux utiliser une des images de démonstration qu’ils ont fournies dans la section « Ou essaye l’une de celles-ci” .

Une fois que tu vois l’image, tu verras un panneau sur le côté droit de la page avec différentes options de compression d’image. Bascule sur le bouton Redimensionner.

Cela te donnera quelques options supplémentaires pour changer la méthode de redimensionnement, sélectionner une taille prédéfinie, et plus encore. Pour cet exemple, nous avons sélectionné la taille prédéfinie à 33,33%. 

Cela signifie que les dimensions de l’image seront réduites à 33,33 % de la taille originale. Ainsi, si ton image originale avait une largeur de 3000 pixels, sélectionner le préréglage de 33,33 % te donnera une image de 1000 pixels de large.

Tu remarqueras également que redimensionner l’image réduit considérablement la taille du fichier — dans notre exemple, de 60%.

Une fois terminé, clique sur le bouton bleu Télécharger en bas à droite de ton écran, et voilà ! Tu as maintenant une image compressée.

TinyPNG

TinyPNG est une application web conviviale qui te permet de compresser jusqu’à 20 images à la fois, chacune pouvant aller jusqu’à 5MB. C’est gratuit à utiliser et prend en charge les images WebP, PNG et JPEG.

Malheureusement, tu ne peux pas optimiser les images SVG avec celui-ci pour l’instant. Cet outil est le meilleur pour toi uniquement si tes images font déjà moins de 5 Mo.

Pour optimiser une image avec TinyPNG, il suffit de télécharger tes fichiers d’image dans la boîte en haut de la page et d’attendre que le processus de compression se termine.

C’est tout ! Tu peux ensuite examiner les résultats et télécharger tes images optimisées. Pour les images brutes, nous avons remarqué une réduction de la taille des images de 40 % à 70 %.

Kraken.io

Kraken.io est un autre optimiseur d’images en ligne que tu peux utiliser. Comme TinyPNG, il te permet de compresser des images en masse.

Kraken offre une variété d’options pour choisir le type de compression, comment tu souhaites exporter les fichiers, et plus encore.

Par exemple, tu peux choisir parmi trois modes d’optimisation, y compris « Lossy », « Lossless » et « Expert ».

Kraken.io te donne plus de contrôle sur la manière dont tes images sont compressées. Tu peux choisir de prioriser la qualité de l’image plutôt que la taille du fichier, ou inversement.

Pour optimiser une image avec Kraken.io, télécharge simplement les images que tu souhaites compresser, sélectionne une méthode d’optimisation et choisis une option de téléchargement.

Par exemple, tu peux télécharger chaque fichier individuellement, télécharger plusieurs fichiers ensemble dans un fichier zip, les téléverser directement sur Dropbox, ou les partager directement sur Facebook et Twitter.

Cependant, le principal inconvénient de cet outil est que la version gratuite est assez limitée. Ils offrent un quota de test de 100MB et un maximum de 1MB, ce qui, si tu compresses des images en masse, peut être consommé en une seule utilisation. 

3. Installe un Plugin WordPress

Si tu as un site web WordPress, tu n’as pas besoin de compresser les images avant de les télécharger. Il existe plusieurs plugins qui travaillent en arrière-plan, optimisant les images WordPress au moment où tu les télécharges — et accélérant le chargement de ton site dans le processus.

Regardons certains des Plugins d’optimisation d’image les plus populaires.

Smush

Smush est un optimiseur d’images WordPress populaire avec plus d’un million d’installations actives et une note de cinq étoiles. Il t’aide à améliorer les temps de chargement de tes pages en compressant et redimensionnant tes images.

Par exemple, la fonctionnalité « Bulk Smush » détecte les images sur ton site qui peuvent être optimisées et te permet de les compresser en masse.

Tu peux également définir les dimensions maximales des images, et Smush redimensionnera automatiquement les images qui dépassent les limites tout en conservant les proportions.

Il existe de nombreuses fonctionnalités de personnalisation dans la version gratuite de Smush, y compris le chargement paresseux et la fréquence de compression en masse qui t’aident à optimiser ton site web WordPress avec un effort minimal supplémentaire.

Si tu passes à Smush Pro, tu auras accès à plus de fonctionnalités, y compris l’option de compresser automatiquement les images et de les servir au format WebP. Les abonnements commencent à 15 $ par mois.

Optimiseur d’Images ShortPixel

ShortPixel est un plugin de compression d’images léger pour les sites web WordPress. L’un des principaux avantages de ShortPixel est qu’il prend en charge les formats d’image HEIC (format Apple), WebP et AV1 Image File Format (AVIF).

En plus de cela, ShortPixel dispose également d’un rognage intelligent. Grâce à cette fonctionnalité, toutes les miniatures de tes images ne sont pas seulement optimisées, mais également recadrées pour afficher automatiquement le sujet de l’image. Cette fonctionnalité est spécialement conçue pour les sites web de commerce électronique.

ShortPixel prend en charge trois méthodes de compression différentes : lossy, glossy et lossless.

Nous avons parlé de compressions avec perte et sans perte. Mais le terme brillant est nouveau ici.

Glossy est un algorithme de compression avec perte de haute qualité, spécifique à ShortPixel, conçu pour les photographes. Donc, si tu as un site web de portfolio photographique, ShortPixel pourrait être parfait pour tes besoins de compression d’images.

Tu peux également compresser tes miniatures et créer une sauvegarde de tes images originales. Pour plus d’options, tu peux passer à la version premium, qui commence à 9,99 $ par mois. Tu peux aussi acheter des crédits en gros et les utiliser selon tes besoins.

Jetpack

Bien que Jetpack ne soit pas un plugin d’optimisation d’images, sa fonctionnalité Site Accelerator inclut une option pour optimiser les images et les héberger sur un réseau de distribution de contenu (CDN).

Tu peux trouver ces options d’optimisation d’image sous les paramètres Performance & vitesse du plugin :

Ces fonctionnalités sont disponibles gratuitement avec Jetpack Boost. Ce plugin comprend également d’autres outils qui t’aident à améliorer les performances de ton site web.

Accélère Ton Site Avec Des Images Optimisées

Des images mal optimisées peuvent avoir un impact négatif sur la performance de ton site. Heureusement, tu peux accélérer ton site et améliorer les classements SEO simplement en redimensionnant et en compressant tes images.

Pour résumer, voici trois façons faciles d’optimiser tes images :

1. Redimensionne et recadre des images en utilisant un programme comme Adobe Photoshop, Microsoft Photos ou Aperçu sur Mac.
2. Utilise un outil de compression en ligne comme Squoosh.app, TinyPNG, ou Kraken.io.
3. Installe un plugin d’optimisation WordPress comme Smush Pro, Short Pixel, ou Jetpack Boost.

Tu peux également améliorer les performances de ton site en choisissant un plan d’hébergement puissant. Notre DreamPress : Hébergement WordPress géré offre un service rapide et fiable avec un support 24/7 et une garantie de disponibilité de 100% !

Découvre nos offres aujourd’hui.