Le guide complet pour tout comprendre sur le fonctionnement des images dans WordPress.

Lorsque vous téléchargez une image dans votre bibliothèque multimédia, WordPress génère des tailles supplémentaires à partir du fichier source.

4 tailles sont générées par défaut:

  • Miniature (150 x 150 pixels avec recadrage activé par défaut);
  • Moyen (300 x 300 pixels sans rognage standard);
  • Largeur moyenne (768 pixels de large sans restriction de hauteur et sans recadrage par défaut, invisible pour l’utilisateur mais utile pour la visualisation sensible);
  • Grand (1024 x 1024 pixels par défaut sans rognage);

Vous pouvez modifier ces tailles dans les paramètres ensuite médias.

Les thèmes et extensions disponibles dans votre installation sont également conçus pour créer leurs propres tailles d’image à l’aide de la fonction add_image_size. C’est souvent utile pour les questions sur la conception Web, telles que: B. quand Création d’un thème WordPress personnalisé par exemple.

Il n’est donc pas rare d’atteindre rapidement les dix tailles supplémentaires générées à partir de votre image source.

Si cette approche est nécessaire pour répondre aux usages, il n’en reste pas moins qu’elle augmente la consommation d’espace sur les serveurs d’hébergement et donc augmente l’empreinte carbone.

Chaque fois que vous modifiez un paramètre de taille d’image ou installez un nouveau thème ou une nouvelle extension dans votre installation WordPress, vous devrez régénérer les différentes tailles. L’omission de cette régénération entraîne souvent des problèmes d’affichage des images et / ou une dégradation des performances.

Ce processus utilise beaucoup de ressources serveur et se déroule de deux manières:

  • Avec une extension spéciale telle que Régénérer les miniatures, pour ne citer que celles-ci. Ce projet, abandonné par le passé, est à nouveau la solution que je recommande car il vous permet de supprimer les anciens, vous économisant de l’espace disque.
    Actualiser les miniatures

    Extension WordPress qui vous permet de redimensionner des images qui ont déjà été importées dans la médiathèque.

    Couper :: 77 .. • • Frapper :: 2 835

  • Avec la commande wp media regenerate au dessus WP-CLI pour les utilisateurs avancés;

La première méthode est la plus simple, mais comporte le risque que toutes les images ne soient pas régénérées, en particulier dans les installations comportant plusieurs milliers d’images.

La deuxième méthode est clairement la plus fiable et la plus rapide, mais aussi la plus technique. Il est également nécessaire que votre hôte vous autorise l’accès SSH et que WP-CLI soit installé.

Notez également que votre serveur d’hébergement doit avoir les bibliothèques PHP ImageMagick ou GD, sinon les images envoyées n’auront pas de tailles supplémentaires. Vous pouvez simplement vérifier cela Outils ensuite formation Divi du site introduit dans WordPress 5.1.

Après tout, tu le sais WooCommerce dispose d’un outil natif pour restaurer les tailles d’image. Cette fonction garantit un affichage optimal de vos produits et fonctionne en arrière-plan.

Après des années d’utilisation, il y a de fortes chances que votre bibliothèque ne ressemble pas beaucoup et beaucoup de vos fichiers image ne sont même pas utilisés sur vos pages Web.

Pour résoudre ce problème, j’ai testé l’extension Media Cleaner de Jordy Meow, un expatrié français au Japon. Vous pouvez l’utiliser pour analyser l’ensemble de votre bibliothèque et supprimer les entrées inutiles et les fichiers inutilisés. La corbeille des supports est activée pour éviter toute suppression accidentelle. Cependant, une sauvegarde précédente est plus que nécessaire.

Nettoyeur de médias

L’extension pour le nettoyage en masse des images inutilisées de votre bibliothèque multimédia.

Couper :: 375,0 Ko • • Frapper :: 982

De plus, la version Pro offre la possibilité de scanner directement les répertoires présents sur votre serveur et offre une compatibilité avec les extensions populaires telles que ACF, Divi Builder, Fusion Builder, WPBakery Page Builder, Elementor … et bien d’autres constructeurs de pages.

Personnellement, je l’ai essayé sur le site Web d’un client avec un sérieux problème de duplication d’images en raison deExtension WPML multilingue. Le résultat est définitif.

Le temps de chargement de vos pages dépend principalement du poids de vos images.

En général, il est conseillé d’optimiser vos images en les compressant à 70-80% pour les formats JPEG (photos). Il est également possible d’optimiser vos éléments iconographiques en général à l’aide d’outils spécifiques aux formats PNG ou SVG.

Par expérience, nous pouvons distinguer 2 cas:

  1. Les images sont traitées au préalable à l’aide de logiciels de retouche photo (Adobe Photoshop, Affinity Designer ou Preview sous MacOS) ou d’outils en ligne (Compressor.io clairement ma préférence);
  2. Les images sont optimisées en aval via un plugin WordPress tel que Smush, EWWW Image Optimizer ou Imagify.

