Vous avez probablement entendu le conseil d’ajouter du contenu visuel à vos articles de blog chaque fois que possible. Le contenu visuel est plus de 40 fois plus susceptible d’être partagé sur les réseaux sociaux.

J’ai donc ajouté des images aux articles de blog.

Et j’ai appris qu’il y a bien plus que cela.

Ajouter des images aux articles de blog est un bon début. Vous constaterez probablement une augmentation du partage social et du temps passé sur la page. Les images rendent simplement tout plus lisible et partageable.

L’ajout d’images apporte également une autre liste de contrôle des éléments à rechercher lors de l’optimisation et de l’ajout – une liste de contrôle que j’ai peur de dire que j’ai manquée pendant longtemps avec l’ajout d’images au blog Buffer. Je suis heureux de partager avec vous toutes les erreurs que j’ai commises avec les images de blog au cours des derniers mois et de vous dire comment j’ai appris de mes erreurs et ce que j’ai changé depuis. J’aimerais savoir si tout cela résonne avec vous !

Erreur #1 : Nous avons téléchargé des images gigantesques

Lorsque je prends une capture d’écran sur mon Macbook, la taille de l’image est souvent de 1 500 pixels de large et de 2 mégaoctets ou plus.

Considérez que la plupart des images de blog ont souvent une largeur inférieure à 1 000 pixels et sont répertoriées en kilo-octets au lieu de mégaoctets et vous commencez à avoir une idée de la charge que je mettais sur nos pages.

Les photos d’archives étaient également incroyablement volumineuses. Je téléchargeais souvent des photos d’archives de certains de nos sites préférés comme Death to Stock Photo, Get Refe et Startup Stock Photos. Leurs images sont excellentes, et cela ferait des merveilles pour les en-têtes de blog (la façon dont nous les utilisons) ou pour les arrière-plans de sites Web ou même les pièces imprimées. En tant que tels, les fichiers image sont énormes, riches et colorés. Une image typique que je téléchargerais à partir de celles-ci serait de 4 700 × 3 100 pixels et 11 Mo !

Lorsque vous considérez que les articles de blog que nous publions contiennent plus de 1 500 mots et sont imprégnés de graphiques et d’images, je pourrais très facilement ajouter des dizaines de mégaoctets supplémentaires au chargement de la page.

Et cela est apparu dans notre rapport sur la vitesse de la page.

Optimisez les images de blog pour un impact maximal sur les réseaux sociaux |  SEJ

Ce que nous faisons pour résoudre ce problème :

L’une des raisons pour lesquelles nous sommes allés si loin avec ces grandes images est que c’est si facile. Vous prenez une capture d’écran, faites-la glisser dans WordPress, et le tour est joué !

Donc, quelle que soit la solution que nous proposions, nous voulions également nous assurer qu’elle maintiendrait les choses en mouvement avec notre flux de travail.

Heureusement, nous avons trouvé un paramètre utile dans WordPress où vous pouvez choisir la taille des tailles d’image que vous utilisez dans les articles de blog. Par exemple, lorsque vous ajoutez une image à partir de la médiathèque de WordPress, vous pouvez choisir de l’ajouter en taille réelle, grande, moyenne ou miniature, et dans les paramètres de WordPress, vous pouvez définir la hauteur et la largeur pour Grande, Moyenne et Miniature. par défaut.

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

J’ai ajusté la taille de nos grandes images à 800 pixels de large maximum (la hauteur s’ajuste automatiquement pour s’adapter au rapport d’aspect).

Cela a aidé avec toutes les images à l’intérieur du corps de l’article de blog. Ils auraient fière allure sur les plus grandes tailles de moniteur, et ce seraient des fichiers suffisamment petits pour ne pas trop alourdir la vitesse de notre page.

Pour nos images d’en-tête principales, nous avons trouvé une solution différente. Puisque nous utilisons l’option Image en vedette de WordPress pour les placer, nous n’avons pas tout à fait la possibilité de choisir Grand, Moyen ou Vignette. L’image qui se trouve dans la médiathèque est l’image qui est chargée sur la page.

Nous avons donc dû télécharger une image plus petite.

Nous avons essayé plusieurs excellents plugins WordPress pour voir s’ils pouvaient aider au dimensionnement des images. Avec notre configuration (nous utilisons un système tiers pour l’hébergement et la gestion Web), cela n’a pas tout à fait fonctionné. Voici la liste que nous avons essayée au cas où vous en trouveriez des utiles ici pour vous.

  • Smush.it
  • Optimiseur d’image EWWW
  • Hammy
  • Optimiseur d’image CW

