Optimiser ses images

OSEF mais.. c'est le 500ème message de sos-internautes

Bonjour et bienvenue dans ce nouveau petit dossier qui aura pour but de vous aider à optimiser vos images pour votre site internet/forum/blog etc...

En effet, les internautes à faible débit de connexion vous serons on ne peut plus reconnaissants si vous pensez à eux en ne mettant que peu d'images et surtout en les optimisants. Par optimiser qu'est ce que j'entend exactement ?

1. Choisir le bon format pour ses images (png, jpeg ou gif ?)
   
2. optimisation des images png
   
3. optimisation des images jpeg
   
4. optimisation des captures d'écran (inspiré du site web lehollandaisvolant.net)
   
5. gestion efficace des balises HTML
   
6. nommer ses images
   
7. Conseils supplémentaires
   
8. balises HTML supplémentaires.
   

Commençons donc tous de suite, chaque point sera dans un post différent, à la suite, afin de faciliter la lecture. S'il n'existe pas encore inutile de le chercher je ne l'ai pas encore posté.

/!\ pour les compressions de bases, j'utilise le logiciel Gimp v2.6. Procurez vous ce logiciel ou un équivalent pour réaliser certaines parties du tutoriel/!\
Les utilisateurs de Linux peuvent également se servir de pngnq et optipng. Rendez vous sur le site sus-nommé pour un tutoriel spécialisé.

---

Si vous avez un site/forum/blog et que vous postez des images pour n'importe quelle raison, vous avez surement déjà remarqué qu'il existe énormément d'extension, de type de fichier, différent. Les 3 extensions principales que l'on retrouve sur le net sont les extensions .jpeg .png et .gif. Quelle extension choisir alors, n'importe laquelle ? Surtout pas, elles ont chacune une spécificité à connaitre.

Le format jpeg
Pour plus d'information, consultez cette page.

N'utilisez le format .jpeg uniquement pour les photos. Vous pouvez faire le test en changeant l'extension des images que vous avez, mais le jpeg est clairement "fait" pour les photos. A l'inverse, les dessins, captures d'écran, animation etc ne sont pas pour ce format.

Le format gif

Autrefois un format payant (!) le format .gif n'a, aujourd'hui plus qu'une seule utilisation majeure : les animation ou gif animés. En effet, le format gratuit png, créé pour remplacer le format payant gif, ne gère pas l'animation, tous comme le jpeg. Pour les animations donc c'est le gif qu'il vous faut.

Le format gif peut aussi être utilisés pour d'autres types d'image ou pour une réduction facile du nombre de couleur pour ceux ne connaissant pas des méthodes plus pointues, en effet le gif ne gère que 256 couleurs.

Le format png

Le format png est certainement le plus utilisé ou le plus À utiliser. En effet, des images en png sont en général d'excellente qualités, plus facilement modifiables, gèrent très bien la transparence et sont idéales pour les screens, les images et les dessins scannés par exemple. A utiliser à la place du jpeg en général sauf dans certains cas.

Pour les internautes avec un faible débit internet, un site/forum/blog qui les intéresse beaucoup mais qui est bourré d'images, de gif animé ou autres non compressées de n'importe quel format c'est la galère. Les pages prennent largement plus de temps pour s'afficher, le chargement de la page est donc beaucoup plus long.
Si vous avez vous même une limite de taille donné par votre hébergeur, vous serez heureux de diminuer également le poids des images.

Pour le png, personnellement donc j'utilise le logiciel The Gimp dans sa version 2.6. Voyons comment compresser et diminuer grandement la taille d'une image et quasiment sans en modifier le rendu final. Tout d'abord, voici un exemple avec la banière du rendu avant-après.


Image taille normale.

Image posterisée et indexée.-70% de la taille !

D'accord, l'image n'est pas des plus dur à compresser, mais le gain de place est énorme, et ce quelle que soit votre image.

Commençons donc, ouvrez votre image au format png.
Allez dans couleur >> postériser


Voilà la fenêtre qui va s'ouvrir :


Cochez la case "aperçu" et réglez ensuite la taux de postérisation de manière à ne pas trop dégrader la qualité de l'image. Evidemment, plus le taux de postérisation est bas (sur la bannière d'exemple il était de 40) moins le fichier sera lourd.
Validez, nous allons passer (et oui déjà) à la dernière étape.

