camera-spring-sun-optimization-yesweblog
Blogging, Photos, Ressources

#2 – Optimiser ses images de blog : Poids et Format

Si le dernier article indiquait comment optimiser ses photos et images de blog en les réduisant, il existe encore d’autres petites choses possibles, qui permettront également de les rendre plus légères. On peut en effet jouer avec les différents formats d’images mais aussi avec la compression de certains. Et avant de rentrer dans le vif du sujet, j’en profite pour répondre à la question de Laetizia de PrenezPlace.org postée en commentaire sur l’article Optimiser ses images de blogs : Réduire la taille de l’image.

ywb-underwater

Quel est le poids idéal pour une image ou photo ?

Réponse toute relative : Plus l’image sera light/légère et mieux ce sera pour la page web puisqu’elle aura plus de chances de se charger et s’afficher rapidement. C’est un peu une réponse de normand hein ^^, je vous l’accorde. En fait, il est couramment préconisé d’avoir des images ou photos faisant moins de 20 à 30 ko et d’utiliser rarement des images allant jusqu’à 100 ko. La réalité est souvent différente avec des photos/images plus proches des 35 à 70 ko, ou parfois 120 ko et plus. La vérité quant à elle, c’est qu’on ne pense pas toujours à cette étape de réduction de taille, que le temps manque etc…

Je dirai donc qu’il faut prendre en compte cette préconisation, tout en observant la configuration de son article ou page concernée : Utilisera-t-on une ou plusieurs photos pour son article ? Quel sera le format de l’image ? En gros, si vous voulez afficher 3 images pour votre billet de blog, effectivement, il sera opportun d’envisager de réduire le poids des photos si elles sont toutes lourdes. En revanche, si vous voulez utiliser une seule et unique magnifique photo, autant la compresser un peu, sans abuser non plus, histoire qu’elle ne perde pas trop en qualité. Sinon, plus aucun intérêt de la mettre en ligne.
Il faut trouver le bon rapport poids/qualité de l’image, selon le nombre d’images à afficher. Il faut faire un compromis, notamment en testant. Et pour tester, rien de tel que le mode aperçu :

canon-camera-compression

Taille de départ de la photo avant tout compression : 161,07 Ko
– Après un passage de format standard à progressif : 127,83 Ko
– Après une compression à 75 : On passe à 40,84 Ko :)
– En ôtant les Infos EXIF/IPTC : 28,86 Ko !
– Après une autre compression à 55, on passe à 19,91 Ko ;)

Il ne faut donc pas hésiter à tester et voir ce qui est possible, en observant bien la qualité de l’image et en jugeant soi-même de la compression maximale à appliquer pour conserver une belle photo. Parce que bon, une photo hyper légère mais moche et floue, ça va pas attirer ou retenir le chaland ^^

Autre détail à prendre en compte : La largeur de votre espace d’article de Blog :
Il faut aussi composer en fonction de votre design de blog. En moyenne, la largeur de l’espace dédié à un article sur un blog serait de 600 pixels. Alors à moins d’utiliser un affichage d’article en mode « Pleine Page« , autant ne pas importer des images faisant 1000 pixels ou plus encore puisque l’image sera redimensionnée et affichée en fonction de la largeur du corps d’article.

Vous l’aurez compris, la taille/poids compte. Mais le format joue lui aussi.

canon

Quel format d’images ou photos privilégier sur un blog

Vive le Jipégé :) ! Euh, le Jpg

Il existe tellement de formats et d’extensions pour les fichiers images, qu’il y a de quoi en perdre son latin… Jpg, Png, Gif, Tiff… Mais s’il est une chose à retenir s’agissant d’optimisation d’images pour le web, c’est le format JPG. C’est aujourd’hui celui qui demeure le plus léger et le plus facile à afficher pour la plupart des navigateurs (notamment les vieilles versions d’Internet Explorer qui sentent fort la naphtaline). C’est pour cette raison que c’est le format le plus courant sur le web et sur les Blogs.

Le Fichier ‘Jipègue’ ou encore ‘Jipégé’, bref le .jpg (Joint Photographic Expert Group), on le reconnaît par son extension, qui est .jpg ou .jpeg ou encore .JPG ou .JPEG.

Si ce format est si plébiscité et conseillé, c’est parce qu’il permet notamment de réduire le poids des photos via une compression de celles-ci.
La compression des images .jpg est très souple puisqu’on peut compresser presque complètement une photo : La compression pouvant aller de 0 à 99%, selon les logiciels ou sites web qui la proposent. (PhotoFiltre par exemple propose la compression de 10 à 100). D’après mes différents tests, compresser jusqu’à 60 conviendra, en dessous, j’ai constaté une altération des photos qui devenait trop visible.

Le format Jpg est très recommandé, mais il comporte aussi quelques limites : A savoir par exemple qu’il ne supporte pas/ne permet pas/ne gère pas l’effet de transparence.
Ainsi, beaucoup optent pour des logos, bannières et autres éléments de design comme les icônes, pour cet autre très connu format d’image qu’est le PNG.

Sans transition, passons au PNG :)

logo-format-shrek

