Faites-nous confiance, vous ne voulez pas que Google déteste votre site Web. Heureusement, vous pouvez réduire la taille de vos images pour améliorer les performances de votre site Web. Un problème avec la réduction de leur taille est que les modifications réduisent souvent leur qualité (ce qui peut à son tour faire que le visiteur déteste votre site Web). Ce n’est pas une mauvaise chose tant que vous ne les rendez pas laides. Il y a quelques astuces et techniques qui vous permettent de réduire la taille de vos images et de les garder assez jolies pour les afficher fièrement sur votre site Web. Regardons donc comment réduire la taille de vos images sans les rendre laides, et comment optimiser les images pour le web et la performance.

Les avantages de l’optimisation de vos images

Tout d’abord, pourquoi avez-vous besoin d’optimiser vos images ? Quels sont les avantages ? Il y a de nombreux avantages à optimiser vos images pour la performance. Selon <a href="https://httparchive.org/reports/page-weight" target="_blank" rel="noopener noreferrer"HTTP Archive, en novembre 2018, les images représentent en moyenne 21% du poids total d’une page web. Ainsi, lorsqu’il s’agit d’optimiser votre site WordPress, aprÈs le contenu video, les images sont de loin le premier endroit où vous devriez commencer !
C’est plus important que les scripts et les polices. Et ironiquement, un bon flux de travail d’optimisation d’image est l’une des choses les plus faciles à mettre en œuvre, mais beaucoup de propriétaires de sites Web négligent cela.

Nombre moyen d'octets par page (KB)

Nombre moyen d’octets par page (KB)

Voici un aperçu des principaux avantages.

Toujours à la recherche de cet hébergeur WordPress parfait ?

Essayez l'hébergement WordPress Premium de Kinsta pour découvrir votre site sans problèmes.
  • Contrôles stylisés représentant la gestion Entièrement infogéré
  • Bouclier avec une tique représentant la sécuritéSécurisé comme le fort knox
  • Fusionner des lignes représentant des migrationsMigrations gratuites
  • Trois chevrons droits représentant la vitesse du serveurVitesse ultime
  • Flèche circulaire avec un point central représentant les sauvegardesSauvegardes quotidiennes
  • Hexagones décalés représentant notre pile de serveursPlatforme Google Cloud
  • Cela améliorera votre vitesse de chargement des pages (voir notre étude de cas ci-dessous pour savoir dans quelle mesure cela affecte votre vitesse).  Si votre page prend trop de temps à charger, vos visiteurs pourraient se fatiguer d’attendre et passer à autre chose. Pour plus d’informations sur l’optimisation du temps de chargement de vos pages, consultez notre guide détaillé sur l’optimisation de la vitesse des pages.
  • Combiné avec une excellente extension SEO WordPress, cela améliore votre référencement. Votre site sera mieux classé dans les résultats des moteurs de recherche. Les gros fichiers ralentissent votre site et les moteurs de recherche détestent les sites lents. Google est également susceptible de crawler et d’indexer vos images plus rapidement pour la recherche d’images Google. Curieux de savoir quel pourcentage de votre trafic provient de la recherche d’images Google ? Vous pouvez utiliser un segment Google Analytics pour vérifier le trafic de recherche d’images Google.
  • La création de sauvegardes sera plus rapide.
  • Les fichiers d’images de petite taille utilisent moins de bande passante. Les réseaux et les navigateurs apprécieront.
  • Requiert moins d’espace de stockage sur votre serveur (cela dépend du nombre de vignettes que vous optimisez).
Les images représentent en moyenne 21% du poids total d'une page web. ? Optimisez-les ! ? Cliquez pour Tweet

Comment optimiser les images pour le Web et la performance ?

Le but premier de l’optimisation de vos images est de trouver l’équilibre entre la taille de fichier la plus petite et une qualité acceptable. Il y a plus d’une façon d’effectuer presque toutes ces optimisations. L’une des façons les plus populaires est de simplement les compresser avant de les télécharger vers WordPress. Habituellement, cela peut être fait dans un outil comme Adobe Photoshop ou Affinity Photo. Certaines de ces tâches peuvent également être effectuées à l’aide d’extensions, dont nous parlerons plus loin.

Les deux choses principales à considérer sont le format de fichier et le type de compression que vous utilisez. En choisissant la bonne combinaison de format de fichier et de type de compression, vous pouvez réduire la taille de votre image jusqu’à 5 fois. Vous devrez expérimenter avec chaque format d’image ou de fichier pour voir ce qui fonctionne le mieux.

