Images site Web : comment les optimiser 0

Écrit et publié par : Éric St-Gelais

Source: https://www.aurone.com , Google Analytics,

Image  à la Une: https://www.aurone.com


Vous ne désirez pas que Google boude votre site à cause de la taille de vos images ? Heureusement, vous pouvez réduire la taille de vos images afin d’améliorer la vitesse de votre site , mais le hic avec le formatage est que les changements réduisent souvent leur qualité. Il existe donc des astuces qui vous permettent de diminuer le poids du fichier tout en gardant leur qualité pour les afficher avec fierté. Regardons donc comment travailler vos images sans les rendre mauvaises ​​, ainsi que la méthode et les outils disponibles afin d’optimiser les images pour le Web.


Les grands avantages du formatage des images

moyenne-poids-images-sure-site-web

Moyenne de poids par image sur un site Web

En premier lieu, pourquoi devez-vous diminuer la taille de vos images? Quels  en sont les bénéfices? Il existe des avantages à optimiser vos images. Selon HTTP Archive, en avril 2017, les images représentent en moyenne 66% du poids total en pixel d’une page Web. Alors, quand il s’agit d’optimiser votre site WordPress, les images sont de loin la première étape où  vous devriez commencer! C’est plus important que les scripts et les polices. Et, un bon travail d’optimisation d’image est la chose la plus faciles à vérifier, mais beaucoup de propriétaires de sites ignorent tout cela.

Voici les principaux avantages.

  • Améliorera la vitesse de chargement de votre page. Si votre page prend trop de temps pour charger, les internautes risquent d’attendre et de passer à autre site.
  • Améliore votre référencement et positionnement. Votre site aura un meilleur classement dans les moteurs de recherche. Les gros fichiers ralentissent votre site Web et les moteurs de recherche boudent les sites  trop lents. Google sera susceptible d’explorer et d’indexer vos images plus vite pour la recherche d’images sur Google. Vous feriez le saut de savoir quel est le pourcentage du trafic provenant de la recherche d’images Google? Vous pouvez utiliser Google Analytics afin de valider votre trafic en provenance de recherche Google.
  • Une création de sauvegardes sera plus efficace et rapide
  • Les images plus petites utilisent moins de bande passante. Les réseaux et les navigateurs aimeront cela.
  • Nécessite moins d’espace de stockage sur votre serveur .

Vos images représentent en moyenne 66% du poids total d’une page ! Optimisez les !


Comment faire pour optimiser vos images

Votre principal objectif est de trouver l’équilibre entre la grosseur de vos fichiers et une qualité acceptable. Il y a plusieurs  d’une façons d’effectuer ces optimisations. Les outils les plus populaires permettent de les compresser avant de les placer sur WordPress. Normalement, vous pouvez faire cela dans un outil comme Adobe Photoshop ou Affinity Photo. Vous pouvez aussi utiliser certains plugins.

Les 2 éléments essentiels à considérer sont le format de fichier et le type de compression que vous choisirez. En sélectionnant la bonne combinaison, vous pouvez réduire la taille de vos images jusqu’à 5 X. Vous devrez tester chacune de vos images afin de voir ce qui fonctionne le mieux.


Choisissez le bon format de fichier

Pour commencer à modifier vos images, assurez-vous d’avoir choisi le meilleur type de fichier. Il y a plusieurs types de fichiers disponnibles pour le Web que vous pouvez utiliser:

  • PNG – produit des images de très bonnes qualités, mais ont une taille de fichier plus grande. Il utilise une compression sans perte.
  • JPEG – Le format le plus populaire, utilise une optimisation sans perte. Vous pouvez ajuster le niveau de qualité pour un bon équilibre entre la qualité et la taille de fichier.
  • GIF – utilise uniquement 256 couleurs. C’est le meilleur choix pour des illustrations ou des images animées. Il utilise uniquement une compression sans perte.

Il y a plusieurs autres formats, tels que JPEG XR et WebP, mais ils ne sont pas toujours pris en charge par les navigateurs. Idéalement, vous devez utiliser JPEG (ou JPG) pour des images avec beaucoup de couleurs et PNG pour des images simples.


Qualité de compression vs taille

Voici ce qui peut survenir dès vous compressez beaucoup trop une image. L’ image #1 utilise un taux de compression beaucoup plus bas, ce qui donne une plus grande qualité visuelle (mais une taille de fichier beaucoup plus grande). La 2 ème image utilise un taux de compression très haute, ce qui donne une image de très mauvaise qualité (mais une plus petite taille de fichier). Remarque: L’image originale intacte pèse 2,06 Mo.


# 1 Basse compression > Haute qualité – 590 kb


# 2 Haute compression > Basse qualité – 68 kb

Commentaire:

