Il faut savoir que si vous ajoutez une image de grande dimension et que vous l’affichez en petite dimension, vous aurez quand même une performance moindre même avec ces extensions. Par exemple, si vous téléversez une image mesure 2000px par 2000px et vous l’affichez à 300px par 300px sur votre site sans la réduire avant, vous perdrez en performance. Vous pouvez demander à WordPress de la réduire avec les tailles prédéfinies ou réduisez-la avec un logiciel avant de la téléverser.
Ne pas oublier de mettre une taille maximale dans les paramètres de votre extension d’optimisation d’image pour réduire automatiquement les images plus grandes que la taille définie, la plupart le permettent.
Il existe des extensions pour ajouter des tailles dans la liste de tailles disponibles, ces extensions vont réduire et couper les images dans ces tailles. Vous pouvez également ajouter des tailles dans le fichier functions.php de votre thème.
Il est préférable de bien nommer vos fichiers avant de faire l’optimisation pour éviter les erreurs. Pour plus d’information sur les bonnes pratiques, vous pouvez lire l’article suivant : Noms de fichiers pour le Web : les bonnes pratiques.
Maintenant, voyons les nouveaux formats d’images qui rendent les sites moins lourds car ces formats sont plus optimisés que les autres et ont une perte moins significative de qualité.
Pour une liste complète des formats à utiliser vous pouvez lire l’article de ma collègue Émilie sur les formats à utiliser. Voici les deux plus récents formats d’image Web que vous pouvez utiliser :
WebP est un format d’image matricielle développé et mis à disposition du public par Google. Il exploite un algorithme de compression avec pertes prédictives utilisé pour les images clés du VP8 (qui est le codec vidéo du format WebM) et un conteneur léger et extensible RIFF1,2.
Google le présente comme mieux adapté que les compresseurs précédents et surtout adapté aux densités de pixels des écrans actuels (110 à 240 ppi). Par ailleurs, toujours selon Google (en 2013), 60 % des octets transmis sur la toile seraient des images, et WebP procurerait de 30 % à 80 % de réduction d’espace face à JPEG et PNG3.
Source : Wikipedia
AV1 Image File Format (AVIF) est un format de fichier approuvé en février 2019 et compressé avec AV1.
La source complète en anglais sur Wikipedia
Ce format n’est pas encore compatible sur tous les navigateurs.
Vous cherchez une bonne extension pour optimiser vos images sur votre site WordPress? Voici une liste des meilleures extensions à utiliser en 2021.
Cette extension convertis au format WebP et remplace les balises img par des balises picture ou permet de remplacer par une réécriture d’URL ce qui peut être pratique dans certains cas car pas encore toujours compatible avec les balises picture.
Elle optimise les JPG, PNG, GIF et PDF de façon à ce que les différents média soient le plus optimisés possible et que les images se chargent le plus rapidement possible.
Vous devez avoir un compte avec Imagify. L’extension offre un forfait gratuit plus restreint que les forfaits payants qui est généralement suffisant pour un petit site Web.
Cette extension s’intègre parfaitement avec WP Rocket étant donnée qu’elles sont du même auteur.
Notre tutoriel vidéo sur l’installation d’Imagify :
Cette extension est gratuite et vous permet d’optimiser vos images. Vous n’avez pas besoin d’un compte comme pour Imagify.
Elle offre aussi une version payante, dite « Pro ». Cette version vous permet d’optimiser des PNG et de les convertir en JPG (les PNG sont parfois plus lourds que les JPG). Vous pouvez convertir au format WebP avec la version Pro seulement.
La version gratuite vous permet d’optimiser 50 images à la fois. La version Pro permet de faire tous les médias d’un seul coup. Donc, si vous avez beaucoup de médias, vous pourrez lancer l’optimisation et faire autre chose. Avec la version gratuite, vous devrez cliquer sur le bouton Resume pour reprendre après 50 fichier optimisés.
Télécharger ShortPixel Image Optimizer
Cette extension est un peu comme Imagify, elle comporte un compte/forfait gratuit dont vous avez besoins pour utiliser l’extension et des forfaits payants avec moins de restrictions que le compte gratuit.
Vous pouvez optimiser les JPG, PNG, GIF et PDF comme toutes les autres extensions. Il est possible de convertir en WebP et AVIF. Elle semble être la seule extension de ma liste à déjà autoriser les AVIF. AVIF est un format de fichier comme WebP qui rends les images moins lourdes et sans perte de qualité. Attention! Ce n’est pas tous les navigateurs qui sont capable de lire les AVIF pour le moment.
Télécharger EWWW Image Optimizer
Cette extension fait sensiblement la même chose que les précédentes avec une version gratuite et des forfaits payants avec plusieurs type d’abonnement. La version gratuite n’a pas besoin d’abonnement comme pour Smush.
Vous pouvez optimiser de manière similaire autres extensions.
C’est une extension gratuite un peu comme Smush et qui fonctionne très bien pour une extension gratuite. Elle ne permet pas encore les images WebP. Je pense que c’estprévus dans une prochaine version.
Peut-être que je m’avance en disant que cette extension n’est plus à présenter tellement qu’elle est installée et utilisée! C’est une extension « couteau suisse » avec plusieurs modules que vous pouvez activer selon vos besoins. Dans le cas présent, c’est le module Site Accelerator (anciennement « Photon ») qui sert pour l’optimisation d’images. Cette extension n’est pas spécialement fait pour l’optimisation des images donc je ne l’ai pas mis dans la liste ci-haut. Elle est incluse avec les sites Web hébergés au WordPress.com. Cependant, ce n’est pas le cas avec les sites Web auto-héberger avec le logiciel de WordPress.org. Vous devez donc l’installer et y connecter un compte WordPress.com.
Vous disposez également d’un CDN gratuit avec cette extension pour y déposer vos images, ce qui va améliorer les performances de votre site. Elle peut convertir les images au format WebP.
Vous devriez privilégier les extensions qui convertissent en WebP. À part reSmush.it, toutes les extensions de ma liste le permettent au moins dans leur version payante. Évitez pour le moment de mettre vos images en AVIF pour une meilleur compatibilité car ce format n’est pas pris en compte par tous les navigateurs à l’heure actuelle. C’est le format du futur, donc vous pouvez anticiper et choisir une extension qui le permet ou qui le permettra bientôt. Au moment d’écrire ces lignes, WordPress vient tout juste d’ajouter la compatibilité WebP dans la version 5.8.1.
Obtenez nos six guides WordPress gratuitement en vous inscrivant à notre infolettre!
Cette semaine je vous montre comment installer et configurer l’extension Smush sur votre site WordPress.
Les images sont au cœur de la création de votre site Web. Effectivement, ils contribuent à l’établissement de votre image de marque.
Dans cet article, nous allons discuter de l’importance de la typographie en design Web, en particulier de son impact sur l’expérience utilisateur et sur la perception de la marque.
CSS est l’acronyme de Cascading Style Sheets ou en français « feuilles de style en cascade ». C’est un langage pour formater le design de votre site.