Choisir le bon format de fichier

Avant de commencer à modifier vos images, assurez-vous d’avoir choisi le meilleur type de fichier. Il existe plusieurs types de fichiers que vous pouvez utiliser :

  • PNG – produit des images de meilleure qualité, mais aussi des fichiers de plus grande taille. Il a été créé comme un format d’image lossless (sans perte), bien qu’il puisse aussi être Lossy.
  • JPEG – utilise l’optimisation lossy ou lossless (avec ou sans perte). Vous pouvez ajuster le niveau de qualité pour un bon équilibre entre la qualité et la taille du fichier.
  • GIF – n’utilise que 256 couleurs. C’est le meilleur choix pour les images animées. Il n’utilise que la compression lossless.

Il y en a plusieurs autres, comme JPEG XR et WebP, mais ils ne sont pas universellement supportés par tous les navigateurs. Idéalement, vous devriez utiliser JPEG (ou JPG) pour les images avec beaucoup de couleurs et PNG pour les images simples.

Qualité de compression par rapport à la taille

Voici un exemple de ce qui peut arriver si vous compressez trop une image. Le premier exemple est l’utilisation d’un taux de compression très faible, ce qui permet d’obtenir la meilleure qualité (mais avec une taille de fichier plus grande). Le second est l’utilisation d’un taux de compression très élevé, ce qui donne une image de très mauvaise qualité (mais avec une taille de fichier plus petite). Remarque : L’image originale intacte est de 2,06 Mo.

Faible compression (haute qualité) JPG - 590 KB

Faible compression (haute qualité) JPG – 590 KB

Haute compression (basse qualité) JPG - 68 KB

Haute compression (basse qualité) JPG – 68 KB

Comme vous pouvez le voir, la première image ci-dessus est de 590 KB. C’est assez grand pour une photo ! Il est généralement préférable que le poids total d’une page Web soit inférieur à 1 ou 2 Mo. 590 KB serait déjà un quart de ce chiffre. La deuxième image est évidemment horrible, mais elle n’est que de 68 Ko. Ce que vous devez faire est de trouver un juste milieu entre votre taux de compression (qualité) et la taille du fichier.

Nous avons donc repris l’image à un taux de compression moyen et comme vous pouvez le voir ci-dessous, la qualité est bonne maintenant et la taille du fichier est de 151 Ko, ce qui est acceptable pour une photo haute résolution. C’est presque 4x plus petit que la photo originale avec une faible compression. En général, les images plus simples comme les PNG devraient être inférieures à 100 Ko ou moins pour obtenir les meilleures performances.

Compression moyenne (grande qualité) JPG - 151 KB

Compression moyenne (grande qualité) JPG – 151 KB

Optimisation lossy ou lossless (avec ou sans perte)

Il est également important de comprendre qu’il existe deux types de compression que vous pouvez utiliser, lossy et lossless.

Lossy – il s’agit d’un filtre qui élimine certaines données. Cela dégradera l’image, vous devrez donc faire attention à la réduction de l’image. La taille du fichier peut être réduite d’une grande quantité. Vous pouvez utiliser des outils tels que Adobe Photoshop, Affinity Photo ou d’autres éditeurs d’images pour ajuster les paramètres de qualité d’une image. L’exemple que nous avons utilisé ci-dessus est l’utilisation de la compression lossy.

Lossless – il s’agit d’un filtre qui compresse les données. Cela ne réduit pas la qualité, mais il faudra que les images soient décompressées avant qu’elles puissent être rendues. Vous pouvez effectuer une compression lossless sur votre bureau à l’aide d’outils tels que Photoshop, FileOptimizer ou ImageOptim.

Il est préférable d’expérimenter avec vos techniques de compression pour voir ce qui fonctionne le mieux pour chaque image ou format. Si vos outils ont l’option, assurez-vous d’enregistrer l’image pour le web. C’est une option présente dans de nombreux éditeurs d’images et qui vous donnera les ajustements de qualité pour que vous puissiez effectuer une compression optimale. Vous perdrez une partie de la qualité, alors faites des expériences pour trouver le meilleur équilibre possible sans rendre les images laides.

Outils et programmes d’optimisation d’images

Il existe de nombreux outils et programmes, gratuits ou non, que vous pouvez utiliser pour optimiser vos images. Certains vous donnent les outils pour effectuer vos propres optimisations et d’autres font le travail pour vous. Nous sommes personnellement de grands fans d’Affinity Photo, car il est bon marché et vous offre des fonctionnalités presque identiques à celles d’Adobe Photoshop.