Comme vous pouvez le voir, l’image ci-dessus est de 590 Ko. C’est assez grand pour une simple photo! Il est préférable de garder le poids total d’une page Web en dessous de 1 ou 2 Mo de taille. 590 Ko serait 1/4 du poids de la page. La deuxième image semble plus laide, mais ce n’est que 68 Ko. Ce qu’il faut faire c’est trouver un bon équilibre entre la qualité visuelle et la grosseur du fichier.

Voici maintenant l’image à un taux de compression moyen et, la qualité semble assez bien maintenant et la taille du fichier est de seulement 151 Ko, ce qui est très acceptable pour une photo haute résolution. C’est presque 4X plus petit que l’originale avec une faible compression. Les images plus simples comme PNG devraient être inférieures à 100 Ko ou moins pour garantir une meilleure vitesse et performance.


Moyenne compression > Bonne qualité – 151 kb


Optimisation irréversible vs Optimisation réversible (Lossy vs Lossless)

Il est aussi important de savoir qu’il y a 2 types de compression, à perte et sans perte.

  • Compression irréversible (Lossy) – c’est un filtre qui enlève certaines données. Cela va diminuer la qualité de l’image, donc vous devrez faire attention à combien réduire sa taille. La taille du fichier peut être réduite beaucoup. Utilisez des outils tels que Adobe Photoshop, Affinity Photo ou d’autres éditeurs afin d’ajuster les paramètres de qualité. L’exemple utilisé ci-dessus utilise la compression à perte.
  • Compression réversible (lossless) – c’est un filtre qui comprime les données. Cela ne réduit pas la qualité, mais il faudra que les images soient décompressées avant qu’elles ne puissent être rendues. Vous pouvez effectuer une compression sans perte sur votre bureau à l’aide d’outils tels que Photoshop, FileOptimizer ou ImageOptim. Certaines extensions appliqueront la compression Gzip (pour les minimiser).

Expérimentez vos techniques de compression afin de mieux voir ce qui fonctionne pour chaque image ou format. Si vos outils ont l’option, assurez-vous de sauvegarder l’image pour le Web( ADOBE Photoshop, le possède). Ceci est une option et elle vous permettra des ajustements de  bonne qualité pour que vous puissiez effectuer une compression optimale. Vous allez perdre un peu de qualité, alors trouver le meilleur équilibre possible sans rendre les images affreuses.


Les outils et programmes d’optimisation

Il  en existe beaucoup. à la fois des premiums et des gratuits, que vous pouvez utiliser afin d’optimiser vos images. Certains vous donnent les outils pour effectuer vos propres optimisations et d’autres font carrément le travail pour vous. Nous sommes personnellement de grands fans de Photoshop, car il vous offre des fonctionnalités presque complètes

 

Voici des outils et logiciels à considérer:

Redimensionner vos images à l’échelle

Un problème très important en ce qui concerne l’optimisation de l’image est que vous devriez les télécharger directement aux dimensions CSS. Ce n’est pas aussi important que la compression, mais c’est un autre conseil qui garantira que vos images se chargent le plus rapidement possible sur tous les périphériques. Si vous utilisez WordPress comme CMS, il redimensionne vos images dès leurs téléchargement vers la bibliothèque multimédia. Ces commandes peuvent être trouvés sous « Paramètres> Médias« . Vous devrez aussi vous assurer que la largeur maximale est proche de la largeur admise par votre CMS. Ainsi, CSS n’essaiera pas de redimensionner votre image pour l’adapter.

La bibliothèque multimédia WordPress crée avec des scripts des miniatures en fonction de vos ajustements de paramètre. Mais, la version originale est conservée et demeure intacte. Si vous souhaitez redimensionner vos images et économiser de l’espace disque en évitant d’enregistrer l’originale, vous pouvez utiliser un plugin gratuit comme Imsanity.

Imsanity permet de définir une limite logique afin que toutes les images téléchargées soient contraintes à une taille raisonnable qui est quand même plus expansive que les besoins d’un site Web typique. Imsanity s’accroche à WordPress immédiatement après le téléchargement de l’image, mais avant que le traitement WordPress ne se produise. Donc, WordPress se comporte exactement de la même manière, sauf qu’on aura l’impression que l’utilisateur avait redimensionné l’image à une taille raisonnable avant de la télécharger.


Extensions(Plugins) d’optimisation d’image que vous pouvez utiliser avec WordPress

Heureusement, avec WordPress, vous n’avez pas à faire tout le formatage ou la compression manuellement. Vous pouvez utiliser des extensions(plugins) pour effectuer une partie du travail pour vous. Il existe plusieurs extensions(plugins) qui optimiseront automatiquement les fichiers images lorsque vous les téléchargez. Ils optimiseront même les images que vous avez déjà téléchargées. C’est une bonne fonctionnalité pratique – surtout si vous avez déjà un site Web bien imagé. Voici quelques-uns des meilleures extensions(plugins) afin de travailler vos images pour plus de performances.

