Maison >Tutoriel CMS >WordPresse >Maîtriser l'optimisation d'image dans WordPress
Lors de la création et du maintien des sites Web WordPress, il est important de trouver des moyens d'améliorer les performances du site et de diminuer les temps de chargement de la page. Cela aide à réduire les taux de rebond et à augmenter les classements sur les moteurs de recherche.
Il existe plusieurs façons d'atteindre les performances via le thème et le code du plugin d'un site WordPress - par exemple, la réduction de JavaScript, le CSS et les images. Il existe également des options de configuration basées sur le serveur - par exemple, l'activation de la mise en cache ou l'utilisation d'un plugin WordPress pour aider à mettre en cache le contenu statique.
Cependant, nous ne pouvons pas contrôler le contenu - en particulier les images - que les clients ajouteront à leur site Web WordPress. Les images peuvent être téléchargées dans leur forme d'origine, conduisant à des problèmes de performances du site et à l'augmentation des temps de chargement de page.
Dans cet article, nous explorerons différentes façons d'optimiser les images JPEG et PNG, qui sont téléchargées par les clients et les propriétaires de sites dans WordPress.
Lorsqu'un utilisateur WordPress télécharge une image, WordPress fournit deux fonctions que nous pouvons utiliser pour créer des copies de l'image d'origine, à des dimensions spécifiques. Ceci est utile où nous voulons produire une image à une taille spécifique dans notre thème.
Dans l'administration WordPress, sous Paramètres> Media, il existe trois tailles d'image prédéfinies: vignette, moyenne et grande. Chacun peut avoir ses propres dimensions.
Parce que WordPress redimensionnera toujours les images à ces tailles (ce qui donne 4 images stockées - l'original, miniature, moyenne et grande tailles), il vaut la peine de les définir en premier et de les utiliser dans votre thème WordPress lorsque cela est possible.
Pour utiliser une taille d'image prédéfinie dans votre thème WordPress, utilisez:
<span>while ( have_posts() ) { </span> <span>the_post(); </span> <span>the_post_thumbnail( 'thumbnail' ); // Or 'medium', or 'large' </span><span>}</span>
Si vous avez besoin de tailles d'image supplémentaires, nous pouvons utiliser set_post_thumbnail_size ():
Définissez les dimensions de l'image en vedette par défaut (anciennement post-empreinte).
Cela nous permet de définir la largeur et la hauteur des images en vedette pour les publications, les pages et les types de messages personnalisés, que nous publions dans notre thème en utilisant le_post_thumbnail ().
Pour définir la taille de l'image en vedette, ajoutez le code suivant au fichier functions.php de votre thème. Cela définirait les images en vedette à 500px de largeur x 500px Hauteur:
<span>add_theme_support( 'post-thumbnails' ); </span><span>set_post_thumbnail_size( 500, 500, true );</span>
Pour sortir l'image en vedette d'un post aux dimensions spécifiées, utilisez the_post_thumbnail () dans la boucle WordPress:
<span>while ( have_posts() ) { </span> <span>the_post(); </span> <span>the_post_thumbnail(); </span><span>}</span>
Alors que set_post_thumbnail_size () est utile, nous ne pouvons l'appeler qu'une seule fois pour définir un ensemble de dimensions d'image, aux côtés de la vignette WordPress, des tailles moyennes et grandes. Nous sommes coincés si nous voulons ensuite produire des tailles supplémentaires - par exemple, une image 500px x 500px pour nos messages, et une image 400px x 400px pour nos pages.
Heureusement, WordPress fournit également la fonction add_image_size ():
enregistre une nouvelle taille d'image. Cela signifie que WordPress créera une copie de l'image avec les dimensions spécifiées lorsqu'une nouvelle image est téléchargée.
Nous pouvons appeler cette fonction dans le fichier fonctions.php de notre thème autant que nous en avons besoin, afin d'enregistrer autant de tailles d'image que notre thème le nécessite. Enregistrons deux tailles d'image, pour les publications et les pages respectivement:
<span>add_image_size( 'post', 500, 500, true ); </span><span>add_image_size( 'page', 400, 400, true );</span>
Nous pouvons maintenant spécifier la taille de l'image que nous souhaitons publier en modifiant nos appels the_post_thumbnail ():
<span>while ( have_posts() ) { </span> <span>the_post(); </span> <span>the_post_thumbnail( 'post' ); // Or 'page' </span><span>}</span>
En utilisant nos images de test JPEG et PNG, nous pouvons voir la réduction de la taille du fichier et les gains de performances:
La compression d'image vise à réduire davantage les tailles de fichiers d'image en supprimant les données redondantes, avec peu ou pas de sacrifice à la qualité de l'image.
Il existe deux méthodes principales de compression d'image: avec perte et sans perte.
Compression avec perte utilise des approximations inexactes, jetant des quantités partielles de données d'image, pour produire une image qui aura une taille de fichier inférieure, tout en maintenant l'image d'origine du mieux possible.
Les métadonnées (telles que les informations EXIF, nous racontant la marque, le modèle et l'emplacement de la caméra) peuvent être rejetées sans effet sur la qualité de l'image.
L'inconvénient est que la qualité de l'image peut en souffrir, il est donc important de trouver le bon équilibre entre les temps de chargement d'image rapides et la qualité d'image.
La compression avec perte est généralement utilisée sur les images et photographies JPEG, où il y a beaucoup de données dans le fichier image pour rendre la sortie de l'image.
En utilisant nos images de test et Tinypng.com, nous pouvons voir les effets de la compression avec perte sur nos images JPEG et PNG:
La compression sans perte permet le rejet partiel et la compression des données d'image, sans perte de qualité d'image. Les images compressées «sans perte» rendront la même chose que l'image d'origine.
L'inconvénient est qu'il ne fournit généralement aucune amélioration de la taille des fichiers sur des images plus complexes, telles que les photographies. Pour cette raison, il est mieux utilisé sur les images PNG et GIF.
WordPress fournit deux façons d'ajuster la qualité d'image, en utilisant une compression avec perte. Nous pouvons utiliser les deux en ajoutant le code suivant aux fonctions de notre thème.
<span>while ( have_posts() ) { </span> <span>the_post(); </span> <span>the_post_thumbnail( 'thumbnail' ); // Or 'medium', or 'large' </span><span>}</span>jpeg_quality définit la qualité des images JPEG téléchargées sur WordPress, ou édité dans l'éditeur d'image de WordPress.
wp_editor_set_quality définit la qualité de (dans ce cas) toute image modifiée dans l'éditeur d'image de WordPress. Pour les images JPEG, parce que nous avons spécifié le filtre JPEG_Quality, cela remplacera ce filtre.
Téléchargement de nos images de test sur WordPress avec ces changements produit les résultats suivants:
Vous remarquerez que nos images PNG téléchargées ne sont pas modifiées - c'est parce que le filtre JPEG_Quality affecte uniquement les images JPEG, et que le WP_Editor_Set_quality n'est utilisé que si nous modifions une image via la bibliothèque de médias.
De plus, nos images originales ne sont pas modifiées - c'est parce que WordPress applique uniquement les filtres de qualité aux images redimensionnées.
Alors que nous avons exploré le fonctionnement de la compression d'images et utilisé un outil en ligne pour exécuter certains tests, nous voudrions idéalement que nos images soient automatiquement compressées dans WordPress. Cela signifie que nous ne comptons pas sur les clients (ou nous-mêmes) pour nous rappeler d'utiliser un outil tiers avant de télécharger des images dans WordPress, et nous simplifiant le processus.
Il existe quelques plugins WordPress qui fournissent une compression d'image automatique:
Ewww Image Optimizer fournit une compression sans perte, en utilisant une variété de bibliothèques / services de compression JPEG, PNG et GIF. Il nécessite un accès exec (), que certains hôtes partagés peuvent ne pas avoir - mais ils fournissent un cloud d'optimiseur d'image EWWW, qui est un service payant qui traite des images sur leurs serveurs.
Encore une fois, pour une compression avec perte, vous devrez payer une clé API, avec des tarifs commençant à 1 $ pour 1 000 images.
Pour configurer Ewww Image Optimizer, accéder à des plugins> Ajouter nouveau dans votre interface d'administration WordPress et rechercher «Ewww Image Optimizer»:
Cliquez sur le bouton Installer maintenant et activez le plugin une fois installé.
Par défaut, le plugin fournira une compression sans perte sur nos images, sans aucune configuration supplémentaire requise. Créons un nouveau post et définissons notre image en vedette sur notre image de test pour obtenir des résultats:Nous sommes en mesure d’obtenir de meilleures performances lorsque des images PNG «sans perte» sur les images JPEG, ce qui est à prévoir. Cependant, ces images sont encore assez grandes, alors essayons un autre plugin qui fournit à la place une compression avec perte.
En plus de fournir un service de compression d'image basé sur le Web, TinYPNG fournit également un plugin WordPress pour fournir automatiquement une compression avec perte aux images JPEG et PNG.
Les 500 premières compressions d'image par mois sont gratuites. Après cela, cela coûte 0,009 $ par compression d'image.
Pour configurer le plugin TinYPNG, accéder aux plugins> Ajouter nouveau dans votre interface d'administration WordPress et rechercher «Compress Jpeg & PNG Images»:
Cliquez sur le bouton Installer maintenant et activez le plugin une fois installé.
Ensuite, obtenez une clé API en visitant https://tinypng.com/developers et en entrant votre nom et votre adresse e-mail:
D'après une image seule, en utilisant des tailles d'image spécifiques et un plugin de compression, nous pouvons réduire une image JPEG de 504KB jusqu'à 13 Ko - une sauvegarde de 491 Ko, ou environ 1 seconde plus rapidement sur une connexion de 2 Mbps. Pour une PNG de 697KB, nous pouvons réduire cela à 65 Ko - une économie de 632 Ko, soit environ 1,2 seconde plus rapide sur une connexion de 2 Mbps.
Maintenant que nous avons optimisé les images que nous souhaitons livrer sur notre site Web WordPress, voyons comment nous pouvons optimiser la livraison de ces images, en fonction de l'emplacement du visiteur et d'autres facteurs.
Un réseau de livraison de contenu est un grand nombre de serveurs, généralement distribués dans plusieurs centres de données à travers le monde. Ils sont conçus pour servir un contenu statique, tel que le texte, les images, le CSS et le javascript, ainsi que les téléchargements de fichiers plus grands.
Les CDN peuvent également utiliser la mise en cache et la minification, pour garantir que le contenu livré est aussi optimisé que possible.
En raison des emplacements géographiques des CDN, la plupart détecteront le pays du visiteur et tenteront de livrer du texte, des images, du CSS et du JavaScript du centre de données disponible le plus proche. Cela permet de réduire les temps de réponse et les temps de chargement des pages, ainsi que la réduction de la bande passante du serveur et le chargement sur votre serveur.
Regardons deux solutions CDN disponibles pour WordPress.
Le photon est décrit comme:
… un service d'accélération et d'édition d'image pour les sites hébergés sur wordpress.com ou sur des sites WordPress connectés à Jetpack. Cela signifie moins de chargement sur votre hôte et des images plus rapides pour vos lecteurs
Il saisit automatiquement les images JPEG, PNG et GIF, servant des versions redimensionnées pour répondre aux exigences du navigateur. Ceci est utile si nous affichons un site Web WordPress sur un appareil mobile qui a des images de 500px x 500px, mais nous n'avons besoin que d'une version 250px x 250px.
Pour configurer le photon, nous devons installer et activer Jetpack. Naviguez vers les plugins> Ajouter un nouveau dans votre interface d'administration WordPress et recherchez «Jetpack»:
Cliquez sur le bouton Installer maintenant et activez le plugin une fois installé.
Ensuite, cliquez surjetpack dans le menu d'administration WordPress, puis cliquez sur Connectez-vous à wordpress.com. Vous serez ensuite demandé de vous connecter à votre compte WordPress.com (Ne vous inquiétez pas si vous n'en avez pas - vous pouvez vous inscrire à un compte gratuit à ce stade):
Activer :
Voyons notre article et notre page existants, qui contenaient nos images en vedette optimisées TinypNg. Vous remarquerez que les images sont maintenant servies à partir de i2.wp.com - c'est le CDN de Photon. Nous pouvons obtenir la source d'image et ajuster les paramètres de redimensionnement pour obtenir les versions d'origine, 500px et 400px, pour tester les tailles de fichiers optimisées:
JPEG Image
CDNS tiers
L'avantage de cette approche est que vous n'êtes pas seulement limité à l'optimisation de la livraison d'images; Vous pouvez spécifier que CSS, les fichiers JavaScript et d'autres types de fichiers statiques soient desservis par le CDN. Nous pouvons également conserver un plugin d'optimisation d'image, tel que TinYPNG, sur notre installation WordPress, garantissant que nos images sont optimisées avant d'être stockées sur le CDN. Si vous êtes sur un site qui a plus de contenu CSS et JavaScript par rapport aux images, alors cela peut être une meilleure solution.
pour configurer maxcdn, rendez-vous sur leur site Web et cliquez sur le bouton Obtenez un compte de test gratuit .
Suivez les instructions à l'écran pour compléter vos informations personnelles. Vous recevrez ensuite un e-mail vous permettant de créer votre compte maxcdn et de commencer.
Une fois que vous vous êtes inscrit, vous devrez créer une zone. Une zone est essentiellement un site Web.
Pour créer une zone, cliquez sur l'option des zones dans le menu principal, suivie de Créer une zone de traction
Entrez le nom de votre zone de traction (généralement le nom de votre site Web), c'est URL et une étiquette facultative:
Ensuite, nous devons configurer notre installation WordPress pour utiliser MAXCDN. Nous utiliserons W3 Total Cache, qui est un plugin WordPress qui est livré avec le support MaxCDN.
Pour configurer W3 Total Cache, accéder aux plugins> Ajouter nouveau dans votre interface d'administration WordPress et rechercher "W3 Total Cache":
Cliquez sur le bouton Installer maintenant et activez le plugin une fois installé.
Une fois activé, accédez à Performance> CDN dans le menu d'administration WordPress et faites défiler vers le panneau de configuration.
Autoriser , Copiez la clé d'autorisation et collez-le dans le champ d'autorisation Autorisation Field of the Plugin:
est valide AVIS doit s'afficher à l'écran. Cliquez sur le bouton Enregistrer tous les paramètres pour terminer la configuration.
Recharger l'une de vos pages ou messages existants, et vous devriez voir que le CSS, JS et les images sont servis à partir du CDN.Conclusion
pour ceux qui ont déjà un CDN en place, ou qui préfèrent ne pas en utiliser un, ou utiliser le plugin WordPress de Jetpack, Tinypng ont entraîné une légère amélioration de l'optimisation d'image par rapport aux images PNG et peuvent être utiles en conjonction avec un fournisseurs de CDN tiers.
L'optimisation d'image dans WordPress est cruciale pour plusieurs raisons. Premièrement, il améliore la vitesse de chargement de votre site Web. De grandes images non optimisées peuvent ralentir votre site, impactant négativement l'expérience utilisateur et votre classement SEO. Deuxièmement, les images optimisées utilisent moins d'espace de stockage, ce qui peut être bénéfique si vous êtes sur un plan d'hébergement limité. Enfin, les images optimisées semblent professionnelles et attrayantes, ce qui peut améliorer l'esthétique globale de votre site et l'engagement des utilisateurs.
L'optimisation de l'image joue un rôle important dans le référencement. Les moteurs de recherche comme Google considèrent la vitesse de chargement du site Web comme facteur de classement. Les images optimisées se chargent plus rapidement, améliorant la vitesse de votre site, et donc son classement SEO. De plus, des images correctement optimisées avec des balises Alt correctes peuvent aider votre site à apparaître dans les résultats de recherche d'image, entraînant plus de trafic vers votre site.
Il y a Plusieurs excellents plugins WordPress pour l'optimisation de l'image. Certains des plus populaires incluent EWWW Image Optimizer, Smush et Shortpixel. Ces plugins compressent et optimisent automatiquement vos images pendant que vous les téléchargez, en vous faisant gagner du temps et des efforts.
Vous pouvez optimiser les images sans perdre de qualité en utilisant sans perte Compression, ce qui réduit la taille du fichier sans dégrader la qualité d'image. De nombreux plugins d'optimisation d'image WordPress offrent cette fonctionnalité. De plus, le choix du bon format d'image (JPEG, PNG, GIF, etc.) en fonction de vos besoins peut également aider à maintenir la qualité d'image.
Le La taille idéale de l'image pour WordPress dépend en grande partie de votre thème. Cependant, une règle générale est de maintenir votre largeur d'image entre 1200 et 1600 pixels pour les images pleine largeur. Pour les images plus petites, une largeur de 600 à 800 pixels est généralement suffisante.
Vous pouvez ajouter des balises alt aux images dans WordPress en allant à Votre bibliothèque de médias, sélectionnant l'image et remplissage du champ «Texte alt». Les balises ALT sont importantes pour le référencement et l'accessibilité, car ils décrivent le contenu de l'image pour rechercher des moteurs et des utilisateurs contre visuellement.
Oui, de nombreux plugins d'optimisation d'image WordPress vous permettre d'optimiser les images. Cette fonctionnalité peut être incroyablement utile si vous avez un grand nombre d'images à optimiser.
Pour optimiser les images pour les appareils mobiles, vous pouvez utiliser des images réactives, qui s'ajustent pour s'adapter à différentes tailles d'écran. WordPress crée automatiquement plusieurs tailles de chaque image que vous téléchargez et sert la taille la plus appropriée à chaque appareil.
La compression avec perte réduit la taille du fichier en supprimant Certaines données d'image, ce qui peut entraîner une perte de qualité d'image. D'un autre côté, la compression sans perte réduit la taille du fichier sans supprimer de données, préservant la qualité d'image d'origine.
Idéalement, vous devriez optimiser les images pendant que vous Téléchargez-les sur votre site WordPress. Cela garantit que votre site reste rapide et efficace, offrant la meilleure expérience utilisateur possible.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!