Compression d'une photo avec Affinity Photo

Compression d’une photo avec Affinity Photo

Voici quelques outils et programmes supplémentaires à vérifier :

Redimensionnement des images à l’échell

Dans le passé, il était très important de télécharger des images à l’échelle et de ne pas laisser le CSS les redimensionner. Cependant, ce n’est plus aussi important puisque WordPress 4.4 supporte maintenant les images responsives (non mises à l’échelle par CSS). Fondamentalement, WordPress crée automatiquement plusieurs tailles de chaque image téléchargée dans la médiathèque. En incluant les tailles disponibles d’une image dans un attribut srcset les navigateurs peuvent maintenant choisir de télécharger la taille la plus appropriée et ignorer les autres. Voyez un exemple de ce à quoi ressemble votre code ci-dessous.

Exemple d'images sensibles à srcset dans le code

Exemple d’images sensibles à srcset dans le code

Ainsi, avec de plus en plus d’écrans HiDPI de nos jours, il peut être bon de trouver un juste milieu. Disons 2x ou 3x la taille de la colonne ou de la div de votre site Web, mais toujours inférieure à la taille d’origine. Le navigateur affichera le bon en fonction de la résolution de l’appareil.

La médiathèque WordPress crée des vignettes en fonction de vos paramètres. Cependant, l’originale est toujours conservée et intacte. Si vous voulez redimensionner vos images et économiser de l’espace disque en n’enregistrant pas l’originale, vous pouvez utiliser une extension gratuite comme Imsanity.

Paramètres des médias WordPress

Paramètres des médias WordPress

Imsanity vous permet de fixer une limite afin que toutes les images téléchargées soient limitées à une taille raisonnable qui reste plus que suffisante pour les besoins d’un site Web typique. Imsanity s’accroche à WordPress immédiatement après le téléchargement de l’image, mais avant le traitement WordPress. Donc WordPress se comporte exactement de la même façon, sauf que ce sera comme si le contributeur avait mis à l’échelle son image à une taille raisonnable avant le téléchargement.

Extensions d’optimisation d’image que vous pouvez utiliser

Heureusement, avec WordPress, vous n’avez pas à faire toute l’optimisation ou la compression à la main. Vous pouvez utiliser des extensions pour faire au moins une partie du travail pour vous automatiquement. Il existe plusieurs extensions qui optimiseront automatiquement vos fichiers image au fur et à mesure que vous les téléchargez. Elles optimiseront même les images que vous avez déjà téléchargées. C’est une fonction pratique – surtout si vous avez déjà un site Web rempli d’images. Voici quelques-unes des meilleures extensions pour optimiser vos images pour de meilleures performances.

Il est cependant important que vous ne vous fiiez pas uniquement aux extensions elles-mêmes. Par exemple, vous ne devriez pas télécharger des images de 2 Mo dans votre médiathèque WordPress. Cela peut se traduire par une consommation très rapide de l’espace disque de vos hébergements web. La meilleure méthode est de redimensionner rapidement l’image dans un outil de retouche photo au préalable, puis de la télécharger et d’utiliser l’une des extensions suivantes pour la réduire davantage.

Imagify Image Optimizer

Extension Imagify Image Optimizer

Extension Imagify Image Optimizer

Imagify est créé par la même équipe qui a développé WP Rocket, ce qui est probablement familier à la plupart d’entre vous. Il est compatible WooCommerce, NextGen Gallery et WP Retina. Il dispose également d’une fonction d’optimisation en masse et vous pouvez choisir entre trois niveaux de compression différents, normal, agressif et ultra. Il possède également une fonction de restauration, de sorte que si vous n’êtes pas satisfait de la qualité, vous pouvez restaurer et recompresser en un seul clic à un niveau qui correspond mieux à vos besoins. Il existe une version gratuite et une version premium. Vous êtes limité à un quota de 25 Mo d’images par mois avec un compte gratuit.

Se débarrasser de l’image originale et redimensionner vos images plus grandes peut aussi se faire avec cette extension.

Redimensionner les images dans Imagify

Redimensionner les images dans Imagify

Imagify compresse également les images sur leurs serveurs tiers, pas les vôtres, ce qui est très important quand il s’agit de performance. Imagify ne devrait pas ralentir votre site WordPress.

ShortPixel Image Optimizer

shortpixel wordpress image optimization plugin

