Comment optimiser les images pour WordPress, guide complet

Les gens sur le Web n’ont pas beaucoup de temps pour utiliser les données parce qu’il y a beaucoup de ces dernières. Il y a tellement de données que nous n’avons tout simplement pas le temps de lire! En tant qu’administrateur de contenu Web moderne, votre travail est de maximiser le débit. Plus vous utilisez de petits mots, mieux votre travail sera. Pourquoi les images sont – elles si importantes? Il y a de nombreuses raisons pour lesquelles vous devriez (et devriez) Utiliser des images dans les messages et les articles: les images peuvent être utilisées comme stimulus visuel pour les invitations à l’action (CTA). Le CTA peut être n’importe quelle activité que vous voulez que vos visiteurs exécutent. Les Dec courantes comprennent l’abonnement à des communiqués de presse, le partage d’articles sur les médias sociaux ou l’achat de produits. L’image améliore le lien que l’auteur tente d’établir avec le lecteur. Les images transmettent plus d’informations avec moins d’informations. Il est donc essentiel d’utiliser les bonnes images dans nos présentations (blogs, rapports informels, présentations PowerPoint réelles, etc.) Laissez une marque dans le cœur du lecteur!
Mais attends! Il y a un problème! Les images représentent 63% de la largeur de bande utilisée par les sites Web modernes, de sorte qu’il est de plus en plus important d’optimiser correctement la vitesse. Un deuxième retard dans le temps de chargement de la page pourrait réduire le taux de conversion de 7%. Nous avons déterminé que les gens ont peu de temps pour se concentrer (un des inconvénients de la vitesse de production de contenu moderne). Même si vous utilisez les bonnes images, elles perdent intérêt si elles ne sont pas téléchargées dans un délai acceptable. La plupart des sites Web ont le même problème: ils utilisent de bonnes images, mais la façon dont les images sont fournies aux visiteurs est mauvaise. Grande taille, mauvaise optimisation, Format incorrect, taille inutile, images non réactives et erreurs de référencement négligentes
Certains des problèmes les plus courants auxquels font face les réseaux modernes. Dans l’article d’aujourd’hui, nous vous proposons 10 techniques simples d’optimisation d’image que vous pouvez utiliser pour éviter ces problèmes.
1. Redimensionner l’image avec une grande taille Les jetons supplémentaires ne sont – ils pas toujours bons? C’est un classique. Supposons que vous ayez besoin d’une photo de 150 X 150 pixels sur la page de l’équipe du site. En général, vous frappez la tête avec 5 MP, Ajustez légèrement et chargez. Tu as trouvé le problème? Certaines personnes téléchargent directement des images réelles de 5 MP! Le thème WordPress charge l’image entière de 5 MP (c’est – à – dire 5 x 10 ^ 6 pixels) et demande au navigateur de la réduire à la taille souhaitée de 150x150px. Fondamentalement, le navigateur n’affiche que 00045% de l’image originale!
Vous finirez par gaspiller votre bande passante et celle de vos visiteurs (même si vous fournissez des images via un réseau de distribution de contenu comme stackpath CDN), consommant plus d’espace disque dur et augmentant le temps de chargement. Aucune de ces fonctions n’est celle que vous souhaitez utiliser sur votre site. Toujours redimensionner l’image à la taille souhaitée, puis télécharger! Vous n’avez pas besoin d’un logiciel sophistiqué pour le faire: il existe des outils en ligne gratuits comme imageresize. Org, que vous pouvez utiliser pour redimensionner et optimiser rapidement les images. Il suffit de télécharger et de modifier vos paramètres de photo. Une fois terminé, Téléchargez l’image optimisée pour l’utiliser sur le site. Ils offrent également un compresseur d’image rapide si vous voulez simplement réduire la taille du fichier.
Outils utiles: irfanview est un excellent logiciel libre pour redimensionner les images par lots avec des options avancées telles que l’optimisation, le filigrane et les bordures. Imagemagick est un outil open source avancé qui peut être utilisé dans de nombreux langages et systèmes de programmation
Je travaille. Vous pouvez écrire une application ou l’utiliser sur la ligne de commande. Imageoptim (MAC) vous permet de faire glisser un dossier entier et d’optimiser rapidement plusieurs images. Tinypng est un outil de compression d’images en ligne avec API. 2. Utiliser le bon format d’image Les formats utilisés pour les images jouent un rôle crucial. En général, PNG est utilisé pour les graphiques vectoriels et les images générées par ordinateur, comme l’art clip. Utilisez JPEG pour des photos ou des images de différentes couleurs. Pour une explication détaillée, consultez cette merveilleuse réponse stackoverflow.
3. Utiliser le JPEG progressif Jpg de base (normal) comparativement au JPG progressif pour la population générale, il existe deux types de JPG: le JPG de base et le JPG progressif. Visuellement, les deux sont identiques. La différence réside dans la façon dont le JPEG de base est chargé: il n’y a qu’une seule couche qui contient l’image entière. Lorsque demandé, l’image entière est téléchargée immédiatement. Le JPEG progressif utilise plusieurs couches pour former l’image. Les images JPEG progressives sont chargées couche par couche, ce qui améliore progressivement la qualité et, en fin de compte, fournit une vue sans perte. Irfanview prend en charge la conversion progressive par lots de JPEG
Tous les principaux redimensionneurs d’image vous permettent d’enregistrer l’image sous forme de JPEG progressif. 4. Activer le chargement lent Le chargement lent est une bonne technique d’économie de ressources dans laquelle l’image n’est chargée que lorsque le visiteur fait défiler vers le bas dans le panneau d’affichage de l’image. Considérez un article: \
ACE affiche toutes les images.
Lorsque le chargement différé est activé, les images ne sont téléchargées que lorsque les visiteurs sont proches de l’image. En d’autres termes, l’image commence à charger lorsque vous faites défiler la vue vers le bas. Cependant, la première image est chargée immédiatement parce que vous êtes déjà dans le panneau de vue. Le chargement différé permet d’économiser de la bande passante aux deux extrémités et de réduire le temps de chargement! Vous pouvez utiliser le chargement lent dans WordPress avec le plug – in BJ lazy load. 5. Ajouter un CDN L’utilisation du réseau de diffusion de contenu (CDN) fournira des images à partir d’un serveur physiquement plus proche de l’emplacement du visiteur. Si un visiteur de l’Inde demande une image et que le CDN a un POP (un point de présence ou un serveur simple) à Tokyo et à New York, l’image sera fournie par un serveur situé à Tokyo.
Lorsque vous avez beaucoup de trafic, vous devez utiliser wordpress pour configurer votre CDN afin de réduire le temps de chargement et d’obtenir des performances globales. Ici dans wpexplorer, nous utilisons cloudflare et nous avons une liste supplémentaire de services CDN gratuits recommandés que vous voudrez peut – être voir. Mais il peut être difficile de configurer votre propre CDN, et c’est là que les plug – ins peuvent être utiles. Désinstaller la publication des médias Une bonne option est publitio désinstaller le plug – in média, qui vous permet de stocker des fichiers médias sur un gestionnaire de médias basé sur publitio Cloud. Après l’installation du plug – in, vous pouvez facilement déplacer l’ensemble de la médiathèque du serveur et même optimiser la qualité des images et des vidéos. Une fois déplacé, l’image sera bientôt disponible pour le service CDN de publitio. Cela libère beaucoup d’espace serveur et peut vraiment accélérer votre site (surtout si vous avez un plan d’hébergement bon marché avec un espace limité). Et un simple bouton \
Ajoute automatiquement de nouveaux médias au Cloud lors de l’édition de nouveaux messages. Le programme avancé de publitio comprend des fonctionnalités supplémentaires pour personnaliser cname, multi – filigrane et même le cryptage vidéo.
6. Déclarer l’attribut \
8. Image de réaction La conception web réactive est ici, même si votre site Web est réactif, cela ne signifie pas que vos images sont réactives. Cela signifie que l’image de titre que vous utilisez pour l’écran de bureau de 22 pouces est également disponible pour l’iPhone de 5 pouces. Lorsque vous téléchargez une image, WordPress la Redimensionne en plusieurs versions: vignettes, taille moyenne, pleine taille, etc. Cela peut être modifié par le développeur. Un thème bien codé sera utilisé pour la version \
– Oui. Les titres des images ne sont pas toujours nécessaires, bien qu’ils soient parfois nécessaires, comme les captures d’écran dans les tutoriels. Les images sous le thème peuvent aider les lecteurs à mieux comprendre le thème tout en améliorant le référencement. 10. Le nom du fichier image doit être considéré du point de vue du moteur de recherche. Utilisez le même texte que celui utilisé dans la balise de titre d’image. De plus, essayez d’inclure les mots clés les plus pertinents pour votre site. Conclusion l’optimisation des moteurs de recherche d’images est très importante pour tout nouveau site Web. Les personnes qui mettent correctement en œuvre le référencement d’images (parfois trivial) peuvent obtenir un flux organique important (le meilleur type de flux) à long terme. Avez – vous une excellente technique d’optimisation? Feu!