Tous ces outils ont leurs propres algorithmes d’optimisation qui doivent être ajustés pour obtenir le bon compromis entre performances et qualité d’image. Plus vous compressez, plus vous obtenez de performances au détriment de la qualité et vice versa.

En plus du temps de chargement de vos pages web, qui est directement lié au poids de vos images, vous pouvez réagir à la balise alternative. Cette balise est principalement utilisée à des fins d’accessibilité, mais son utilisation a été abusée dans le but d’optimiser votre référencement. La réponse à cela est simple: un robot ne peut pas décoder une image malgré les améliorations significatives de l’intelligence artificielle.

Ainsi, lorsque vous envoyez une image, WordPress vous donne 4 champs:

  1. Texte alternatif : C’est ce fameux jour que les moteurs analysent et placent intelligemment les mots-clés. Ne sur-optimisez pas en répétant systématiquement les mêmes phrases ou en séparant les mots-clés par des virgules. C’est contre-productif! Au contraire, cette balise doit permettre aux utilisateurs de comprendre la signification de l’image. Enfin, cet élément peut être laissé vide pour des images purement décoratives;
  2. Titre : Cette balise n’est pas interprétée par les moteurs de recherche et ne doit pas être utilisée dans le code source de vos pages. Ceci est très utile pour nommer vos médias back-office.
  3. Légende : Ce texte s’affiche simplement sous vos images dans le contenu de vos pages.
  4. la description : Ce champ est presque inutilisable. Il n’est utilisé que pour afficher des informations sur les pages de fichier joint. En fait, WordPress génère une url dédiée par média et sur cette page le thème peut afficher le contenu de ce champ. Presque tous les sites Web bien conçus désactivent ces URL à l’aide d’un Extension SEO comme SEOPress ;;

Si vous recherchez une extension pour automatiser efficacement ce travail d’optimisation de vos balises ALT, je vous recommande de tester le référencement d’image développé par une startup lyonnaise:

SEO d’image

Automatisez la génération de vos balises ALT pour optimiser votre référencement.

Couper :: 157,0 Ko • • Frapper :: 677

Quoi de neuf dans WordPress 5.3?

Pour les utilisateurs

La version 5.3 de WordPress introduit un changement majeur dans la gestion des images originales.

Si votre image fait plus de 2560 pixels de large, une taille supplémentaire est appelée big_image est généré et considéré comme la taille d’origine. Plus précisément, WordPress affiche la taille si vous insérez une image dans sa taille d’origine qui dépasse cette largeur prédéfinie dans un élément de contenu big_image. Les tailles d’origine ne seront donc plus jamais affichées sur votre site Web, sauf en dessous de 2560 pixels de large.

Ce changement a été introduit pour optimiser les performances tout en offrant une largeur d’image suffisamment large pour couvrir les écrans HDPI. Il répond également à de nouvelles applications plus mobiles qui consistent à créer du contenu depuis votre smartphone. Ceux-ci produisent des photos de plusieurs Mo, qui ne peuvent donc pas être affichées sur une seule page sans optimisation préalable.

Pour les développeurs

Un nouveau filtre big_image_size_threshold a été introduit pour changer la valeur de 2560 pixels de largeur.

Une nouvelle fonction wp_get_original_image_path a été introduit pour restaurer facilement vos thèmes et plugins à leur taille d’origine. En fait, les fonctions PHP habituelles que vous pouvez utiliser avec l’argument size full sera désormais basé sur le nouveau système et donc sur la taille géante.

Pour désactiver cette nouvelle mise à l’échelle, vous pouvez coller cette ligne de code dans le fichier functions.php De votre sujet ou dans un Plugin Mu ::

add_filter('big_image_size_threshold', '__return_false');

Nous apprécierons également la possibilité de faire pivoter automatiquement une image en fonction de ses données EXIF ​​et d’ajouter 2 tailles supplémentaires pour une meilleure prise en charge de srcset.

Le traitement lors de l’envoi d’une image à la librairie est également différent pour éviter d’éventuels problèmes de génération très gourmands sur les serveurs. Contrairement aux versions antérieures à 5.3, les métadonnées sont stockées dans la base de données chaque fois que des tailles supplémentaires sont créées et non à la fin comme avant. En particulier, cette nouvelle approche devrait aider à résoudre les erreurs HTTP sur les serveurs partagés.

Le côté négatif de ces changements est l’utilisation supplémentaire de l’espace disque pour les fichiers et, dans une moindre mesure, l’augmentation des demandes d’écriture dans la base de données.

Ce guide de gestion des images dans WordPress est mis à jour régulièrement pour intégrer les développements futurs.



Source link

Recent Posts