ShortPixel plugin

ShortPixel Image Optimizer est une extension gratuite qui compresse 100 images par mois et compresse plusieurs types de fichiers, y compris les fichiers PNG, JPG, GIF, WebP et même les fichiers PDF. Elle fera à la fois la compression d’image lossy et lossless. Elle convertira CMYK en RGB. Elle prend vos images et vignettes dans le cloud pour traitement et les ramène ensuite sur votre site pour remplacer les originaux. Elle crée une sauvegarde des fichiers d’origine pour que vous puissiez les restaurer manuellement si vous le souhaitez. Elle convertira les fichiers de la galerie en vrac. Il n’y a pas de limite à la taille du fichier.

Optimole

Plugin Optimole

Plugin Optimole


Optimole est un plugin d’optimisation d’image WordPress qui réduit automatiquement la taille de vos images sans aucun travail de votre part. Il a un grand avantage quand il s’agit de la vitesse de chargement de votre site car il est entièrement basé sur les nuages et ne sert jamais des images qui sont plus grandes qu’elles ne le devraient, c’est-à-dire qu’il affiche la taille d’image parfaite pour la fenêtre de visualisation du visiteur et son navigateur.
De plus, le plugin fournit un chargement en lazyload et un remplacement d’image efficace – il diminue la qualité de l’image si le visiteur a une connexion Internet plus lente – ce qui le distingue du reste. Il détecte également automatiquement le navigateur de l’utilisateur et sert le format WebP s’il est pris en charge.
Toutes les images compressées par Optimole sont servies via un CDN rapide. Vous pouvez essayer Optimole gratuitement ou passer au plan Premium si vous avez besoin de plus de bande passante et d’espace de traitement.

EWWW Image Optimizer Cloud

Plugin EWWW Image Optimizer Cloud

Plugin EWWW Image Optimizer Cloud


EWWW Image Optimizer Cloud vous aide à rendre vos images plus petites, et votre site plus rapide avec moins de tracas au démarrage. Sans limite de taille, et avec beaucoup de flexibilité, vous pouvez utiliser les valeurs par défaut, ou personnaliser le plugin complètement à votre guise. Tous les utilisateurs d’EWWW IO peuvent utiliser le Bulk Optimizer pour compresser leurs images existantes, ou utiliser le mode liste de la médiathèque pour sélectionner et choisir des images spécifiques à compresser.
Des dossiers supplémentaires peuvent être numérisés pour s’assurer que chaque image de votre site est correctement optimisée. EWWWW IO vous permet même de convertir vos images dans des formats de nouvelle génération comme WebP, ou de trouver le meilleur format d’image avec des options de conversion multiformat. La compression d’image commence à seulement 0,003 $/image.
L’API de compression haut de gamme vous permet de porter la compression à un tout autre niveau sans sacrifier la qualité, ce qui débloque la compression PDF et inclut des sauvegardes d’images pratiques de 30 jours. La fonctionnalité ExactDN qui démarre à partir de 9 $/mois apporte une compression automatique (sans compression côté serveur nécessaire), un redimensionnement automatique et tous les avantages d’un CDN pour des résultats plus rapides et encore plus de performances sur toutes les tailles d’appareils.

Optimus Image Optimizer

optimus image optimizer

Optimus Image Optimizer plugin

Optimus WordPress Image Optimizer utilise la compression lossless pour optimiser vos images. Lossless signifie que vous ne verrez aucune perte de qualité. Il supporte WooCoomerce et le multi-site et dispose d’une fonction d’optimisation de masse pour ceux qui ont déjà de grandes bibliothèques de médias existantes. Il est également compatible avec l’extension WP Retina WordPress. Il existe une version gratuite et premium. Dans la version Premium, vous payez une fois par an et vous pouvez compresser un nombre illimité d’images. Si vous le combinez avec leur extension Cache Enabler, vous pouvez également plonger dans les images WebP, qui est un nouveau format d’image léger de Google.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités

WP Smush

Extension WP Smush

Extension WP Smush