Faites image >> mode >> couleur indexée.


Dans la nouvelle fenêtre, choisissez 256 couleurs.

Note, moins il y a de couleur (le minimum est l'option "1-bit") moins l'image est lourde, mais la qualité devient médiocre, 256 est le meilleur rendement.

Qu'avons nous fait à cette étape, ou plutôt qu'avez vous fait ? Avant, votre image était en mode "RVB", ce qui signifie qu'elle était en millions de couleur, puisqu'en format png. Nous avons limité le nombre de couleur à 256, nous avons donc réduit la taille de l'image. Et vous n'avez certainement même pas remarqué le changement, en effet les millions de couleur du format png ne sont absolument pas obligatoire et vous le voyez.

Il ne reste plus qu'à enregistrer votre image, et vous avez désormais une image png beaucoup moins lourde qu'avant, vos internautes vous remercient

L'optimisation d'images jpeg suit la même procédure que celle pour les images png à une différence prêt : l'indexation en 256 est impossible mais on peut gérer la qualité plus précisément.

Pour l'exemple je vais me servir du "Qui est en ligne réalisé par notre ami Gohan, qui l'avait enregistré en jpeg ( sur le coup ce n'était pas utile, mais avec ce tuto je vais rattraper cette erreur, ne m'en veux pas gohan )


Image taille avant réduction

Image taille après réduction -80% du poids de départ !

Ok, j'avoue j'ai un peu forcé sur les options et on voit la différence... mais en se concentrant quand même. Le Qui est en Ligne n'est pas une image sur laquelle vous restez le nez dessus à l'admirer, donc on peut se permettre d'y aller un peu à la méthode bourrin.

Premièrement, postérisez l'image comme décrit ci-dessus, dans le tutoriel pour les images png.

Ensuite, c'est le moment d'enregistrer votre image, c'est là qu'il va y avoir le plus de travail.

Cochez la case "Afficher l'aperçu dans la fenêtre image" afin de voir directement l'incidence de vos actions sur l'image finale. Cliquez aussi sur le "+" à côté "d'option avancées".
A vous de régler la qualité d'abord avec la barre du haut. Juste en dessous s'affiche en temps réel le poids de votre image une fois enregistrée, ici elle ne pèse quasiment plus rien. Dans les options avancées, cochez "optimisée" et "progressif" et réglez un peu l'adoucissement avec la barre de droite mais sans en abuser !

Enregistrez et voilà, votre jpeg est prêt, plus de la moitié du poids initial disparait en fumée avec cette technique qui ne modifie que très peu l'aperçu finale de l'image, alors pourquoi s'en priver ? Pensez aux internautes à faible débit ou à votre hébergeur

Sur des site/forum d'assistances avec des tutoriels, comme celui-ci , on doit très souvent avoir recours à des screenshot de son système (fenêtre, bureau etc...) pour expliquer et illustrer du texte.
Screenshot=>format png
donc, toutes les améliorations sur le screen en png sont faisables sans aucun problème.

Mais il y a une manière plus simple encore de réaliser un screen de taille beaucoup plus faible : les options d'apparence windows.
En effet, je suis le premier à faire cette erreur d'ailleurs, on n'y pense rarement voir jamais, mais faire un screen de son bureau avec un fond d'écran très fourni, ou un screen d'une fenêtre avec le thème aero de seven par exemple, avec transparence effet et tous le toutim, agrandi énormément la taille du fichier et n'est pas forcément utile.

Pour alléger au maximum vos screen (avec un hébergeur limité ça peut être extrêmement pratique) je peut vous donner plusieurs conseils que voici (je ne vais pas les développer dans ce tutoriel) :

• Désactivez le thème aero sous vista/seven
  
• Ne prenez dans la mesure du possible que l'intérieur des fenêtres si le reste n'est pas obligatoire
  
• Si vous faites un screenshot de votre bureau, mettez un fond d'écran uni ou le moins coloré/détaillé possible
  
• Le texte d'une fenêtre c'est le plus important dans un screen. Faites en sorte qu'il soit lisible, le reste hachez-y à coup d'option de lissage pour gagner de la place
  
• n'hésitez pas à abuser de la postérisation et de l'indexation des png, c'est le texte qui est important encore une fois, pars l'apparence de votre fenêtre ou du chat de votre voisin en fond d'écran
  

Il existe plein d'autres astuces, mais ce sont les principales même si certaines semblent un poil exagérée, elles peuvent vous rendre service dans certains cas.

5.gestion efficace des balises HTML

Cette partie s'adresse principalement à ceux qui tiennent un site web, mais sur un forum comme sos-internautes, ou le HTML est activé, elle est aussi importante.

En effet, sur les forum vous avez certainement l'habitude, moi le premier, d'utiliser les balises BBcode pour afficher une image.

Code:

[img][/img]

Cependant, vous pouvez les afficher, quand c'est possible, avec du code HTML et ça a un grand avantage.
Si vous êtes débutant en HTML, vous afficherez également votre image simplement.

Code:

<img></img>

Et pourtant, afficher une image en HTML nécessite bien plus que ça, car on peut en profiter pour améliorer son référencement grâce aux images. Et oui vous n'y pensez peut être pas, mais les images tirées de google image référencent également vos sites web. Ainsi, simplement mettre les balises de bases ne suffit pas, il faut "enjoliver" un peu.

Evidemment, avec du CSS c'est encore mieux, mais ce n'est pas le but de ce tutoriel donc je ne vais pas en parler, c'est dédié au débutants et niveau moyen principalement. (ou au experts qui cherchent certaines solutions précises )

En HTML donc, un code d'image devrait ressembler à ça au minimum :

Code:

<IMG SRC="url_de_l_image"
   ALT="Texte remplaçant l'image"
   TITLE="Texte à afficher">

¨

Oulaaah.. mais c'est compliqué ça ? Non, c'est facile. En effet, le HTML c'est certainement un des code les moins dur à apprendre, donc je vais vous en parler un peu ici. Décortiquons ce bout de code.

Code:

<img src="url de l'image"

Ce petit bout c'est simple à comprendre, entre les guillemets vous placez l'url de votre image. Pourquoi "img src" et pas tout simplement "img" ? Parce que "img" ne peut pas prendre en compte les autres options, et oui elles sont utiles.

Code:

alt="texte remplaçant l'image"

À quoi ça sert ce truc ? Et bien tout simplement, c'est ça que le moteur de recherche lit afin de référencer vos images, ça a le même poids que le nom de l'image dont je vous parlerai dans la prochaine partie, et plus que la balise "title" dont je vais vous parler dans quelques secondes.

Si l'url est faux ou obsolète, c'est ce texte qui sera pris en compte. Donc, même si l'image ne s'affiche plus les navigateurs la trouvent quand même et référencent encore votre site, utile non ?
Mettez le texte le plus simple et concret possible sans espaces (mettez des "_" à la place).
En effet, "photo_image_screen_photoshop_tutoriel_comment_dessiner_un_mouton_graph_tuto_graphique" aura moins de chance d'être trouvé que "tutoriel_dessiner_mouton_photoshop".
Moins de mots et uniquement des mots important, et oui le mot "et" n'est pas le mot qui vous rapportera le plus de personnes étonnamment.

Code:

title="texte à afficher">

Là c'est un peu moins important, mais tout de même autant ne pas s'en priver. Certaines navigateurs lisent également ce code, d'autres non. Ce texte sera affiché dès qu'un internaute passera la souris dessus, donc ne mettez pas n'importe quoi là aussi.
Certaines images de sos-internautes sont en html et avec un "title", vous les verrez facilement dans les sélections de logiciel en passant la souris dessus.

---

Et voilà, maintenant il existe encore tout un tas de balise html pour vos images (dans une partie suivante de ce dossier) mais celles là sont obligatoire vraiment. Vous améliorez grandement le référencement de vos images avec celles là alors pensez-y.

Enfin me direz vous, enfin une partie très courte dans ce dossier, c'est plutôt un conseil qu'une partie à proprement parler mais si vous considérez le référencement de votre site internet/forum comme très important, et bien c'est une partie à proprement parler.

J'ai déjà parlé des balises alt et title en html qui permettent d'améliorer un peu le référencement, mais quelque chose de très important également c'est le nom de l'image. Ben oui, c'est selon le nom que les internautes vont chercher une image. Alors le soucis, c'est que si vous l'hébergez sur un hébergeur comme pixenli, dont je ne dénigre pas du tout les très bon services, votre image appelée au préalable par un nom totalement humain devient une suite abracadabrante de numéros et des lettres en tout genre sans aucune signification.

La solution ? donner un nom correct avant l'hébergement, puis trouver un hébergeur qui ne modifie PAS, ou très peu, ce nom. Si l'url de votre image comporte son nom, elle sera bien plus accessible.

(ben oui, je vous avais prévenu que c'étais court )

Voici un petit listing final des derniers conseils que je peut vous donner pour l'optimisation de vos images. (avec un petit récapitulatif, c'est cadeau de la maison)

Note : ses conseils sont inspirés du site de sebsauvage dont le lien a été donné précédemment.

1) Les balises HTML
Je vous ai donné la base des balises à mettre.. mais il en existe beaucoup d'autres. Certaines sont pour l'apparence principalement mais d'autres aident à la rapidité d'ouverture des pages web. Ces balises, répertoriée dans le post suivant, sont à utiliser tant que possible à l'exception de certaines déconseillées.