Nos tests nous ont amenés à Compressor.io, un outil Web gratuit qui vous permet de télécharger l’image sur le site, puis de comprimer l’image dans un fichier aussi petit que possible. Je constate souvent des réductions de 60 à 70 % de la taille des images lorsque j’emprunte cette voie.

Alors maintenant, lorsque nous ajoutons des images d’en-tête, nous téléchargeons l’image à partir du site de photos, la téléchargeons sur Compressor.io, téléchargeons la version compressée, puis téléchargeons la version compressée sur WordPress. C’est quelques étapes supplémentaires mais ça vaut bien l’investissement.

Erreur #2 : Nous avons utilisé de petites images comme vignettes

Pendant longtemps, nous avons placé une image de stock en vedette dans le coin supérieur droit de l’article de blog. Cela a aidé avec la largeur de nos paragraphes pour nos intros, et cela a fourni de belles images que les gens pouvaient cliquer pour partager.

Le seul problème : la petite image que nous avons utilisée n’était pas exactement partageable.

Lorsque vous partageriez une petite image miniature de nos articles de blog, cela ne semblerait pas idéal sur Twitter ou Facebook.

Voici à quoi cela ressemblait sur Twitter:

Optimisez les images de blog pour un impact maximal sur les réseaux sociaux |  SEJ

Voici à quoi ça ressemblait sur Facebook :

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

La taille de l’image n’était pas idéale pour la façon dont ces réseaux sociaux gèrent les images d’aperçu.

Ce que nous faisons pour résoudre ce problème :

Après de nombreux essais et erreurs, nous sommes tombés sur une taille idéale qui fonctionnait à la fois pour Twitter et Facebook (et Google+ et d’autres également). Maintenant, nous pouvons placer une image qui fonctionnera très bien, peu importe où vous la partagez.

La taille de l’image que nous avons choisie est 1 024 pixels de large sur 512 pixels de haut.

Partager cette image sur Twitter et Facebook la montre en taille réelle sans recadrage.

Twitter:

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

Facebook:

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

Il existe plusieurs stratégies différentes pour inclure cette image dans les articles de blog.

Premièrement, si nous voulons conserver l’image dans le coin supérieur droit, nous pouvons utiliser les paramètres de WordPress pour le faire. WordPress redimensionne l’image en ajoutant une hauteur et une largeur à la fin du nom de fichier, créant essentiellement une nouvelle image plus petite pour vous.

Par exemple, supposons que vous cherchiez à ajouter ce fichier image à votre message :

https://blog.bufferapp.com/wp-content/uploads/2014/12/blog-images.png

Si vous choisissez d’insérer l’image en taille moyenne, le fichier image WordPress réel qui sera ajouté sera :

https://blog.bufferapp.com/wp-content/uploads/2014/12/blog-images-300×150.png

Dans ce cas, nous avons dû revenir en arrière et supprimer ce code des images afin qu’elles soient partagées à la taille souhaitée. Au lieu d’ajouter une hauteur et une largeur au nom du fichier image, la taille est contrôlée par les attributs de hauteur et de largeur de l’image.

<img class=”alignnone size-medium wp-image-10935″ src=”https://blog.bufferapp.com/wp-content/uploads/2014/12/blog-images.png” alt=”blog images” largeur=”300″ hauteur=”150″ />

La stratégie que nous avons finalement employée était un peu plus simple. Au lieu de placer une image dans le coin supérieur droit du message, nous plaçons l’image sous l’introduction du message, en taille réelle. De cette façon, nous nous assurons que la bonne image à la bonne taille sera vue et partagée.

Erreur #3 : Nous n’avons pas réussi à donner de bons noms à nos fichiers image

S’il vous arrive de parcourir les fichiers image associés au blog Buffer, vous en verrez probablement beaucoup qui ressemblent à ceci :

https://blog.bufferapp.com/wp-content/uploads/2014/12/591.jpeg

… et ça:

https://blog.bufferapp.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-13.48.49-PM.png

Ce sont les noms de fichiers de la plupart des images que j’ai téléchargées. Oups. Non seulement ils sont complètement non descriptifs, mais ils ne nous aident pas non plus avec le référencement.

L’optimisation des images et le référencement sont un thème que vous pourriez reprendre au fil des prochaines erreurs que nous avons commises. Un manque d’images descriptives nuit au référencement de votre site. Il y a un excellent fil de questions sur Moz qui explique pourquoi les noms de fichiers (et les balises alt et les balises de titre) sont si importants, en particulier cette réponse de Benjamin de Gap Up Internet Marketing :