WP Smush a une version gratuite et une version premium. Il réduira l’information cachée des images pour réduire la taille sans réduire la qualité. Il scanne les images et les réduit au fur et à mesure que vous les téléchargez sur votre site. Il scanne également les images que vous avez déjà téléchargées et les réduit également. Il écrasera en masse jusqu’à 50 fichiers à la fois. Vous pouvez également écraser manuellement si vous le souhaitez. Il écrasera les types d’images JPEG, GIF et PNG. La taille des fichiers est limitée à 1MB.

  • Il est compatible avec certaines des extensions de bibliothèque média les plus populaires telles que WP All Import et WPML.
  • L’optimisation des images se fait avec des techniques de compression lossless, ce qui permet de maintenir une qualité d’image élevée.
  • Peu importe dans quel répertoire vous enregistrez vos images. Smush les trouve et les compresse.
  • Smush a une option pour régler automatiquement la largeur et la hauteur de toutes les images, de sorte que toutes vos images soient redimensionnées dans des proportions identiques.

TinyPNG (aussi JPGs compressés)

Extension TinyPNG

Extension TinyPNG

TinyPNG utilise les services TinyJPG et TinyPNG (le compte gratuit vous permet de compresser environ 100 images par mois) pour optimiser vos images JPG et PNG. Il compresse automatiquement les nouvelles images et compresse en vrac vos images existantes. Il convertira CMYK en RBG pour économiser de l’espace. Il compresse les images JPEG jusqu’à 60% et les images PNG jusqu’à 80% sans perte visible de qualité d’image. Il n’a pas de limite de taille de fichier.

ImageRecycle

ImageRecycle - Extension d'optimisation d'images et de PDF

ImageRecycle – Extension d’optimisation d’images et de PDF

L’extension ImageRecyle est un optimiseur automatique d’images et de PDFs. Cette extension se concentre non seulement sur la compression d’images mais aussi sur les PDFs. Une fonctionnalité très pratique est la possibilité de définir la taille minimale du fichier pour la compression. Par exemple, si vous avez des images d’une taille de 80 Ko, vous pouvez les exclure automatiquement de la compression. Cela garantit que les images et les fichiers ne sont jamais trop compressés. Elle inclut également l’optimisation en masse et le redimensionnement automatique des images. Note : Ils ont un essai gratuit de 15 jours, mais c’est un service premium, et les images sont téléchargées et compressées à l’aide de leurs serveurs. Ils ne facturent pas par mois, mais plutôt par le nombre total d’images compressées, à partir de 10 000 $ pour 10 000.

Optimiser les images pour l’étude de cas Web

Nous avons décidé de faire notre propre étude de cas et des tests pour vous montrer à quel point l’optimisation de vos images pour le web peut affecter la vitesse globale de votre site WordPress.

JPG non compressés

Nous avons d’abord téléchargé 6 JPGs non compressés, tous d’une taille supérieure à 1 Mo, sur notre site d’essai. (Voir les JPG originaux non compressés). Nous avons ensuite effectué 5 tests à travers Pingdom et avons pris la moyenne. Comme vous pouvez le voir dans le test de vitesse ci-dessous, notre temps de chargement total était de 1,55 secondes et la taille totale des pages était de 14,7 Mo.

Test de vitesse avec JPGs non compressés

Test de vitesse avec JPGs non compressés

JPG compressés

Nous avons ensuite compressé les JPGs à l’aide de l’extension WordPress Imagify, en utilisant le paramètre « agressif ». (Voir les nouveaux JPGs compressés, qui sont toujours aussi beaux). Nous avons ensuite effectué 5 tests à travers Pingdom et avons pris la moyenne. Comme vous pouvez le voir dans le test de vitesse ci-dessous, notre temps de chargement total a été réduit à 476 ms et la taille totale de la page a été réduite à 2,9 Mo. Le temps de chargement total a été réduit de 54,88 % et la taille des pages a été réduite de 80,27 %.

Test de vitesse avec JPGs compressés

Test de vitesse avec JPGs compressés

Il n’y a presque aucune autre optimisation que vous pouvez faire sur votre site qui vous permettra de réduire de plus de 50% les temps de chargement. C’est pourquoi l’optimisation d’images est si importante, le processus ci-dessus a été entièrement automatisé par l’extension. Il s’agit d’une approche non interventionniste pour un site WordPress plus rapide. La seule autre optimisation dramatique que vous pourriez faire serait de changer d’hébergeur WordPress. De nombreux clients qui déménagent à Kinsta voient leur vitesse augmenter de plus de 45%. Imaginez déménager chez Kinsta et optimiser vos images !

En optimisant vos images, qu’il s’agisse d’un outil de retouche photo ou d’une extension WordPress, vous pouvez également corriger l’avertissement « Optimize images » que vous obtenez dans Google PageSpeed Insights (comme indiqué ci-dessous).

Avertissement Optimize images PageSpeed Insights