Il est très important de ne pas compter seulement sur les extensions(plugins) eux-mêmes. Exemple, vous ne devez pas importer des images de 2 Mo dans votre bibliothèque multimédia WordPress. Cela peut réduire rapidement votre espace disque sur les serveurs Web. La meilleure technique est de redimensionner rapidement l’image dans un éditeur de photos au préalable,ensuite la télécharger et l’utiliser  avec l’une des  extensions(plugins) suivantes afin de la réduire encore plus.


Imagify Image Optimizer

Imagify est créé par la même équipe qui a développé WP Rocket, avec laquelle la plupart d’entre vous sont probablement déjà familiers. C’est compatible avec WooCommerce, NextGen Gallery et WP Retina. L’extension(plugin) dispose également d’une fonctionnalité d’optimisation en bloc et vous pouvez choisir entre trois niveaux de compression différents, normaux, agressifs et ultras. Elle a également une fonction de restauration, donc, si vous êtes mécontent de la qualité, vous pouvez faire un clic sur restaurer puis compresser à un niveau qui répond mieux à vos besoins. Il existe une version gratuite et une version premium. Vous êtes limités à 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 également être fait avec cette extension(plugin).



ShortPixel Image Optimizer

L’optimiseur d’image ShortPixel est une extension(plugin) gratuite qui compressera 100 images / mois et compressera différents types de fichiers, y compris les fichiers PNG, JPG, GIF, WebP et même PDF. Cette extension vous produira à la fois une compression d’image à perte et sans perte. Elle convertira CMYK en RVB. Il prend vos images et miniatures dans les nuages pour le traitement, puis les ramène à votre site pour remplacer les originaux. Il crée une sauvegarde des fichiers d’origine afin que vous puissiez les restaurer manuellement si vous le souhaitez. Cela convertira les fichiers de la galerie en vrac. Il n’y a pas de limite à la taille du fichier.


Optimus Image Optimizer

Optimus WordPress Image Optimizer utilise une compression sans perte afin d’optimiser vos images. La compression irréversible signifie que vous ne verrez aucune perte de qualité. Elle prend en charge WooCoomerce et multi-site et dispose d’une bonne fonctionnalité d’optimisation en bloc pour ceux qui possèdent déjà de grandes bibliothèques de médias existantes. Il est également compatible avec le plugin WP Retina WordPress. Ce plugin existe en une version gratuite et une premium. Pour la version premium, vous payez une fois par an et vous pouvez compresser une quantité illimitée d’images. Si vous le combinez avec leur plugin Cache Enabler, vous pouvez également plonger dans des images WebP, un nouveau format d’image léger de Google.


WP Smush

WP Smush possède une version gratuite et une version premium. Cette extension(plugin) réduira les informations cachées des images pour réduire la taille sans réduire la qualité. Elle analysera les images et les réduira à mesure que vous les téléchargez sur votre site Web. Il analysera également les images que vous avez déjà téléchargées et réduira celles-ci aussi. Il est apte à compresser jusqu’à 50 fichiers à la fois. Vous pouvez également compresser manuellement si vous le souhaitez. Il supprimera les types d’image JPEG, GIF et PNG. La taille des fichiers est limitée à 1 Mo.


TinyPNG (compression de JPG également)

TinyPNG utilise les services TinyJPG et TinyPNG (le compte gratuit vous permet de comprimer environ 100 images par mois) afin d’optimiser vos images JPG et PNGTinyPNG compressera automatiquement de nouvelles images et compressera en bloc vos images déjà existantes. Il convertira CMYK en RBG pour économiser de l’espace. Alors, il compressera 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

L’extension(plugin) ImageRecyle est un optimiseur automatique de fichiers PDF et images. Cette extension(plugin) se concentre non seulement sur la compression d’image mais aussi sur les fichiers PDF. Une de ses fonctionnalités vraiment pratiques est la possibilité de définir la taille de fichier minimale pour la compression. 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. Il comprend également l’optimisation en bloc et le redimensionnement automatique de l’image.
Remarque: 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 comprimées, à partir de 10 $ pour 10 000.


Optimisez vos images avec une étude de cas Web

Nous avons décidé de faire notre propre petite étude de cas et quelques tests pour vous démontrer combien 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 JPG non compressés, tous ayant un poids de plus de 1 Mo de taille, sur notre site de test. (Voir les JPG non compressés d’origine). Nous avons alors exécuté 5 tests via Pingdom et avons pris la moyenne. Comme vous pouvez le constater à partir du test de vitesse ci-dessous, notre temps de chargement total était de 1,55 secondes et la taille totale de la page était de 14,7 Mo.


JPG compressés

