Comment optimiser l'affichage des images dans Blogger-Blogspot

J'avais publié il y a quelques semaines un article pour Optimiser les images Blogger pour le référencement voici un autre tuto pour optimiser l'affichage des images: taille, format, emplacement ....
Image Blogger
Avant de commencer, je vous invite à jeter un coup d'œil sur mon article sur la nouveauté Blogger Draft qui permet de gérer les images que vous avez déjà publié dans un de vos Blogs.

Explication du code d'une image

Lorsqu'on ajoute une image dans un article, voici le code générer par Blogger (il faut cliquer sur Modifier le code HTML pour voir le code de l'image):
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_xDpoN6UfFFY/S6iklwcCs5I/AAAAAAAAB34/hmDGeMi0UUc/s1600-h/Otimiser-image-Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_xDpoN6UfFFY/S6iklwcCs5I/AAAAAAAAB34/hmDGeMi0UUc/s320/Otimiser-image-Blogger.png" /></a></div>
 - Tout le code est compris entre une DIV pour séparer l'image du texte de l'article.
 - Blogger ajoute automatiquement une balise Lien à l'image, c'est à dire que l'image est cliquable.
 - Si l'image est de grande Taille, Blogger peut afficher jusqu'à 20% de la taille réelle de l'image: s320
 - Lorsqu'on clique sur l'image on peut la voir dans les dimensions réelles : s1600-h
 - Blogger ajoute automatiquement de la marge à l'image, un peu d'espace à gauche et à droite (si l'image est centrée): style="margin-left: 1em; margin-right: 1em;"

Des marges ajoutées automatiquement par Blogger

Je sais que ma colonne des messages fait 600px et avant d'ajouter des images dans mes articles je les redimensionne à 600px.
Quand je les ajoute dans mon article, Blogger ajoute automatiquement une marge à gauche et à droite ce qui fait qu'on ne voit pas la totalité de l'image:
Donc pour enlevez ces marges, il faut cliquer sur Modifier le code HTML et supprimer le code style="margin-left: 1em; margin-right: 1em;" dans le code de l'image.

Maintenant notre image s'affichera entièrement (sans marges) :

Blogger Ajoute automatiquement un lien aux images

Comme je l'ai dit plus haut Blogger affiche une petit image et lorsqu'on clique sur cette image, on peut la voir  dans les dimensions d'origine (et on quitte le blog).

Vous voulez que vos images ne soient pas cliquables ?

J'ai trouvé une astuce: Après avoir ajouté l'image dans l'article, je double clique sur l'image puis je clique sur le bouton Associer et automatiquement le code de l'image devient comme ceci:
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://4.bp.blogspot.com/_xDpoN6UfFFY/S6iklwcCs5I/AAAAAAAAB34/hmDGeMi0UUc/s320/Otimiser-image-Blogger.png" /></div>
Vous pouvez remarquer que la balise Lien a disparu (toute la balise a été supprimé y compris style="margin-left: 1em; margin-right: 1em;") donc pas besoin de faire la première astuce ....

Je veux ajouté un lien à mon image ?

Il suffit de re-"double cliquer" sur l'image puis de cliquer sur le bouton Associer et d'ajouter l'adresse où vous voulez pointez l'image.
En allant dans "Modifier le code HTML, vous remarquerez que le code de l'image a encore changé et maintenant on a :
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.leblogger.com/"&gt;<img border="0" src="http://4.bp.blogspot.com/_xDpoN6UfFFY/S6iklwcCs5I/AAAAAAAAB34/hmDGeMi0UUc/s320/Otimiser-image-Blogger.png" /></a></div>
Vous remarquez que Blogger a ajouté une balise Lien mais sans les marges.

Les dimensions de l'image

Comme je l'ai dit plus haut, Blogger peut réduire la taille de l'image jusqu'à 20% et lorsqu'on clique sur cette image on peut la voir avec les dimensions réelles, 100%.

Maintenant je veux afficher l'image à 100% de ses dimensions directement dans mon article.
Pour cela il faut cliquer sur Modifier le code HTML, et manuellement remplacer s320 par s1600.
Même si l'image fait 1000px, elle s'affichera avec la taille de 1000px dans votre article.

L'image est trop grande comment la redimensionner?

En cliquant sur l'image vous pouvez redéfinir la taille de l'image :
Mais la meilleur méthode pour redimensionner l'image est de l'afficher à 100% et de définir une largeur fixe (width="xxx"), voici un exemple avec les deux méthodes :

Vous remarquez que les deux images ont les même dimensions mais la deuxième est plus nette, voici son code :
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_xDpoN6UfFFY/S7Wsz1u0gRI/AAAAAAAAB-M/XHT1KgSvdbU/s1600/LeBlogger.png" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="http://3.bp.blogspot.com/_xDpoN6UfFFY/S7Wsz1u0gRI/AAAAAAAAB-M/XHT1KgSvdbU/s1600/LeBlogger.png" width="600" /></a></div>
La différence entre les deux images c'est que Blogger a remplacé le s320 dans le code de la première image par s640 alors que moi pour la deuxième image je l'ai remplacé par s1600.

La différence entre s320, s640, s1600

à part le faite que ces valeurs déterminent la hauteur et la largeur de l'image, elles déterminent aussi son poids, voici par exemple les dimensions et le poids de la même image avec les différentes valeurs:
  • s200 = 200x125px = 28Kb
  • s320 = 320x200px = 77Kb
  • s400 = 400x250px = 100Kb 
  • s640 = 640x400px = 212Kb
  • s1600 = 1264x795px = 236Kb = 100%
Comme vous pouvez le remarquez il n'y a presque aucun différence de poids entre s640 et s1600.

Astuce

Toujours définir la largeur (width="xxx") de l'image et laisser le navigateur se charger de calculer la hauteur (height="xxx").
De cette façon vos images seront proportionnelles et ne perdront pas en qualité.

Voilà c'est fini, j'espère que cet article va vous aider à mieux gérer les images dans votre Blogspot.
Si vous avez des questions ou des remarques n'hésitez pas à laisser un p'tit commentaire ...
Libellés : , Publié le vendredi, avril 02, 2010
25 Commentaires

  1. merci sofiane utile et informatif comme d'habitude

    RépondreSupprimer

  3. Un excellent tuto qui va me servir enorment. encore bravo pour ton blog et merci de partager tes connaissances! Anne

    RépondreSupprimer

  4. Bonsoir Soufiane,
    Me voilà avec un gros problème. j'avais installée dans le code HTML des photos de tous mes message target="_blank" ; les photos s'ouvraient dans une fenêtre distincte et ainsi le visteur ne partait pas du blog. Je viens de me rendre compte que blogger a occulté cette fonction.Et maintenant lorsqu'on clique sur les photos de mes anciens message le blog disparait. Au dernier message j'ai utilisé clic 2 x et associer comme tu l'as expliqué ci-dessus. Mais la photo ne s'agrandit donc plus.
    Est-ce qu'il y aurait une solution carrément dans le code HTML du Blog pour tous mes anciens messages ?
    d'avance 1000 x merci si tu peux m'aider ....

    :-*

    RépondreSupprimer

  5. En fait je me suis rendue compte que le problème n'existe que en utilisant "Google chrome" que j'ai installé récemment. Safari et Firefoix ne me crée pas ce problème. Tant pis pour les utilisateurs de Google Chrome ...

    :D

    RépondreSupprimer

  7. @Francine
    Pour le truc du double clique, ça sert à enlever le lien de l'image, quelle ne soit plus cliquable !!

    Sinon je ne comprend pas où est le problème ;)

    RépondreSupprimer

  8. Merci Soufiane ; je pense que dans la plupart des cas j'utiliserai l'astuce du double clic sur l'image, sauf dans certains cas spécifiques. Je ne la connaissais pas jusqu'à présent !
    8-(

    RépondreSupprimer

  10. Re-me voilà ! Je veux quand même te donner l'explication de mon problème. Si par hasard tu as quelques secondes hi hi hi
    en cliquant sur mon lien tu rentres dans un message "au jardin in solite noir et blanc" : en rédigeant le message j'ai changé le code HTML des photos en intégrant " target="_blank", ce qui fait que les photos s'ouvraient (avec Safari et Firefox)sur une autre page. Avec Google Chrome en cliquant sur la photo le blog disparait. Il ne reste plus que la photo sans moyen de revenir en arrière (flèche ...)Lorsque j'enlève Target Blank dans ledit code HTML il n'y a plus de problème.
    Mais j'ai plus de 2000 messages ... hi hi h i
    Alors à bas Google chrome ... Pour visualiser le problème il faut bien sûr que tu utilises Google chrome
    :-*

    BON WE

    RépondreSupprimer

  12. salut soufiane n vraiment cet article et très intéressant j'attends toujours tes nouvelles
    http://production-couches-bebe.blogspot.com

    RépondreSupprimer

  13. @Francine
    Dans chrome et dans cette page http://herreinfranc.blogspot.com/2009/11/au-jardin-insolite-noir-et-blanc.html les images s'ouvrent dans une nouvelle fenêtre ;)

    RépondreSupprimer

  14. Salut,
    J'ai une petite question en rapport avec ta dernière astuce concernant le redimensionnement des images en fixant la largeur. Si je change la largeur d'une image, je suis obligé de changé également la hauteur:
    Exemple: j'ai une photo de 800 en largeur et 1000 en hauteur, je veux mettre 600 en largeur, je suis obligé de mettre 750 en hauteur autrement il va garder les 1000 d'origine. Comment le faire automatiquement pour la hauteur.
    Merci

    RépondreSupprimer

  15. @Frol
    Non: Toujours définir la largeur (width="xxx") de l'image et laisser le navigateur se charger de calculer la hauteur (height="xxx")....

    RépondreSupprimer

  16. Donc si je comprends bien, il suffit de mettre 600 pour la largeur et xxx pour la hauteur.
    Merci à toi et bonne journée.

    RépondreSupprimer

  17. @Frol
    Non il ne faut mettre que width="Un nombre", l'autre tu ne le mets pas :))

    RépondreSupprimer

  18. Ok merci, je suis un peu lent à la détente. :z

    RépondreSupprimer

  19. Merci beaucoup, beaucoup, beaucoup. C'est très clair et utile, j'ai encore appris/compris quelques trucs, et fait un peu plus ce que je voulais de ma page.

    RépondreSupprimer

  21. Bonjour Soufiane, J'ai un souci avec les photos de mon blog : changerdinterieur.com
    Elles se chargent très lentement. Je les ai mises en png car j'utilise la transparence, mais il a-t-il une dimension, une résolution, ou un poids de photo à ne pas dépasser ? Merci

    RépondreSupprimer

  22. Sofiane,

    peut-être ai-je mal lu tes infos,
    mais expliques tu comment éloigner une photo du texte : mettre une marge plus grande entre le texte et l'image...
    sinon je trouve toujours des supers conseils sur ton blog MERCI
    Justine

    RépondreSupprimer

  23. bonjour

    j'appliquais toujours vos conseils et ça marchait jusqu'à il y a quelques temps. Désormais, malgré le fait que je n'indique que le width et que je mette la résolution à 1600, mes images restent floues, donc inexploitables. J'ai souvent besoin de mettre de grandes infographies, donc c'est très gênant. j'ai tout essayé, rien à faire. Je ne comprends pas.
    par exemple voici le code que j'ai modifié et qui reste flou à l'affichage (là j'ai enlevé les div et le tout début car ce n'est pas autorisé dans ce message):


    mon image originale est de 550 de large et 4631 de haut (c'est une infographie donc c'est pour ça que c'est très haut).le poids n'est que de 610 k, donc pas au delà de ce qui est autorisé. Et je le répète mais auparavant j'arrivais à afficher des infographies de cette taille... ce n'était pas forcément hyper hyper net, mais ça allait.
    si vous avez une idée pour que je m'en sorte, ca serait bien...

    merci

    RépondreSupprimer

  24. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer

  25. le message n'a pas accepté le code html de mon image donc vous n'avez rien dans mon message précédent à l'arrivée. Merci blogspot ! désolée. si vous pouvez quand même me répondre...
    j'indique donc comme width : 400 et je mets s1600 à la place s320 et c'est toujours flou

    RépondreSupprimer

Copyright 2012 LeBlogger.com