N'aimez-vous pas les images ?

Elles peuvent transformer un texte en une expérience attrayante pendant la lecture. Les images améliorent un article de blog, le rendent plus partageable et donnent le ton et la marque de l'ensemble de votre site.

C'est pourquoi l'intégration d'images dans votre contenu est un outil puissant pour le marketing de votre blog.

Mais si vous ne faites pas attention, les images peuvent représenter plus de la moitié (ou plus) de la taille totale de votre page web. Il y a quelques années, la taille moyenne d'une page web était de 600-700K. Aujourd'hui, la moyenne est de 2MB et elle augmente chaque année.

C'est énorme !

La raison principale en est que les pages web utilisent de plus en plus souvent des images multiples et que ces images ne sont pas correctement dimensionnées et optimisées, ce qui signifie qu'elles ne sont pas sauvegardées ou compilées de manière conviviale pour le web et qu'au lieu de cela, elles gonflent vos pages.

La plupart d'entre nous, cependant, laissent l'optimisation des images au second plan et préfèrent s'adonner à des activités plus amusantes, comme la rédaction d'un article épique ou la création d'un réseau avec d'autres blogueurs de la même niche.

Toutefois, le gonflement des pages a une incidence sur leur vitesse de chargement. Si vous disposez d'une connexion à haut débit, vous ne pensez peut-être pas que cela soit important, mais ce n'est pas le cas de la plupart de vos visiteurs. En outre, Google n'aime pas les pages qui se chargent lentement et cela peut avoir une incidence négative sur votre référencement.

Pourquoi faut-il optimiser les images ?

Vous travaillez dur pour créer un contenu de qualité et vous passez d'innombrables heures à promouvoir votre blog et à travailler en réseau avec d'autres blogueurs. La dernière chose que vous voulez, c'est que les visiteurs potentiels abandonnent votre site avant même qu'il ne soit chargé !

Des études montrent que jusqu'à 40 % des visiteurs cliquent sur le bouton "retour" si le chargement d'un site prend plus de trois secondes.

Je sais, trois secondes, ce n'est pas si long, mais lorsque vous êtes sur une connexion mobile et que vous attendez le chargement d'un site, une seconde peut vous sembler une éternité.

Et comme beaucoup de vos visiteurs utilisent des connexions mobiles plus lentes, il est clair que vous devez réduire la taille de vos pages. Et nous savons déjà quel est le principal responsable de la taille des pages : les images.

Les images inutilement volumineuses occupent également de l'espace sur votre compte d'hébergement. Si certains d'entre vous disposent d'un hébergement avec un espace de stockage "illimité", de nombreux fournisseurs d'hébergement haut de gamme vous limitent à environ 10 Go d'espace de stockage pour les plans de niveau inférieur. Cet espace peut se remplir rapidement, en particulier si vous hébergez plusieurs sites à forte densité d'images sur le même compte.

Comment savoir si vos images ralentissent votre site ? Testez la vitesse de votre site avec Google PageSpeed Insights.

Si Google signale un problème d'images non optimisées, voici ce qu'il faut savoir pour y remédier.

Les bases de l'optimisation des images

Lorsqu'il s'agit d'optimiser les images sur votre blog, vous devez tenir compte de plusieurs éléments : le type de fichier, la taille et les dimensions de l'image, la manière dont vous diffusez vos images et la compression de l'image.

Examinons de plus près chacun de ces domaines.

Type de fichier

Les images sur le web sont généralement enregistrées au format PNG ou JPEG - ou GIF pour les animations. Qui n'aime pas ces GIF animés hilarants qui circulent sur le web !

Maintenant, c'est techniquement d'accord si vous enregistrez vos images dans l'un ou l'autre format, le navigateur de votre visiteur n'aura aucun mal à afficher votre page web. Toutefois, pour une qualité et une optimisation optimales, respectez les règles suivantes :

• JPEG - à utiliser pour les photographies et les dessins où figurent des personnes, des lieux ou des objets.
• PNG - idéal pour les graphiques, les logos, les dessins contenant beaucoup de texte, les captures d'écran et lorsque vous avez besoin d'images avec un arrière-plan transparent.
• GIF - si vous avez besoin d'une animation, sinon utilisez PNG

Alors, pourquoi y a-t-il différents formats ?

Le format PNG est traditionnellement utilisé pour enregistrer des logos et des graphiques, car il préserve la qualité de l'image originale - personne ne veut d'un texte flou ou de formes pixelisées. Mais si vous essayez d'enregistrer une photo au format PNG, vous obtiendrez un résultat magnifique, mais la taille du fichier qui en résultera sera loin d'être extraordinaire.

