Les internautes n’ont pas beaucoup de temps pour consommer des données, car il y a tellement de ces dernières. Il y a tellement de données que nous n’avons tout simplement pas le temps de tout lire ! En tant que conservateur de contenu pour le Web moderne, votre tâche consiste à maximiser le débit. Plus vous exprimez avec moins de mots, mieux vous êtes dans votre travail.
Pourquoi les images sont-elles (si très) importantes ?
Il existe de nombreuses raisons pour lesquelles vous utiliseriez (et devriez) utiliser des images dans vos publications et articles :
- Les images servent de stimuli visuels pour un appel à l’action (CTA). Un CTA peut être n’importe quelle tâche que vous souhaitez que votre visiteur effectue. Les CTA courants incluent l’abonnement à votre newsletter, le partage de votre article sur les réseaux sociaux ou l’achat de votre produit.
- Les images renforcent le lien que l’écrivain cherche à établir avec le lecteur.
- Les images transmettent plus à travers moins.
Il est donc primordial que nous utilisions les bonnes images dans nos présentations (article de blog, rapport informel, véritable présentation PowerPoint, etc.) afin de laisser une trace dans l’esprit du lecteur !
Mais attendez! Il ya un problème!
Les images occupent environ 63 % de la bande passante utilisée par les sites Web modernes, il est donc de plus en plus important qu’elles soient correctement optimisées pour la vitesse.
Un délai d’une seconde dans le temps de chargement des pages pourrait réduire les taux de conversion de 7 %
Nous avons établi que les gens ont une courte durée d’attention (l’un des inconvénients du taux de production de contenu moderne). Même si vous utilisez les bonnes images, si elles ne se chargent pas dans les délais acceptables, l’intérêt est perdu.
La majorité des sites ont le même problème : ils utilisent d’excellentes images, mais la façon dont l’image est présentée au visiteur est médiocre. Grande taille, mauvaise optimisation, format incorrect, dimensions (tailles) inutilement grandes, images qui ne répondent pas et erreurs de référencement imprudentes, sont quelques-uns des problèmes les plus courants auxquels le Web moderne est confronté. Dans l’article d’aujourd’hui, nous allons vous donner 10 conseils simples d’optimisation d’image que vous pouvez utiliser pour éviter ces problèmes.
1. Redimensionner les images avec de grandes dimensions
Celui-ci est un classique. Supposons que vous ayez besoin d’une photo de 150 × 150 pixels dans la page « Équipe » de votre site. Habituellement, vous utiliserez un headshot de 5MP, le modifierez un peu et enfin le téléchargerez.
Avez-vous repéré le problème ? Certaines personnes téléchargent directement l’image 5MP réelle ! Le thème WordPress chargera l’intégralité de l’image 5MP (c’est-à-dire 5 x 10^6 pixels) et demandera au navigateur de la réduire à la dimension requise de 150x150px. En substance, le navigateur n’affiche que 0,0045 % de l’image d’origine !
Vous finissez par gaspiller à la fois votre bande passante et celle de vos visiteurs (même si vous diffusez l’image via un réseau de diffusion de contenu comme Stackpath CDN), en consommant plus d’espace disque et en augmentant le temps de chargement. Aucune des fonctionnalités n’est quelque chose que vous voudriez dans votre site.
Redimensionnez toujours (et par redimensionner, je veux dire réduire) l’image aux dimensions requises, puis téléchargez-la !
Vous n’avez pas besoin d’un logiciel sophistiqué pour le faire – il existe des outils en ligne gratuits comme ImageResize.org vous pouvez utiliser pour redimensionner et optimiser rapidement vos images. Il suffit de télécharger et de modifier les paramètres de votre photo. Lorsque vous avez terminé, téléchargez votre image optimisée à utiliser sur votre site. Ils offrent également un rapide Compresseur d’images si vous voulez juste réduire la taille du fichier.
Outils utiles :
- IrfanVoir est un excellent logiciel gratuit pour redimensionner par lots vos images 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 une variété de langages de programmation et de systèmes d’exploitation. Vous pouvez écrire votre propre application ou simplement l’utiliser via la ligne de commande.
- ImageOptim (Mac) vous permet de faire glisser des dossiers entiers et d’optimiser rapidement plusieurs images.
- TinyPNG est un outil de compression d’images en ligne avec une API.
2. Utilisez le bon format d’image
Le format utilisé pour l’image joue un rôle essentiel. En règle générale, utilisez PNG pour les graphiques vectoriels et les images générées par ordinateur telles que les images clipart, etc. JPEG pour des photographies ou des images avec une variété de couleurs. Pour une explication détaillée, consultez ceci réponse géniale de StackOverflow.
3. Utilisez des JPEG progressifs
Pour le commun des mortels, les JPEG sont de deux types : de base et progressifs. Visuellement, les deux sont identiques. La différence réside dans la façon dont ils sont chargés :
- Le JPEG de base n’a qu’un seul calque – contenant l’image entière. Sur demande, l’image entière est chargée en une seule fois.
- Les JPEG progressifs composent l’image avec plusieurs couches. Une image JPEG progressive est chargée couche par couche, ce qui augmente progressivement la qualité, vous offrant finalement une vue sans perte.
Tous les principaux redimensionneurs d’images vous permettent d’enregistrer des images au format JPEG progressif.
4. Activer le chargement paresseux
Chargement paresseux est un excellent économie de ressources technique où une image n’est chargée que lorsque le visiteur fait défiler jusqu’au cadre de vue de l’image. Considérez un article – « 15 des voitures les plus économes en carburant en 2014 ». Naturellement, cet article contiendra au moins 15 images. Et quelle que soit la hauteur du périphérique d’affichage – moniteur, tablette ou smartphone, vous ne pouvez pas faire tenir les 15 images dans le cadre de vue. Vous devez faire défiler vers le bas pour voir toutes les images.
Lorsque le chargement différé est activé, les images ne seront chargées que lorsqu’un visiteur se trouve à proximité de l’image. En d’autres termes, les images commencent à se charger juste lorsque vous faites défiler vers le bas pour les voir. Les premières images, cependant, sont chargées instantanément, puisque vous êtes déjà dans le cadre de vue. Le Lazy Loading économise de la bande passante aux deux extrémités et améliore le temps de chargement ! Vous pouvez utiliser le Lazy Loading dans WordPress avec le Plugin BJ Lazy Load.
5. Ajouter un CDN
L’utilisation d’un réseau de diffusion de contenu (CDN) servira l’image à partir d’un serveur physiquement le plus proche de l’emplacement du visiteur. Si un visiteur indien demande une image et que le CDN a un POP (point de présence, ou simplement un serveur) à Tokyo et à New York, l’image sera servie à partir du serveur situé à Tokyo.
Lorsque vous avez un trafic considérable, vous devez configurer un CDN avec WordPress afin de réduire votre temps de chargement et de gagner en performances globales.
Chez Themelocal, nous utilisons Cloudflare, et nous avons ajouté une liste de services CDN gratuits recommandés que vous voudrez peut-être consulter. Mais configurer vous-même un CDN peut être compliqué, c’est là qu’un plugin peut s’avérer utile.
Médias de déchargement de publication
Une excellente option est le plugin Publitio Offload Media qui vous permet de stocker vos fichiers multimédias sur le Gestionnaire de médias basé sur le cloud de Publitio. Une fois le plug-in installé, vous pouvez facilement déplacer l’intégralité de votre bibliothèque multimédia hors de vos serveurs et même optimiser la qualité de l’image et de la vidéo lorsque vous le faites. Une fois déplacées, les images sont rapidement servies à partir du CDN Publitio. Cela libère des tonnes d’espace serveur et peut vraiment accélérer votre site (surtout si vous avez un plan d’hébergement économique avec un espace limité). Il existe même un simple bouton Synchroniser maintenant pour ajouter automatiquement de nouveaux médias au cloud lorsque vous modifiez de nouvelles publications. Et les plans Premium Publitio incluent des fonctionnalités supplémentaires pour les CNAME personnalisés, plusieurs filigranes et même le cryptage vidéo.
6. Déclarez l’attribut ‘alt’
L’attribut ‘alt’ décrit l’image pour le moteur de recherche. Le texte que vous entrez dans ce champ sera affiché à l’utilisateur au cas où l’image ne pourrait pas être chargée. Beaucoup de gens ont tendance à laisser ces champs vides. Ceci est très préjudiciable pour le référencement, et vous perdez du trafic. Vous devriez toujours essayer d’inclure les mots-clés de votre site dans la balise alt de vos images.
7. Optimiser une compression d’images
Les images optimisées sont 40 % plus claires que les images normales. Cela améliore le temps de chargement et économise de la bande passante. De la liste de Freddy des meilleurs plugins d’optimisation d’image WordPress, nous recommandons WPSmush.it pour optimiser vos images. Kraken.io est également une excellente option en ligne pour compresser des images en un tournemain. Nous l’utilisons tout le temps ici chez Themelocal pour optimiser les images présentées avant de les télécharger dans des publications et des démos thématiques.
8. Images réactives
Même si votre site est responsive, cela ne veut pas dire que vos images le sont. Cela signifie que l’image d’en-tête que vous utilisez pour un écran de bureau de 22 pouces est également diffusée sur un iPhone de 5 pouces. Lorsque vous téléchargez une image, WordPress la redimensionne en plusieurs versions – miniature, moyenne, pleine taille, etc. Cela peut être modifié par le développeur. Un thème bien codé servira la version de taille « moyenne » de l’image, économisant ainsi de la bande passante.
Les Remplissage d’images.WP Le plugin remplacera les balises d’image par un nouvel élément
9. Légendes des images
Les légendes ne sont pas toujours nécessaires, bien que dans certains cas, elles soient obligatoires, comme les captures d’écran dans un didacticiel. Le sous-titrage des images aide les lecteurs à mieux comprendre le sujet, tout en améliorant votre référencement.
10. Nom du fichier image
Pensez au nom de fichier du point de vue d’un moteur de recherche. Utilisez le même texte que vous le feriez dans la balise ‘title’ de l’image. Essayez également d’inclure les mots-clés les plus pertinents pour votre site.
Conclusion
Le référencement des images est d’une importance cruciale pour tout site Web, ancien ou nouveau. Les personnes qui implémentent le référencement d’images correctement (cela peut parfois être assez banal), gagnerez une quantité importante de trafic organique (le meilleur type de trafic) dans le long terme.
Vous avez une technique d’optimisation géniale ? Tirez loin !