Nous avons ensuite compressé les JPG en utilisant le plugin Imagify WordPress « réglage agressif ». (Voir les nouveaux JPG compressés, qui semblent toujours aussi beau). Nous avons alors exécuté 5 tests via Pingdom et avons pris la moyenne. Comme vous pouvez le voir à partir du 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. Notre temps de chargement total a diminué de 54,88% et la taille de la page a diminué de 80,27%.

Il n’y a pratiquement pas d’autre optimisation que vous puissiez faire sur votre site qui vous permettra de réduire de plus de 50% le temps de chargement. C’est pourquoi l’optimisation de l’image est très importante, le processus ci-dessus a été automatisé par le plugin. C’est une approche pratique pour un site WordPress plus rapide. La seule autre optimisation dramatique que vous pourriez effectuer serait de changer vos hôtes WordPress. Beaucoup de clients qui se déplacent vers Kinsta voient plus de 45% de vitesse augmenter. Imaginez vous déplacer vers Kinsta et optimiser vos images!

En optimisant vos images, qu’il s’agisse d’un outil d’édition de photos ou d’une extension(plugin WordPress), vous pouvez également réparer l’avertissement «Optimiser les images» que vous obtenez dans Google PageSpeed Insights (comme indiqué ci-dessous).


Utilisation du format SVG (graphiques vectoriels adaptables)

Une autre recommandation consiste à utiliser le format SVG à côté de vos autres images. SVG est un format vectoriel évolutif qui fonctionne très bien pour les logos, les icônes, le texte et les images simples. Voici quelques uns des avantages des SVG:

  • Les SVG sont automatiquement évolutifs dans les deux navigateurs et les outils d’édition de photos. Cela fait rêver un web designer graphique!
  • Google indexe les SVG, de la même façon que les PNG et les JPG, de sorte que vous ne devez pas vous soucier du référencement.
  • Les SVG sont traditionnellement (pas toujours) plus petits dans la taille du fichier que les PNG ou les JPG. Cela peut entraîner des temps de chargement plus rapides.

Le blogeur Genki a écrit un excellent article (en anglais) où il compare la taille du SVG vs PNG vs JPEG. Voici quelques exemples de ses tests dans lesquels il a comparé les trois types d’image

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

PNG (taille optimisée: 85,1 Ko)

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

Comme vous pouvez le voir ci-dessus, le SVG est une diminution de la taille du fichier de -92,51% par rapport au JPG et de -92,83% par rapport au PNG. 


Les meilleures pratiques

Voici quelques bonnes pratiques en ce qui concerne l’optimisation et l’affichage des images pour le Web:

  • Utilisez des images vectorielles autant que possible avec vos PNG et vos JPG
  • Utilisez un CDN pour diffuser vos images rapidement aux visiteurs à travers le monde
  • Minimisez vos images (JPG, PNG, SVG) avec compression Gzip
  • Supprimez les données d’image inutiles
  • Recadrer l’espace blanc et le recréer en utilisant CSS pour fournir le rembourrage
  • Utilisez les effets CSS3 autant que possible
  • Enregistrez vos images dans les dimensions appropriées au lieu de laisser HTML ou CSS les redimensionner
  • Utilisez les polices Web au lieu de placer du texte dans les images – elles se ressemblent mieux lorsqu’elles sont mises à l’échelle et prennent moins d’espace
  • Utilisez des images tramées uniquement pour des scènes avec beaucoup de formes et de détails
  • Réduisez la profondeur de bit à une palette de couleurs plus petite
  • Utilisez une compression à perte dans la mesure du possible
  • Expérimentez pour trouver les meilleurs paramètres pour chaque format
  • Utilisez GIF si vous avez besoin d’animation (mais compressez vos GIF animés)
  • Utilisez PNG si vous avez besoin de détails élevés et de haute résolution
  • Utiliser JPG pour des photos et des captures d’écran en général
  • Dimensionnez vos images à leur taille d’affichage pour réduire le nombre de pixels
  • Supprimez les métadonnées d’images inutiles
  • Automatisez le processus autant que possible
  • Dans certains cas, vous voudrez peut-être opter pour mettre du lazy load des images pour un rendu de première page plus rapide
  • Enregistrez les images comme « optimisé pour le Web » dans des outils tels que Photoshop

Une fois que vous avez formaté vos images et avez suivi les meilleures pratiques, votre site sera plus apprécié par les moteurs de recherche, les navigateurs et les réseaux, et sera chargé plus rapidement pour les internautes.

Avez-vous formaté vos images pour une meilleure performance?

Les formatez-vous à la main, utilisez-vous un plugin ou les deux?

Existe-t-il un autre outil ou une extension(plugin) que vous recommanderiez?


Avez-vous quelque chose à ajouter? Faites-nous savoir vos techniques et vos meilleures pratiques dans les commentaires ci-dessous!