Avertissement Optimize images PageSpeed Insights

Si vous avez d’autres avertissements d’optimisation provenant d’outils de test de vitesse, n’oubliez pas de consulter notre article sur Google PageSpeed Insights et notre revue détaillée de Pingdom.

Utilisation des SVG

Une autre recommandation est d’utiliser les SVG avec vos autres images. SVG est un format vectoriel redimensionnable qui fonctionne parfaitement pour les logos, les icônes, le texte et les images simples. Voici quelques raisons pour lesquelles nous vous le conseillons :

  • Les SVG sont automatiquement redimensionnables dans les navigateurs et les outils de retouche photo. C’est le rêve des webdesigners et des graphistes !
  • Google indexe les SVGs, de la même manière qu’il le fait pour les PNGs et les JPGs, vous n’avez donc pas à vous soucier du référencement.
  • Les SVGs sont traditionnellement (pas toujours) plus petits en taille de fichier que les PNGs ou JPGs. Cela peut entraîner des temps de chargement plus rapides.

Genki a écrit un excellent article dans lequel il compare la taille de SVG vs PNG vs JPEG. Vous trouverez ci-dessous quelques extraits de ses tests dans lesquels il a comparé les trois différents types d’images.

JPG (taille optimisée : 81,4 Ko)

JPG taille
Image JPG

PNG (taille optimisée : 85.1 Ko

PNG taille
Image PNG

SVG (taille optimisée : 6,1 Ko)

SVG taille

Image SVG

Comme vous pouvez le voir ci-dessus, le SVG offre une diminution de la taille du fichier de 92,51% par rapport au JPG. Et par rapport à la PNG, 92,83 %. Consultez notre tutoriel sur l’utilisation des SVG sur votre site WordPress.

Meilleures pratiques

Voici quelques bonnes pratiques générales lorsqu’il s’agit d’optimiser les images pour le web :

  • Si vous utilisez une extension WordPress, utilisez une extension qui compresse et optimise les images à l’extérieur sur leurs serveurs. Cela réduit la charge de travail sur votre propre site.
  • Utilisez des images vectorielles dès que possible à côté de vos PNGs et JPGs.
  • Utilisez un CDN pour servir vos images rapidement aux visiteurs du monde entier.
  • Supprimez les données d’image inutiles
  • Supprimez l’espace blanc et recréez-le en utilisant le CSS pour ajouter l’espace.
  • Utilisez les effets CSS3 autant que possible.
  • Sauvegardez vos images dans les bonnes dimensions. Bien que, n’oubliez pas que WordPress supporte maintenant les images responsives, pour les servir sans les redimensionner avec CSS.
  • Utilisez des polices Web au lieu de placer du texte dans les images – elles sont plus belles lorsqu’elles sont redimensionnées et prennent moins d’espace.
  • N’utilisez des images tramées que pour des scènes avec beaucoup de formes et de détails.
  • Réduisez la profondeur de bits à une palette de couleurs plus petite.
  • Utilisez la compression lossy lorsque c’est possible.
  • Testez pour trouver les meilleurs réglages pour chaque format.
  • Utilisez le GIF si vous avez besoin d’animation (mais compressez vos GIFs animés).
  • Utilisez PNG si vous avez besoin de détails et de résolutions élevées.
  • Utilisez JPG pour les photos générales et les captures d’écran.
  • Supprimez les métadonnées d’image inutiles.
  • Automatisez le processus autant que possible.
  • Dans certains cas, vous pouvez vouloir charger paresseusement les images pour un rendu de première page plus rapide.
  • Enregistrez les images comme « optimisées pour le web » dans des outils tels que Photoshop.
  • Utilisez WebP dans Chrome pour servir des images plus petites.
Cliquez pour Tweet

Une fois que vous avez optimisté vos images pour une meilleure performance et suivi les meilleures pratiques, votre site sera plus aimé par les moteurs de recherche, les navigateurs et les réseaux, et se chargera plus rapidement pour vos lecteurs. Oh, et n’oubliez pas de consulter notre tutoriel sur les hotlinking, afin d’empêcher les gens de voler vos images et votre bande passante.

Avez-vous formaté vos images pour une meilleure performance ? Les formatez-vous à la main, utilisez-vous une extension, ou les deux ? Y a-t-il un autre outil ou une autre extension que vous recommanderiez ? Avez-vous quelque chose à ajouter ? Faites-nous part de vos techniques et de vos meilleures pratiques dans les commentaires ci-dessous !