PNG, avec transparence, mais sans animation

Le format .png (Portable Network Graphics) autorise la transparence, chose très pratique pour faire joujou au niveau visuel. Une image avec un fond transparent comme un petit personnage de cartoon, pourra venir s’afficher sur un fond coloré sans souci d’affichage (si le détourage est bien fait ^^ ou si le trait est précis ^^). Et au niveau du poids ?
On pourra aussi compresser du Png. D’ailleurs, sa compression sera moins ‘violente’ que celle qui est possible pour le Jpeg. On a environ 9 degrés de compression pour le fichier Png.

Le Png permet ouvre donc plus de possibilités graphiques et visuelles pour les images tandis qu’on préférera le Jpeg pour de la photo pure et dure. En revanche, si vous avez une belle image au format PNG sans aucun effet de transparence, convertissez la au format Jpeg, car le PNG est plus lourd que le JPEG ;)

Gif Me some More !

Le Gif lui aussi est beaucoup plus lourd que le Jpg, tout comme le format Png. Facile à comprendre quand on sait que le GIF (Graphic Interchange Format) est un cumul de plusieurs images qui s’affichent en boucle. Vous pouvez d’ailleurs jeter un oeil à ce billet si vous voulez découvrir comment fabriquer votre Gif facilement.

Ce qu’il faut retenir du GIF ? Il est sympa et amusant. Il ajoute du dynamisme à un article, mais il est aussi plus lourd et parfois petit car laid le cas échéant. Le format n’autorise en effet que 256 couleurs et ne gère pas les dégradés de couleurs… Mais bon il gère l’animation et en général, c’est tout ce qu’on lui demande :D

Bref le Gif, c’est chouette, mais il ne vaut mieux pas en abuser, même si la compression est possible et ne détériore pas trop les images.

simpson-panique

Conclusion

Si la taille du cliché importe, le format importe beaucoup lui aussi, ayant un rôle une le nombre de couleurs pouvant être affichées, sur l’éventuelle utilisation d’une transparence ou encore sur une éventuelle animation et par extension, sur le poids du fichier.

L’optimisation des images de Blogs (ou site web) est une histoire d’équilibre à trouver et à appliquer en fonction :

– Du nombre d’images affichées pour l’article ou page.
– De la mise en page choisie : Pleine page ? Page classique d’article de blog à environ 600 pixels ?
– Du format du ou des images affichées sur la page : Jpg ? Png ? Gif ?

Et pour finir, ‘idéalement’, il vaut mieux privilégier le format .Jpg, qui reste le plus adapté pour les photos, qui propose la compression la plus large (même si elle dégrade la qualité de photo si trop poussée).


Voilà ! Bravo si vous avez suivi jusqu’au bout :D !

Un autre billet arrivera très vite sur les déclinaisons de la gestion des médias (et donc les images ^^), sur les différentes plateformes de Blog :) Cette idée d’article fait suite au commentaire de Euphrosyne suite à l’article d’hier :) Plutôt que de répondre en quelques mots, je préfère bien détailler la gestion des images sur WP.com =) Si vous voulez allez plus loin quant à l’optimisation des photos et images, le billet sur le référencement des images et leur optimisation SEO vous attend :)

Belle journée à tous !

Grisélidis




Article Précédent Article Suivant

Pourrait également vous intéresser

6 Commentaires

  • Répondre Letizia 16 juin 2015 at 10:07

    Merci beaucoup pour tous cet article si détaillé. Je redimensionne normalement mes images à 1000 px (je ne sais pas pourquoi, peut-être dans l’optique d’une modification de mon thème…) mais mon blog ne prend que du 665 px dans l’article et 705 pour l’image de Une. Il faudra que je revoie mes images pour qu’elles soient moins lourdes. Je me réjouis d’en savoir plus sur le référencement des images.

  • Répondre Escapades amoureuses 16 juin 2015 at 22:46

    bon et bien je sais maintenant que mes photos sont carrément trop lourdes !! :)

  • Répondre Aline - Inspiré et Créé 19 juin 2015 at 17:29

    Je redimensionne toujours mes photos à 600px, le format idéal adapté à mon blog.
    Je rajoute aussi ce que j’avais lu sur un autre article et que j’applique maintenant depuis des années: j’enregistre au format jpg oui mais en choisissant le mode « enregistrer pour le web » pour une compression de 80%. ;)

  • Répondre I Taste Eat 11 décembre 2016 at 22:23

    Si je comprends bien il faut être en dessous de 100ko ? Moi en compressant j’arrive dans les 115-130 est ce grave docteur ? :-)

  • Répondre Nina 26 février 2017 at 16:56

    Merci pour cet article! Je voulais savoir avec quel logiciel ou site tu arrives à compresser en ayant un aperçu?

  • Répondre GG 26 février 2017 at 17:07

    Bonjour Nina, j’en utilise plusieurs mais Photofiltre 7 (gratuit par ailleurs) permet d’avoir le fameux aperçu et de ne pas valider la compression ou la réduire si compression trop hardcore pour la qualité de l’image ou photo

  • Laisser un Commentaire

    %d blogueurs aiment cette page :