2) Et les autres formats alors ?

png, jpeg, gif et c'est tout Oui je sais, il existe beaucoup de formats différents, mais au final aucun ne fait vraiment mieux que ces trois là pour les besoins courants des internautes. De plus, ces 3 formats sont les plus léger et sont lisible par tous les navigateurs ce qui n'est pas le cas de tous les formats.

3) Hum.. je suis épileptique ou c'est le site ?

Si possible, évitez à tout prix les fond colorés sous les textes. Même si vous avez réussi un super-fond-de-la-mort-qui-tue le mettre sous un texte ne fera que rendre ce dernier moins lisible. Les fond violet, fushia, rose pétant, vert éclatant, rouge pur, jaune ou toutes arabesques ou explosion de couleur sont donc vivement déconseillées, pensez à vos visiteurs qui aimeront mieux lire un texte clair que de devoir se crever les yeux à tenter de déchiffrer.

4) Les navigateurs lisent les images ?

Faites attention à une chose, si vous créez un tutoriel en image (le texte est donc compris sur l'image, tous le tuto est une image quoi) il ne sera PAS réferencé. En effet, le texte sur les images n'est évidement pas lu par les navigateurs, même si un moteur de recherche expérimental par image est en construction, et donc votre explication ne sera pas retrouvée par les internautes, pensez-y.

5) une image en 1680x1050 ? Mais mon écran est deux fois plus petit !

