canon-camera
Blogging, Photos, Ressources

Optimiser ses images de blog : Réduire la taille de l’image

C’est un peu la saison de la photo sur Yes We Blog et j’espère que cela vous plaît. Les photos, c’est un pan tellement important pour un blog, qu’il est difficile de faire sans. Disons même que c’est incontournable. Les photos et images sur un blog, cela illustre un propos, cela attire le regard et dans le meilleur des cas, cela plaît et cela invite à la lecture, au clic et à une navigation plus fluide, agréable et ludique.

Cependant, pour rendre justement la lecture et la navigation agréables, encore faut-il que les images et photos n’alourdissent pas le blog et surtout les pages sur lesquelles elles sont mises en ligne. Encore faut-il qu’elles s’affichent vite et bien, tout en restant de bonne qualité et chouettes à regarder.

Alors comment optimiser les photos et images pour son blog ?

logo-format-google

Réduire le poids et la taille de la photo ou image

Pourquoi réduire le poids et la taille de ses photos et images ?

Une des premières choses à envisager avant d’ajouter une photo « imposante » sur son blog, c’est de la rendre plus ‘light’, moins lourde, moins gourmande en espace. La chose est valable pour tous les types de blog, mais aussi et surtout pour les blogs qui sont par exemple hébergés chez OverBlog, WordPress.com, CanalBlog ou encore Blogger… Pourquoi ? Tout simplement parce que si ces plateformes proposent de bloguer gratuitement, la gratuité a une contrepartie avec laquelle il faut composer. Et parmi les choses limitées sur une plateforme gratuite de blog, on trouve un espace serveur limité pour les documents tels que les images et photos.

Des chiffres

Par défaut, il faut savoir qu’un Blog sur WordPress.com dispose de quelques milliers de Mo seulement :

espace-disc-wpdotcom

C’est peu, vraiment très très peu quand on sait qu’une seule belle photo disponible par exemple chez Kaboompics.com, fait pas moins de 3 Mo minimum environ…

Chez Blogger/Blogspot, on sera un peu plus à l’aise avec :

espace-dispo-blogger

Chez OverBlog, sur l’offre gratuite de base, on a 4 gigas, alors là aussi, on est plus à l’aise que chez WordPress.comcomparatif-offres-overb

Quand on sait que certains blogs sont en ligne depuis plusieurs années, avec plusieurs articles par semaines et de très belles et parfois lourdes photos à chaque publication, autant dire que sur une plateforme de blog gratuite, la messe est dite. L’optimisation des images et photos est indispensable, ni plus ni moins.

Les outils pour réduire ses photos en poids et taille

Pour cela, on peut par exemple utiliser des outils gratuits et basiques, comme Paint ou encore PhotoFiltre. Voici par exemple comment diminuer les dimensions via Paint :

reduire-photo-paint

En passant cette photo de fleur des dimensions 4000 x 3000 à 700 x 525, le poids du cliché passe sans autres étapes, de 4,8 Mo à 322,3 Ko. Autant dire que ça change tout : Moins d’espace pris sur le serveur d’hébergement et une photo moins lourde et donc moins longue à afficher sur n’importe quelle page du blog !

Avec une légère compression à 90 sur PhotoFiltre et un format progressif, on peut encore diminuer le poids du cliché à 165,15 Ko comme suit :

compression-photofiltre

Et ceci n’est qu’un petit exemple de ce qui est possible en termes d’optimisation de poids et taille de photos et images. Pour optimiser vos images, vous pouvez également passer par d’autres softs beaucoup plus poussés comme PhotoShop, ou des outils web en ligne comme ImageOptimizer.net ou Kraken.io ou Compressor.

Sur WordPress.Org, une extension/Plugin très répandue et connue permet de répondre online au besoin, même si faire la manip en amont, reste plus souple. L’extension, c’est WP Smush, aussi appelée WP Smush It :

wp-smush-wordpress-yesweblog

L’extension est gratuite et facile à utiliser :) Même si elle ne tourne pas sur Yes We Blog, elle tourne sur certains de mes autres blogs et j’en suis assez satisfaite.

Impacts de l’image sur l’expérience utilisateur

« Ne fais pas aux autres ce que tu ne voudrais pas qu’on te fasse ». Cette adage résume tout, ou presque. Personnellement, j’aime quand une page s’affiche vite. Normal quoi :) On est un peu tous pareil là-dessus, sans aucun doute. Alors imaginez une page web d’un blog avec 15 photos énormes et lourdes : Il faudra donc être patient pour que tout se charge ^^ Si en plus on a une connexion moyenne (wifi bofbof), alors là, ce n’est même pas la peine !

Imaginez la même chose lorsque vous surfez via votre téléphone… Si le réseau n’est pas de votre côté, posez un RTT, vous aurez peut-être une chance de voir l’article se charger intégralement un jour ;p

L’idée, c’est de penser au confort de surf de ses lecteurs et de n’importe quel internaute qui tomberait sur votre Blog, encore plus quand on sait que les visites se font de plus en plus souvent via smartphone.

Conclusion 

En réduisant la taille de vos photos et images de Blog, vous rendez service à vos visiteurs et vous même à tout point de vue :

– Vous économisez sur l’espace d’hébergement ou espace alloué par votre plateforme de blog.
– Vous permettez aux pages et articles de votre blog de s’afficher + vite et mieux.
– Vous améliorez l’expérience utilisateur en optimisant sa navigation.
– Vous rendez votre blog + Seo Friendly.

N’est-ce pas suffisant pour faire l’effort de réduire la taille des images ;) ?

Pour aller plus loin, je vous propose de lire l’article qui fait suite à celui que vous venez de parcourir ou lire : Optimiser ses images de blog : Réduire la taille de l’image

La lenteur du temps d’affichage a également des impacts sur le référencement, alors tenez-en compte. Et puisque les photos et images de Blog peuvent et doivent être optimisées pour le référencement, il se pourrait que dans les semaines qui viennent, parmi les futurs billets, se glisse un nouvel article à ce sujet : Comment optimiser ses photos et images de Blog pour le SEO/Référencement.

Belles photos :) Et bon Blogging !

Grisélidis

Article Précédent Article Suivant

Pourrait également vous intéresser

12 Commentaires

  • Répondre Letizia 15 juin 2015 at 10:23

    Quelle taille conseillerais-tu pour des photos de blog? Je compresse avec Iphoto sur Mac et parfois Photoshop mais je l’ai uniquement au travail… J’arrive à des photos de 160ko et parfois moins, ça dépend toujours des couleurs… Je me réjouis de lire ton article sur le référencement et les images pour savoir si je ne fais pas tout faux.

    • Répondre GG 16 juin 2015 at 09:49

      Hello :) je dirai qu’il faut faire le plus light possible tout en faisant en sorte de garder un bonne qualité de photo/image (en JPG surtout, si tu compresses). J’ai profité de ton commentaire pour faire une suite à cet article, et te répondre + en détails. Merci pour ce commentaire très pertinent posant une question que j’aurais du aborder ^^ Belle journée :)

  • Répondre bernieshoot 15 juin 2015 at 11:20

    C’est un article à encadrer à lire et relire ! l’exemple que tu donnes est très parlant. Un autre avantage de réduire la taille est de dimininuer le risque de copie …

    • Répondre GG 16 juin 2015 at 09:51

      merci à toi :) Yes la réduction est franchement utile à tout point de vue. D’ailleurs perso, je vais lancer une grande campagne d’optimisation sur ce blog : après une année de blogging, y’a du boulot ^^

  • Répondre Bulle 15 juin 2015 at 11:27

    Génial cet article, pile ce qu’il me fallait. J’avais justement des problèmes de chargement à cause de mes images trop lourdes.

  • Répondre Euphrosyne 16 juin 2015 at 09:00

    Merci pour ce billet !!! J’ai compris plein de choses et je me suis attaquée au dimensionnement de mes images… Seulement, mon blog est hébergé sur wordpress.com et je me rends compte que même si je peux réduire facilement la taille des images pour que le chargement des articles soit plus rapide, je ne libère pas d’espace puisque, manifestement, WP conserve la copie de l’image originale :( Cela signifie-t-il que je vais devoir remplacer toutes les images une par une ???

    • Répondre GG 16 juin 2015 at 09:52

      Un article arrive très vite pour te répondre ^^ Je vais me pencher sur chaque plateforme de Blog pour la gestion des images/médias :) en attendant, je vais tester mais je pense pouvoir répondre rapidement car les images sur wp.com se gèrent sensiblement de la même façon que sur wp.org (avec moins de souplesse car pas d’extension et moins de place)

  • Répondre Euphrosyne 21 juin 2015 at 09:33

    Wouhaou ! un article exprès pour moi ;) j’ai hâte !!! Merci en tout cas, j’ai déjà appris plein de trucs avec le #2.

  • Répondre Elodie 11 novembre 2015 at 08:41

    Bonjour ! J’arrive un peu tard mais j’espère que j’aurai tout de même une réponse ;) J »essaie de réduire mes photos pour mon blog WordPress mais je ne sais jamais vraiment quoi/comment modifier. Je réduis mes photos avec Microsoft photo Standart Edition qui me propose de modifier la taille (largeur, hauteur), les dimensions en pixels (?) et la résolution (75-96-150-300…) Souvent je met 20cm en taille et 96 en résolution, sans savoir si c’est bien, si ça va correctement s’afficher sur tous les écrans… Pouvez vous m’expliquer un peu ?

  • Répondre Hébergement web 27 février 2016 at 02:01

    Très intéressant comme article, il est clair, et souvent peu ou pas pris en compte, que le poids des différents éléménts d’une page web, et tout particulièrement des images, a un impact non négligeable sur les performances d’affichage d’un site web.

  • Répondre Milie 26 septembre 2016 at 20:23

    Hello !
    J’essaie d’accélérer un peu mon blog qui est super lent. J’ai beaucoup d’images et photos. Je les optimise un max mais elles restent lourdes et la qualité se dégrade vite.
    WP smuch ne les dégrade pas trop ? C’est réversible ?
    Merci

  • Répondre Giacometti Brin d'Os 29 avril 2017 at 16:54

    Moi, j’ai un problème avec une photo sur wordpress
    Je fais d’abord « Modifier l’image ». Ensuite je règle les dimensions et je fais « Appliquer à toutes les dimensions »
    J’enregistre ensuite.
    Le problème c’est quand je la mets en en Image à la une, je m’aperçois que les dimensions n’ont pas changé.
    Ce n’est donc pas suffisant ?
    C’est la 1ere fois sue j’ai ce problème
    Au passage, je te remercie pour « tout » :))

  • Laisser un Commentaire

    %d blogueurs aiment cette page :