tuto wordpress
Que signifie l'optimisation d'image?
Nous entendons souvent l'expression Optimisation d'image dans le contexte de la construction et de la maintenance du site, mais qu'est-ce que cela signifie exactement? L’optimisation de l’image est la compression de la taille du fichier d’une image (son poids) sans modifier ses dimensions (sa largeur et sa hauteur). Certaines optimisations réduisent la qualité de l'image – c'est ce qu'on appelle une compression «avec perte», et d'autres laissent la qualité intacte, et c'est ce qu'on appelle une compression sans perte.
Que vous apprendra cet article?
Cet article expliquera pourquoi nous souhaiterions optimiser les images de notre site WordPress, quels plugins vous devriez utiliser pour optimiser les images de votre site, et nous terminerons par une fonctionnalité de base qui résout également le problème.
Ma quête était de trouver le meilleur optimiseur d'image dans WordPress, et j'ai essayé et testé trois principaux plugins gratuits:
J'ai choisi ces trois plugins car ce sont les plugins les plus connus, axés uniquement sur l'optimisation et rien d'autre, contrairement aux autres plugins, qui optimisent l'ensemble du site, et l'optimisation de l'image n'est qu'une partie de leurs fonctionnalités.
Pourquoi voudrions-nous optimiser les images?
La diminution de la taille des fichiers image, c'est-à-dire l'optimisation des images, présente deux avantages:
- Le premier est qu'il augmente la vitesse du site, car les fichiers de plus petite taille se chargent plus rapidement.
- Le deuxième avantage est qu'il économise de l'espace disque, et donc si votre plan de tarification d'hébergement est basé sur l'espace disque, vous pourriez en fait économiser de l'argent.
Maintenant que nous comprenons la motivation, plongeons-nous dans les différentes options que le dépôt de plugins de WordPress nous offre librement.
Comment j'ai testé les plugins
Afin de tester les plugins, j'ai téléchargé des images de trois sites: Pixabay, Freepik et Unsplash.
J'ai téléchargé des images en 2 tailles: une image plus petite avec une largeur de 640 pixels et une image plus grande avec une largeur de 1920 pixels. Lorsque ces tailles n'étaient pas disponibles, j'ai redimensionné l'image téléchargée à l'aide de paint.net.
Image Pixabay
640 × 426 pixels
Taille de l'image d'origine: 30,4 Ko.
| Taille de l'image | Smush | EWWW | TinyPNG |
|---|---|---|---|
| COMPLET | 0 (aucune économie) | Pas d'économies | 3,6 Ko (12%) |
| MOYEN (600 × 399) |
436 milliards (1,9%) | 436 milliards (1,9%) | 5,7 Ko (22%) |
| LA VIGNETTE (350 × 350) |
212 milliards (1,5%) | 212 milliards (1,5%) | 0 (aucune économie) |
| Total | 3 tailles réduites de 648,0 B. Économies totales 1,3%. |
3 tailles réduites de 648,0 B. Économies totales 1,3%. |
3 tailles réduites de 9,3 Ko. Économies totales 13%. |
1920 × 1280 pixels
Taille de l'image d'origine: 322,3 Ko
| Taille de l'image | Smush | EWWW | TinyPNG |
|---|---|---|---|
| COMPLET | 0 (aucune économie) | 24,7 Ko (7,7%) | 215,2 Kio (66,77%) |
| GRANDE (850 × 567) |
625 milliards (1,7%) | 625 milliards (1,7%) | 8,3 Ko (20,15%) |
| MOYEN LARGE (768 × 512) |
420 milliards (1,3%) | 420 milliards (1,3%) | 6,7 Ko (28,63%) |
| MOYEN (600 × 400) |
246 milliards (1,1%) | 246 milliards (1,1%) | 8,1 Ko (23,34%) |
| LA VIGNETTE (350 × 350) |
194 milliards (1,4%) | 194 milliards (1,4%) | 0 (aucune économie) |
| Total | 7 images réduites de 6,1 Ko. Économies totales 2,5%. | 7 tailles réduites de 30,8 Ko. Économies totales 5,6%. | 7 tailles compressées. Économies totales 50% |
Image de Freepik
Freepik ne vous laisse pas choisir la largeur. Au lieu de cela, ils vous permettent de télécharger un fichier zip contenant une image de grandes dimensions, ainsi que d’autres formats de l’image (principalement Photoshop et / ou Illustrator d’Adobe). Par conséquent, j'ai utilisé Paint.net pour le redimensionner à une largeur de 640 pixels.
640 × 640 pixels
Taille de l'image: 58,6 Ko.
| Taille de l'image | Smush | EWWW | TinyPNG |
|---|---|---|---|
| Complet | 0 (aucune économie) | 6,3 Ko (10,8%) | 16,8 Ko (28,67%) |
| MOYEN (600 × 600) |
2,4 Ko (5,4%) | 2,4 Ko (5,4%) | 13,1 Ko (26,79%) |
| LA VIGNETTE (350 × 350) |
1,2 Ko (5,5%) | 1,2 Ko (5,5%) | 0 (aucune économie) |
| TOTAL | 3 tailles réduites de 3,6 Ko. Économies totales 4,2%. | 3 tailles réduites de 9,9 Ko. Économies totales 7,9%. | 3 tailles compressées. Économies totales 23%. |
1920 × 1280 pixels
Taille de l'image: 256,8 Ko.
| Taille de l'image | Smush | EWWW | TinyPNG |
|---|---|---|---|
| Complet | 0 (aucune économie) | Réduit de 11,0% (28,2 Ko) | 131,8 Kio (51,32%) |
| GRANDE (850 × 567) |
4,9 Kio (6,3%) | 4,9 Kio (6,3%) | 25,6 Kio (30,01%) |
| MOYEN LARGE (768 × 512) |
4,0 Ko (6%) | 4,0 Ko (6%) | 21,8 Ko (29,95%) |
| MOYEN (600 × 400) |
2,7 Ko (5,7%) | 2,7 Ko (5,7%) | 13,7 Ko (26,10%) |
| LA VIGNETTE (350 × 350) |
1,2 Ko (5,6%) | 1,2 Ko (5,6%) | 0 (aucune économie) |
| TOTAL | 7 tailles réduites de 29,4 Ko. Économies totales 6,4%. | 7 tailles réduites de 57,5 Ko. Économies totales 8,3%. | 7 tailles compressées. Économies totales 40%. |
Image non éclaboussée
640 × 426 pixels
Taille de l'image: 52,8 Ko
| Taille de l'image | Smush | EWWW | TinyPNG |
|---|---|---|---|
| COMPLET | 0 (aucune économie) | Réduit de 0,4% (213 B) | 15,1 Ko 28,49% |
| MOYEN (600 × 400) |
982,0 milliards (2,5%) | 982,0 milliards (2,5%) | 7,6 Ko 18,14% |
| LA VIGNETTE (350 × 350) |
643,0 milliards (2,9%) | 643,0 milliards (2,9%) | 0 (aucune économie) |
| TOTAL | 3 tailles réduites de 1,6 Ko. Économies totales 2,0%. | 3 tailles réduites de 1,8 Ko. Économies totales 1,6% | 3 tailles compressées. Économies totales 19%. |
1920 × 1280 pixels
Taille de l'image: 393,4 Ko
| Taille de l'image | Smush | EWWW | TinyPNG |
|---|---|---|---|
| COMPLET | 0 (aucune économie) | 0 (aucune économie) | 203,9 Ko (51,83%) |
| GRANDE (850 × 567) |
2,0 Ko (2,8%) | Réduit de 2,8% (2,0 Ko) | 14,7 Ko (18,26%) |
| MOYEN LARGE (768 × 512) |
1,7 Ko (2,8%) | Réduit de 2,8% (1,7 Ko) | 14,5 Kio (21,64%) |
| MOYEN (600 × 400) |
1,2 Ko (3%) | Réduit de 3,0% (1,2 Ko) | 6,7 Ko (14,92%) |
| LA VIGNETTE (350 × 350) |
748,0 milliards (3,2%) | Réduit de 3,2% (748 B) | 0 (aucune économie) |
| TOTAL | 7 tailles réduites de 14,1 Ko. Économies totales 3,0%. | 7 tailles réduites de 14,1 Ko. Économies totales 1,7%. | 7 tailles réduites. Économies totales 36%. |
Quel plugin est le meilleur optimiseur
Il est facile de voir que le plugin qui réduit le plus de poids est TinyPNG, et si je construisais un site à partir de rien, je serais probablement d'accord avec cela. Il présente cependant l'inconvénient d'optimiser seulement 50 images par mois, ce nombre comprenant les différentes tailles que WordPress crée à partir de l'image d'origine. Par conséquent, si vous savez que vous avez de nombreuses tailles – j'ai rencontré des plugins Gallery qui créent un bon nombre de tailles – alors ce plugin pourrait ne pas faire le travail.
Un autre inconvénient est la nécessité d'ouvrir un compte sur TinPNG.com. C'est gratuit, mais le processus lui-même est perturbant, vous devez donc prendre ce temps en compte lors de l'installation du plugin. Si vous êtes pressé par le temps, ce plugin n'est peut-être pas fait pour vous.
Si, cependant, j'installe un plugin d'optimisation dans un site existant, qui contient déjà de nombreuses images, je pourrais opter pour l'une des deux autres. Comme tu peux le voir, Smush et EWWW donnent les mêmes résultats en termes de réduction de la taille des images. Alors, comment pouvez-vous choisir entre eux?
J'ai quelques règles empiriques que j'utilise pour décider entre les plugins. Dans la section suivante, je les développerai, puis nous explorerons les fonctionnalités supplémentaires des trois plugins.
Comment choisir entre les plugins en général
Quand j'ai quelques plugins qui font plus ou moins la même chose et que je dois en choisir un, ce sont les paramètres que je considère:
- Installations actives: la popularité d'un plugin est une grande considération. Les nombres exacts ne sont pas nécessaires, mais j'en regarde deux: Ordre de grandeur et Relativité – Le nombre est-il en centaines? Milliers? Les centaines de milliers? Si tous les téléchargements de plugins sont dans le même ordre de grandeur, je pencherais vers celui qui a le plus de téléchargements. Les raisons pour lesquelles le nombre de téléchargements est une considération principale sont les suivantes:
- En règle générale, je dirais que plus un plugin a de téléchargements, plus il indique la satisfaction du client. Bien que tous ceux qui ont téléchargé le plugin n'en soient pas nécessairement satisfaits, si les chiffres sont de plus grande ampleur, cela en dit long sur la satisfaction du public.
- Plus de testeurs et d'environnements de test – plus les gens utilisent un plugin, plus il y a de cas d'utilisation et plus de bogues sont trouvés par ces personnes et, espérons-le, corrigés par l'auteur. Un nouveau plugin ou un avec peu de téléchargements peut être encore difficile sur les bords, par opposition à un plugin qui est dans la nature depuis un certain temps et qui a été peaufiné et amélioré.
- Auteur: La question de savoir qui a développé le plugin est également une indication de la qualité du plugin. Le plugin est-il développé par Automattic? Cela ferait généralement allusion à un plugin stable auquel on peut faire confiance pour aller très loin. Si le développeur est un individu, quelles autres choses a-t-elle fait dans WordPress? Le nom d'un développeur est toujours un lien vers sa page de profil où vous pouvez voir la liste des autres plugins et / ou thèmes qu'ils ont développés, s'ils contribuent au code de base de WordPress, et toute leur activité sur wordpress.org. En règle générale, lorsqu'un développeur compétent et expérimenté est impliqué dans un plugin, c'est un bon indicateur d'un plugin bien écrit et bien entretenu.
- Notation: Le nombre d'étoiles et le nombre d'avis sur lesquels ils sont basés peuvent également vous aider à décider d'utiliser ou non le plugin. Cependant, il y a eu des cas où les avis se sont avérés faux, donc cela ne peut pas être votre paramètre principal.
Une autre utilisation des notes est dans les étoiles basses: il est bon de savoir à l'avance quelles sont les lacunes du plugin – sont-ils fondamentaux pour son utilisation ou sont-ils marginaux? S'appliquent-ils à votre cas d'utilisation? Si vous savez à l'avance ce qu'il faut rechercher, vous êtes mieux préparé à faire face aux inconvénients du plugin si vous décidez encore de l'utiliser. - Soutien: Vous voulez que le plugin soit bien pris en charge et maintenu. Il existe plusieurs façons de comprendre si tel est le cas dans le plugin que vous envisagez d'utiliser:
- Le nombre de problèmes résolus est un bon indicateur de l'attitude de maintenance du plugin. Un pourcentage élevé de cas résolus laisse entendre que le (s) développeur (s) du plugin sont dédiés à leurs clients et que le plugin est toujours en cours de maintenance. Cela peut être combiné avec la date de dernière mise à jour et la version testée jusqu'à, où plus la date et la version sont récentes, plus le plugin est à jour. Cependant, vous souhaitez vérifier que les auteurs du plug-in ne marquent pas en masse les problèmes comme résolus.
- Une autre indication pour un plugin actif est de nombreux problèmes de support, et que beaucoup d'entre eux sont résolus. Les logiciels actifs ont des bogues – c'est un peu acquis. Si un plugin a très peu de problèmes, cela peut signifier qu'il n'a pas beaucoup d'utilisateurs.
| Taille de l'image | Smush | EWWW | TinyPNG |
|---|---|---|---|
| Auteur | WPMU DEV | Exactement WWW | TinyPNG |
| Installations actives | 1+ million au moment de la rédaction de cet article | 800000+ au moment de la rédaction de cet article | 200 000+ au moment de la rédaction de cet article |
| Notation | 5 étoiles selon 5440 évaluations | 4.5 étoiles selon 956 avis | 4.5 étoile (s) selon 138 avis |
| Soutien | 34 problèmes sur 47 résolus au cours des deux derniers mois | 11 problèmes sur 16 résolus au cours des deux derniers mois | 0 problème résolu sur 5 au cours des deux derniers mois |
Comme vous pouvez le voir, Smush et EWWW sont très proches dans tous les paramètres, nous allons donc approfondir les fonctionnalités supplémentaires qu'eux et TinyPNG offrent.
Smush – Images à chargement différé, optimisation et compression des images
Description du plugin
Optimisez les images, activez le chargement différé, redimensionnez, compressez et améliorez votre vitesse de page Google. Smush compressera les images sans perte de qualité visible.
À propos du plugin
- Auteur: WPMU DEV
- Installations actives: 1+ million au moment de la rédaction de cet article
- Notation: 5 étoiles selon 5440 évaluations
- Soutien: 34 problèmes sur 47 résolus au cours des deux derniers mois
Caractéristiques supplémentaires
Le plugin offre des améliorations sur le processus d'optimisation de base. J'en ai présenté quelques-uns, mais il ne s'agit en aucun cas d'une liste exhaustive.
Optimiser en masse
En plus d'optimiser toute image téléchargée, Smush vous permet d'optimiser toutes les images qui ont été téléchargées avant son installation. Le seul inconvénient ici est qu'il optimise par lots de 50, il faut donc continuer à cliquer sur le bouton «continuer» jusqu'à la fin de l'optimisation.
Optimisation sélective
Vous permet de sélectionner les tailles de vignettes d'une image qui peuvent être optimisées.
Métadonnées
Les photos stockent souvent les paramètres de l'appareil photo dans le fichier, c'est-à-dire la distance focale, la date, l'heure et l'emplacement. La suppression de ces données réduit la taille du fichier. Si vous craignez d'endommager l'image à la suite de cette suppression, Smush ajoute une note disant: "Ces données ajoutent à la taille de l'image. Bien que ces informations puissent être importantes pour les photographes, elles ne sont pas nécessaires pour la plupart des utilisateurs et peuvent être supprimées en toute sécurité ».
Redimensionnement de l'image
Détecte les images surdimensionnées inutilement volumineuses sur vos pages pour réduire leur taille et réduire les temps de chargement.
À partir de WordPress 5.3, les téléchargements d'images volumineuses sont redimensionnés jusqu'à une largeur et une hauteur maximales spécifiées. Si vous avez besoin d'images de plus de 2560 pixels, vous pouvez remplacer ce paramètre ici. Remarque: le redimensionnement de l'image se produit automatiquement lorsque vous téléchargez des pièces jointes. Pour prendre en charge les appareils Retina, nous vous recommandons d'utiliser 2 fois les dimensions de la taille de votre image. Les GIF animés ne seront pas redimensionnés car ils perdront leur animation, veuillez utiliser un outil tel que http://gifgifs.com/resizer/ pour redimensionner puis re-télécharger.
Version Pro
Étant donné que je ne traite que des plugins gratuits, je ne parlerai que brièvement des fonctionnalités de la version Pro. Ils incluent: l'optimisation en masse de toutes les images en un clic, l'optimisation à l'aide de la compression avec perte, la rationalisation de vos images avec CDN, l'activation du dimensionnement automatique des images et la prise en charge WebP, l'optimisation des images originales en taille réelle, la conversion automatique des PNG en JPEG (avec perte), etc.
Comment utiliser le plugin
Si vous souhaitez apprendre à utiliser le plugin, nous avons un excellent guide pour optimiser les images à l'aide de Smush It:
Optimiseur d'image EWWW
Description du plugin
Avec EWWW IO, vous pouvez optimiser toutes vos images existantes, à partir de n'importe quel plugin, puis laisser EWWW IO s'occuper automatiquement des nouveaux téléchargements d'images.
À propos du plugin
- Auteur: Exactement WWW
- Installations actives: 800 000+ au moment de la rédaction de cet article
- Notation: 4.5 étoiles selon 956 avis
- Soutien: 11 problèmes sur 16 résolus au cours des deux derniers mois
Caractéristiques supplémentaires
Le plugin offre des améliorations sur le processus d'optimisation de base. J'en ai présenté quelques-uns, mais il ne s'agit en aucun cas d'une liste exhaustive.
JPG à PNG
Permet la conversion des JPG en PNG. Permet également de supprimer les originaux.
Affiche des images optimisées
Affiche une liste de toutes les images optimisées et leurs versions redimensionnées.
Supprimer les originaux
Lorsque WordPress réduit les grandes images, il conserve l'original sur le disque pour la génération de vignettes. EWWW vous permet de les supprimer pour économiser de l'espace disque.
Optimiser en masse
En plus d'optimiser toute image téléchargée, EWWW vous permet d'optimiser toutes les images qui ont été téléchargées avant son installation.
De plus, il offre 2 fonctionnalités supplémentaires:
- La possibilité de forcer la ré-optimisation – les images précédemment optimisées seront ignorées par défaut, mais si vous cochez une case avant la numérisation, EWWW exécutera à nouveau son optimiseur sur elles.
- Le plugin EWWW offre également une explication lorsqu'un grand nombre d'images à optimiser est trouvé: pourquoi y a-t-il autant d'images?
Couverture complète
EWWW vous permet d'optimiser tout sur votre site, pas seulement la médiathèque WordPress.
Version Pro
Étant donné que je ne traite que des plugins gratuits, je ne parlerai que brièvement des fonctionnalités de la version Pro. Ils incluent: Auto-WebP, Lazy Load, Auto-Scale, JS / CSS Optimize, CDN, etc.
TinyPNG – Compresser les images JPEG et PNG
Description du plugin
Rendez votre site Web plus rapide en optimisant vos images JPEG et PNG. Ce plugin optimise automatiquement toutes vos images en s'intégrant aux services de compression d'images populaires TinyJPG et TinyPNG.
Remarque: l'utilisation du plugin nécessite la création d'un compte afin d'acquérir une clé API. Il est gratuit et ne demande pas de détails de paiement, mais le processus ajoute une autre étape dans l'installation du plugin car vous ne pouvez pas exécuter le plugin sans lui.
Autre note: la version gratuite de ce plugin limite le nombre d'images optimisées à 500 par mois. Cela signifie qu'en comptant les variations d'image et en supposant une moyenne de 5 variations par image, seules 100 images téléchargées par mois peuvent être traitées. C'est très bien si vous commencez à utiliser le plugin avant d'avoir de nombreuses images dans votre bibliothèque multimédia, mais si vous l'avez installé après avoir eu des centaines ou des milliers d'images, il peut vous falloir plusieurs mois pour les optimiser toutes.
À propos du plugin
- Auteur: TinyPNG
- Installations actives: 200 000+ au moment de la rédaction de cet article
- Notation: 4.5 étoile (s) selon 138 avis
- Soutien: 0 problème sur 5 résolu au cours des deux derniers mois
Caractéristiques supplémentaires
Le plugin offre des améliorations sur le processus d'optimisation de base. J'en ai présenté quelques-uns, mais il ne s'agit en aucun cas d'une liste exhaustive.
Optimisation en masse
Permet d'optimiser en masse les images téléchargées avant l'installation de ce plugin. Étant donné que le plugin est limité à 500 images par mois, il vous montre combien coûterait le redimensionnement des images restantes sur votre site.
Optimiser l'arrière-plan
TinyPNG vous permet de décider quand les nouvelles images doivent être compressées: en arrière-plan ou pendant le téléchargement.
Optimisation sélective
Vous permet de sélectionner les tailles de vignettes d'une image qui peuvent être optimisées.
Vous permet d'optimiser l'image d'origine
Métadonnées
Supprime les métadonnées par défaut, permet de conserver la date et l'heure de création, les informations de copyright et l'emplacement GPS.
Une brève revue du plugin
Nous avons présenté ce plugin dans notre catégorie Outils il y a quelques années:
Quel plugin choisir
Comme nous l'avons vu précédemment, le meilleur optimiseur est TinyPNG, mais il présente 2 inconvénients: l'optimisation de seulement 50 images par mois et l'exigence d'enregistrement. Si cela vous convient, vous devriez utiliser TinyPNG.
Si, cependant, ces inconvénients sont un problème, alors le prochain meilleur plugin à mon avis est EWWW. Bien que ses statistiques soient légèrement inférieures à celles de Smush, elles sont toujours dans le même sens et ses fonctionnalités supplémentaires sont meilleures que celles proposées par Smush: JPG en PNG, affiche des images optimisées, permet de supprimer les originaux et son optimisation en masse s'exécute sans interruption. Smush a cependant l'avantage de vous permettre de sélectionner les images à optimiser, de détecter les images trop grandes et de les redimensionner.
Dans l'ensemble, j'ai expérimenté les trois plugins sur différents sites à des moments différents, et ils avaient chacun leurs mérites et des fonctionnalités supplémentaires qui ne sont pas proposés par les autres.
Cette section est destinée aux développeurs, car elle décrit une fonctionnalité principale et comment la désactiver ou la remplacer.
WordPress 5.3 introduit une nouvelle façon de gérer ces images en détectant de grandes images et en générant une «taille maximale optimisée pour le Web» d'entre elles.
Lorsqu'une nouvelle image est téléchargée, WordPress détecte s'il s'agit d'une «grande» image en vérifiant si sa hauteur ou sa largeur est au-dessus d'un seuil big_image. La valeur de seuil par défaut est 2560px, filtrable avec le nouveau big_image_size_threshold filtre.
Si la hauteur ou la largeur d'une image est supérieure à ce seuil, elle sera réduite, le seuil étant utilisé comme valeur de hauteur maximale et de largeur maximale. L'image réduite sera utilisée comme la plus grande taille disponible.
Dans ce cas, le fichier image d'origine est stocké dans le répertoire uploads et son nom est stocké dans une autre clé de tableau dans le méta tableau d'image: image originale. Pour pouvoir toujours obtenir le chemin vers une image téléchargée à l'origine une nouvelle fonction wp_get_original_image_path () a été présenté.
Désactivation de la mise à l'échelle
La mise à l'échelle est contrôlée par le big_image_size_threshold filtre. Retour faux à partir du rappel de filtre le désactivera.
add_filter ('big_image_size_threshold', '__return_false');Mots de clôture
L'optimisation des images est vitale et basique de nos jours, et les plugins proposés ici font un excellent travail, tout comme la fonctionnalité de base décrite ci-dessus.
Si vous avez des suggestions pour d’autres outils ou plugins d’optimisation d’image, je serais ravi de les entendre dans les commentaires 🙂.
[ad_2]