Une partie des données de l'image est supprimée afin de réduire considérablement la taille du fichier, mais comme les photos contiennent une grande variété de couleurs et de variations naturelles, la perte de qualité est généralement imperceptible pour l'œil humain.

Nous reviendrons plus en détail sur la compression plus tard, mais pour l'instant, si vous ne retenez que deux choses, rappelez-vous : JPEG pour les photos et PNG pour le texte/les graphiques.

Dimensions de l'image

Vous est-il déjà arrivé de charger une page web et de remarquer qu'une petite image (une photo de tête, par exemple) mettait f-o-r-e-v-e-r à se télécharger ? Si lentement que vous pouvez voir chaque ligne arriver ? Vous vous dites : comment une si petite image peut-elle prendre autant de temps à se télécharger ?

Et lorsque cela se produit avec une grande image d'en-tête, c'est encore pire car cela peut bloquer le chargement de toute la page.

La raison en est que le blogueur n'a pas correctement redimensionné et optimisé son image et, dans le cas de notre exemple de photo de tête, il a peut-être téléchargé un JPEG pleine résolution directement à partir de son appareil photo reflex numérique.

Et c'est un dossier énorme !

Ce qui semble être une petite image à l'écran peut en réalité être une énorme photo de 10 mégapixels, réduite en temps réel par le navigateur.

Certaines plateformes de publication web créent automatiquement plusieurs variantes de votre image en pleine résolution dans différentes tailles, mais si ce n'est pas le cas, vous devez redimensionner vos images au préalable dans un éditeur d'images tel que Photoshop, Lightroom, Pixlr - ou même MS Paint. Cela peut faire la différence entre un fichier de 50 Ko et un autre de 5 Mo.

WordPress, par exemple, crée automatiquement trois copies (ou plus, selon votre thème) de l'image téléchargée - toutes de dimensions différentes - que vous pouvez utiliser dans les articles de votre blog, au lieu de toujours utiliser l'image en taille réelle.

Si vous avez l'habitude de télécharger d'énormes images de photos d'archives et que vous souhaitez économiser de l'espace sur votre compte d'hébergement, le plugin WordPress Imsanity est là pour vous aider.

Il redimensionne et remplace l'image originale par quelque chose de plus maniable, de sorte que même si vous insérez l'image en taille réelle dans votre message, ce ne sera pas si grave.

Une fois activé, Imsanity peut également rechercher vos images existantes et les redimensionner en conséquence.

Servir vos images

La façon dont vous présentez vos images à vos visiteurs n'est pas une question d'optimisation à proprement parler, mais elle peut avoir un impact considérable sur le temps de chargement de votre page.

La plupart des blogueurs utilisent leurs images directement à partir de leur compte d'hébergement et c'est généralement une bonne chose, mais si vous cherchez vraiment à optimiser les performances de votre site, l'hébergement de vos images sur un réseau de diffusion de contenu (CDN) peut faire une grande différence.

Ces serveurs hébergent des copies de vos images et lorsque le navigateur d'un visiteur demande une image sur votre site web, le CDN dirige automatiquement le navigateur vers le serveur le plus proche géographiquement.

Cela signifie que les visiteurs d'Europe, par exemple, recevront des images servies par un serveur européen local, plutôt que par un serveur situé aux États-Unis ou ailleurs. Comme le temps de réponse et la latence du réseau sont réduits, les images se téléchargent beaucoup plus rapidement, ce qui réduit le temps de chargement des pages.