Oui, nommer les images fait une différence. Pensez-y du point de vue de Google. Si vous explorez un site et que vous tombez sur une image sans balise ALT, sans titre et portant le nom C19823.JPG. Quelle pourrait être cette image ?

Imaginez maintenant que vous êtes Google et que vous tombez sur une image intitulée golden-retriever.jpg. Il y a de fortes chances que cette image soit celle d’un chien. Surtout si le contenu de la page concerne également les chiens. Plus Google peut utiliser d’indices pour comprendre ce qu’est un site, mieux c’est.

Effectuez une recherche Google Image pour « golden retriever » et regardez les noms de fichiers. Remarquez-vous des similitudes ?

Je viens d’essayer le défi de recherche d’images « golden retriever », et bien sûr, les images du haut de la page sont nommées de manière descriptive et précise.

  • http://images.akc.org/breeds/action_images/golden_retriever.jpg
  • http://upload.wikimedia.org/wikipedia/commons/b/b5/Canadian_Golden_Retriever.jpeg
  • http://dog-breeds.findthebest.com/sites/default/files/465/media/images/Golden_Retriever_899814.jpg

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

Ce que nous faisons pour résoudre ce problème :

Je n’ai pas encore parcouru toutes les images mal nommées et je ne les ai pas corrigées (si quelqu’un connaît un plugin WordPress utile pour aider à cela, je serais ravi d’en entendre parler !). J’ai abordé certaines des images de nos publications les plus importantes, les publications que nous essayons de classer pour un mot-clé particulier ou les images qui ont un besoin direct et utile de renommer.

Je pense que la perspective de parcourir des centaines (des milliers ?) d’images est encore un peu décourageante ! Je vous tiendrai au courant de comment je fais avec ça.

À l’avenir, je peux dire que nous sommes maintenant beaucoup plus concentrés sur l’effort supplémentaire de donner à nos fichiers d’images des noms descriptifs.

  • Lorsque je prends des captures d’écran sur mon ordinateur, je sélectionne l’image sur mon bureau, clique sur le nom du fichier et tape quelque chose de descriptif avant de télécharger l’image sur WordPress.
  • Dans Skitch, lorsque j’enregistre une image sur mon ordinateur, je m’assure de l’enregistrer avec un nom de fichier descriptif.
  • Lorsque je crée des images avec Canva, je m’assure de donner un bon titre à l’image avant de l’enregistrer (le titre est ce que Canva utilise comme nom de fichier).

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

Erreur #4 : nous n’avons pas réussi à ajouter des balises Alt et des balises de titre

Je ne suis pas sûr d’avoir bien compris l’utilisation et la valeur des balises alt et des balises de titre jusqu’à tout récemment, alors permettez-moi de commencer par une définition rapide.

La balise alt est une alternative textuelle à une image qui s’affiche lorsqu’un navigateur n’affiche pas l’image. Certains navigateurs choisissent de ne pas afficher les images pour des raisons de vitesse ou de sécurité, et d’autres s’appuient sur des balises alt pour l’accessibilité afin que les personnes handicapées puissent facilement utiliser et parcourir les sites Web.

Les balises de titre sont assez similaires aux balises alt mais sont utilisées pour décrire un lien au lieu d’une image.

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

Vous pouvez voir une balise alt ou une balise de titre lorsque vous survolez une image ou un lien avec votre souris.

En plus des avantages d’accessibilité, l’ajout de balises title et alt fait la différence avec le référencement. Mark Hayes de Shopify a écrit une excellente et simple justification de la raison pour laquelle ces balises sont si importantes (une grande partie peut être due à la maxime du « golden retriever » ci-dessus).

L’attribut alt ajoute également une valeur SEO à votre site Web. L’ajout de balises alt appropriées aux images de votre site Web peut aider votre site Web à obtenir un meilleur classement dans les moteurs de recherche en associant des mots-clés aux images. En fait, l’utilisation de balises alt est probablement le meilleur moyen pour vos produits de commerce électronique d’apparaître dans les recherches d’images et sur le Web de Google.

La priorité n°1 en matière d’optimisation d’image est de remplir chaque balise alt pour chaque image (pertinente) de votre site.

Dans l’éditeur WordPress, ajouter le titre et la balise alt à une image est super simple. Vous téléchargez une image, vous entrez dans le titre et la balise alt, et vous êtes prêt à partir.

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

Ce que nous faisons pour résoudre ce problème :

Semblable aux correctifs pour les noms de fichiers, nous avons toute une archive d’images à trier. Nous avons abordé les plus importants sur certains de nos messages les plus fréquentés, et nous trions une stratégie pour couvrir le reste. Cela peut impliquer de revenir en arrière et de modifier manuellement toutes les anciennes images, de rechercher un plugin WordPress pour aider avec des lots de celles-ci, ou d’attraper les images au fur et à mesure qu’elles arrivent, alors que nous revisitons les publications passées dans nos audits de contenu semi-réguliers.