Pensez absolument que, même si vous vous pouvez voir totalement l'image que vous postez parce que vous avez un grand écran, ce n'est pas le cas de tous le monde. Une image non redimensionable et outrageusement grande va faire fuir les internautes possédant un petit écran; ou un petit accès internet. Plus l'image est grande, plus elle est longue à charger.

---

Bon et bien, c'est ici que ce petit dossier d'optimisation d'image prend fin. Je vous rappelle que vous pouvez le téléchargez en format pdf afin de toujours l'avoir sur vous où pour aider un ami. (c'est en cours désolé)
Il vous reste encore les quelques balises HTML à lire si ça vous intéresse, sinon à bientôt

Il existe encore bien des balises HTML pour la gestion des images, voici la liste des principales qui pourront vous aider.

Code:

align="...."

La balise ALIGN vous permet, comme son nom l'indique, d'aligner l'image où vous voulez. Entre les guillemets vous pouvez mettre :
"
bottom (en bas)
center (au centre)
left (à gauche)
middle (au milieu)
top (en haut)
right (à droite)"

Code:

border="...."

Cette balise va mettre une bordure autour de votre image. Entre les guillemets, mettez un nombre entier qui correspondra à la valeur, en pixel, de l'épaisseur de la bordure.

Code:

height="...."

Code:

width="...."

Ces deux valeurs sont, respectivement, la hauteur et la largeur de l'image. Vous pouvez l'exprimer en pourcentage ou en pixel. L'utilité ? Après tous même sans ça le navigateur affiche votre image correctement, et bien c'est tout simplement que si vous lui indiquez exactement la taille, il la connaitra à l'avance et l'image s'affichera plus vite.

Code:

hspace="..."

Code:

vspace="..."

Ces deux valeurs, en pixel, déterminent la taille de l'espace entre l'image et le texte horizontalement et verticalement.