Blogging Wizard utilise Sucuri (il inclut un pare-feu pour la sécurité ainsi qu'un CDN), mais il existe d'autres fournisseurs de qualité comme Amazon's Cloudfront ou KeyCDN. Même le populaire CloudFlare, qui n'est pas strictement un CDN, offre un CDN gratuitement et est facile à configurer dans la plupart des packs d'hébergement partagé.

Compression d'images

Lorsqu'il s'agit d'optimiser vos images, rien ne réduit plus la taille de vos fichiers que la compression d'image avec perte.

La plupart des outils d'édition d'images, tels que Visme ou Photoshop, enregistrent les fichiers en utilisant la compression JPEG avec perte, car elle permet de réduire au maximum la taille des fichiers. Ainsi, bien que la qualité de l'image soit légèrement réduite, l'utilisation de la compression d'image avec perte permet de réduire les images volumineuses à des tailles adaptées au web.

Je suis sûr que beaucoup de ceux qui utilisent Photoshop pourraient voir sa Enregistrer pour le Web Les outils de retouche d'images en ligne tels que PicMonkey ou Visme optimisent également vos images.

Mais saviez-vous qu'il existe des outils capables de prendre votre image "optimisée" dans Photoshop ou d'autres outils d'édition, de l'écraser et de la compresser de 40 % supplémentaires (ou plus), et de la compresser ? encore doivent-ils apparaître presque identiques à l'œil humain ?

Voici quelques outils gratuits et payants qui vous aideront à réduire vos images pour les rendre compatibles avec le web.

Outils de bureau

ImageAlpha / ImageOptim

Pour les utilisateurs de Mac, ImageOptim est un outil de bureau gratuit que j'utilise tous les jours pour optimiser les images PNG - principalement des captures d'écran - avant de les télécharger. Ces outils sont faciles à utiliser, vous n'avez qu'à glisser et déposer vos fichiers, mais vous devez le faire une image à la fois.

Conseil de pro ImageOptim-CLI : Pour les plus avertis, ImageOptim-CLI permet d'optimiser un dossier entier d'images en une seule fois.

ImageAlpha est un compresseur PNG avec perte et peut faire des merveilles pour réduire les fichiers PNG, tandis qu'ImageOptim effectue une compression avancée sans perte (avec option de perte) et supprime les métadonnées inutiles des fichiers PNG, JPEG et GIF.

Pour mes images PNG, je les passe d'abord par ImageAlpha :

Ici, il a réduit l'image de ma capture d'écran de 103K à 28K.

Je l'ai ensuite passé dans ImageOptim et j'ai économisé 10 % supplémentaires.

JPEGmini

Pour mes fichiers JPEG, je les optimise avec l'application de bureau JPEGmini, disponible pour Mac et Windows.

La version Lite vous permet d'optimiser gratuitement jusqu'à 20 images par jour, et il vous en coûtera 19,99 $ pour supprimer cette limite.

Conseil de pro Les utilisateurs avancés souhaitant intégrer JPEGmini dans Photoshop ou Lightroom par le biais d'un plugin peuvent acheter la version Pro au prix de 99,99 $.

Outils en ligne / Cloud / SaaS

TinyPNG

Si vous recherchez un outil de compression d'images en ligne de haute qualité, TinyPNG (malgré son nom, il optimise également les fichiers JPEG) est une application web qui vous permet de faire glisser jusqu'à 20 images de 5 Mo ou moins dans votre navigateur, et de les optimiser en une seule fois.

Ils disposent également d'une API pour les développeurs et mettent à disposition un plugin WordPress qui permet d'optimiser automatiquement vos images lors du téléchargement.

TinyPNG vous offre 500 optimisations d'images gratuites par mois, et facture ensuite entre 0,002 et 0,009 $ par image, en fonction du volume.

500 images par mois, cela peut sembler beaucoup, mais si l'on considère que WordPress crée souvent trois à cinq variantes de chaque image dans des tailles différentes, 500 images ne semblent pas être un chiffre énorme. que de nombreux Heureusement, le coût par image est abordable.

Optimiseur d'images EWWW

Si vous n'êtes pas prêt à dépenser de l'argent et que vous ne voulez pas vous embêter à optimiser vos images manuellement, le plugin gratuit EWWW Image Optimizer pour WordPress peut optimiser automatiquement vos images téléchargées.

Vous pouvez opter pour un abonnement premium qui effectue une compression avec perte, mais la version gratuite n'effectue qu'une compression sans perte et les économies ne sont donc pas aussi substantielles. Cela vous fera gagner du temps et c'est mieux que rien.

Remarque : Pour un aperçu complet, consultez notre article sur les outils de compression d'images.

Pour conclure

Certains prévoient que la taille moyenne d'une page web avoisinera les 3 Mo d'ici à 2017.

N'oubliez pas que tous vos visiteurs ne disposent pas d'une connexion à haut débit, et que le gonflement des pages et la lenteur de leur chargement peuvent potentiellement affecter votre classement dans Google. Pour vous aider à alléger la charge, pour ainsi dire, prenez l'habitude d'optimiser vos images dès aujourd'hui.

Faites attention aux dimensions de vos images et redimensionnez les photos de stock trop grandes ou les images provenant d'un appareil photo numérique à une taille appropriée.

Ensuite, profitez de la compression moderne des images avec des applications de bureau comme JPEGmini, ou des outils en nuage comme TinyPNG ou Kraken - en les intégrant dans WordPress avec un plugin si possible.

Enfin, si votre plateforme de publication crée automatiquement des variantes redimensionnées de votre image originale, choisissez l'une d'entre elles pour votre article de blog, plutôt que l'image originale en taille réelle.

Lecture connexe : 7 façons de réduire la taille des fichiers PDF.