À l’avenir, nous avons fait un effort plus concerté pour inclure des balises de titre et alt pour chaque image que nous ajoutons à nos articles de blog.

WordPress est assez intuitif lorsqu’il s’agit d’ajouter ces balises. Par défaut, il ajoute le nom du fichier dans la balise de titre d’une image.

Ainsi, le fait de nommer correctement les photos facilite l’inclusion des balises de titre et des balises alt. Une fois la balise de titre en place, nous pouvons simplement copier-coller dans la balise alt pour terminer le processus de balisage.

Voici un exemple de ce à quoi ressemble la sortie :

<a href="https://blog.bufferapp.com/wp-content/uploads/2014/12/blog-images.png" titre = « images de blog »><img class=”alignnone size-full wp-image-10935″ src=”https://blog.bufferapp.com/wp-content/uploads/2014/12/blog-images.png” alt= »images de blogs »largeur=”1024″ hauteur=”512″ />

Erreur #5 : Nous n’avons pas dimensionné en conséquence

Si vous regardez certaines des captures d’écran que nous avons prises pour être utilisées sur le blog, vous remarquerez peut-être que certains des rapports de taille semblent assez extrêmes. Une capture d’écran bio de Twitter occupe toute la largeur de la publication. Un petit extrait s’étend sur un espace bien trop grand.

Dans de nombreux cas, j’ai laissé les images telles qu’elles étaient lorsqu’elles ont été téléchargées – aussi grandes que possible, et souvent plus grandes que nécessaire.

Ce que nous faisons pour résoudre ce problème :

WordPress a quelques moyens simples pour mieux gérer cela. Pour commencer, vous pouvez définir une hauteur et une largeur d’image personnalisées en cliquant sur l’icône Crayon au-dessus de n’importe quelle image et en modifiant la taille de l’image.

Optimisez les images de blog pour un impact maximal sur les réseaux sociaux |  SEJ

Le problème pour moi était que la modification de ces chiffres me laissait une vision abstraite de ce que ces tailles signifieraient réellement. J’ai dû essayer plusieurs fois pour bien faire les choses, et quand je travaillais vite, j’ai négligé de prendre le temps supplémentaire.

Donc, une solution de contournement que nous expérimentons consiste à ajuster la taille de nos images moyennes par défaut. Actuellement, la taille moyenne est de 300 pixels, ce qui finit souvent par être trop petit pour les images que je souhaite redimensionner. Je fais passer cette taille d’image à 400. Voici un exemple de l’apparence de la nouvelle taille.

Optimisez les images de blog pour un impact maximal sur les médias sociaux |  SEJ

9 façons de tirer le meilleur parti des images de votre blog

Jeremy Rivera de Authority Labs a dressé un excellent aperçu des nombreuses erreurs qui peuvent être commises avec des images sur un blog. La liste des neuf erreurs courantes de Jeremy peut tout aussi bien être transformée en une liste de contrôle pour bien faire les images. Je pense que j’ai appris plusieurs de ces leçons à la dure. Comment vous en sortez-vous avec cette liste de contrôle ?

Comment tirer le meilleur parti des images sur votre blog :

  1. Utiliser des images
  2. Placez des images en taille réelle dans votre message – plus de vignettes alignées à droite
  3. Donnez à votre fichier image un nom descriptif
  4. Assurez-vous que la taille de votre image est petite et raisonnable
  5. Créez un titre et une balise alt pour chaque image
  6. Évitez les images de stock génériques (essayez plutôt certains de ces sites de photos gratuits)
  7. Placez une légende sur votre image (nous n’avons pas encore essayé celle-ci, qu’en pensez-vous ?)
  8. Lien vers la source de votre image
  9. Essayez de prendre une image vous-même

À vous

Quelles stratégies et techniques avez-vous découvertes pour tirer le meilleur parti des images sur votre blog ?

Quelles erreurs as-tu commises ? Qu’avez-vous appris en cours de route ?

Espérons que cet aperçu de nos apprentissages chez Buffer vous aidera lors de la configuration des visuels sur votre blog. Si je peux ajouter plus de contexte à tout ce qui est mentionné ici, n’hésitez pas à demander dans les commentaires !

Sources des images : IconFinder, Blurgrounds, Startup Stock Photos, Shopify

Ce message est apparu à l’origine sur Buffer et est republié avec autorisation.

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici