bien préparer et mettre ses images ou photos en ligne sur le net pour une belle page web
L'on rencontre trop souvent ce genre de questions sur le net ou dans les forums :
- mon image ne s'affiche pas
- ma page met trop de temps à s'afficher
- je ne trouve pas mes images dans google images ...
Il faut savoir que plusieurs règles doivent être quand même respectées pour que la mise en ligne et l'affichage des images soit correctement réalisés sur le Net.
1 - La préparation
J'ai une photo que l'on m'a envoyée, qui fait 1151px X 813px (en 24bits RGB) à 100dpi en taille, 638 892 Ko en poids et se nomme : " l'Océan Indien.jpg ".
Déjà là, 3 gros problèmes : le nom, le taille, le poids.
- 1a : toute image mise dans une page web doit suivre les règles suivantes:
- aucun caractère accentué ou ' exotique '
- les majuscules sont à éviter
- pas d'espace entre les mots qui composent le nom du fichier s'il y en a plusieurs; utiliser alors " - " ou " _ ".
Dans le cas de celle-ci nous allons donc la renommer " ocean-indien.jpg "
- 1b : pour la mettre dans cette page, je suis limité à une certaine largeur, qui donc m'impose de changer pour adapter l'image à la bonne taille, nul besoin de la mettre plus grande pour demander, via un codage quelconque de l'afficher en plus petit, cela ne ferait qu'alourdir la page et augmenter son temps de chargement.
Je vais donc la réduire au format : 580px X 410px, ce qui va déjà me donner un poids bien différent : 250 588 Ko, soit déjà plus de la moitié du poids d'origine.
- 1c : au départ l'image est également en 100dpi, ce qui ne sert quasiment à rien, surtout encore plus si elle était de 200 ou 300 comme celles de certains appareils photos numériques. L'affichage ' correct ' sur le net, avec les nouvelles qualité d'écran peut varier de 72 à 96dpi, je vais donc la passer en 96 pour obtenir un poids de : 164 835 Ko ( en 72 dpi : 72 505 Ko), donc déjà bien allégé encore sans aucune perte visuelle dans la page ce qui est vraiment important.
- 1d : à savoir également que le poids d'une image varie aussi avec le nombre et les combinaisons de couleurs qui la composent. Deux images de la même taille ne pourront dons quasiment jamais avoir le même poids exactement ...
- 1e : le poids d'une image peut varier également du simple au double, voire triple, selon l'extension employée : jpg, png, gif, bmp, tif ... etc (chacun ayant ses particularités propres au niveau des propriétés)
La voici :
photo de l'océan indien
Pour faire tout cela il vous suffit de n'importe quel petit logiciel de retouche d'image, même le bon vieux "paint" de windows le fait ... ou de celui dont vous avez le plus l'habitude, même également s'il est bien plus sophistiqué ;)
2 - La mise en ligne
- 2a : ajouter une légende sous l'image ne peut pas faire de mal, bien au contraire ...
- 2b : ne pas oublier la fameuse balise " alt " qui est prise en compte par le moteurs, ici, pour ceux qui savent regarder le code source (firebug, afficher la source, CTRL + U ... etc ... ) vous pourrez voir ceci :
<img src="http://longuetraine.fr/data/medias/jpg/ocean-indien.jpg" alt="photo de l'océan indien" />
Elle est à ajouter manuellement ou automatiquement selon le logiciel ou selon le script dont vous vous servez.
Mais si elle contient, comme ici, un peu plus de mots que le nombre de ceux du fichier, il ne faut cependant pas en profiter (en croyant, mal, penser aux moteurs) pour la 'bourrer' de soit-disants "mots-clés', chose qui finira par avoir au contraire un effet négatif ...
- 2c : la mise en ligne proprement dite.
Si vous travailler en 'local', rien de tel que de vérifier avec un aperçu dans les différents navigateurs, sinon vous pouvez alors, soit enregistrer et publier votre page, si vous travaillez avec un script, CMS, en ligne, soit envoyer par FTP votre page ET votre image au bon endroit dans votre site pour vérifier et visualiser ainsi votre travail.
3 - Les problèmes
- 3a : l'image ne s'affiche pas, elle est remplacée, le plus souvent, par une 'croix rouge' : soit elle est absente en ligne, soit le codage du lien qui mène vers elle pour faire son affichage est mauvais, soit également une erreur pendant le transfert par FTP.
- 3b : l'image ne s'affiche que partiellement : votre fichier image a des problèmes, comme son nom (voir plus haut) ou autre, mais qui donc est mauvais en ligne, le plus souvent c'est le signe d'un fichier qui a été mal 'uploadé' et le simple fait de le renvoyer va le plus souvent résoudre tout cela si vous êtes sûr qu'il s'agit d'un fichier correct.
- 2c : la page est encore trop longue à se charger !
Si vous avez bien suivi toutes les recommandations données ci-dessus, celà vient obligatoirement d'un autre problème dans le codage de la page ... suivez le chemin absolu pour vérifier l'affichage réel de l'image, ce qui ne devrait pas poser de problèmes pour vous en assurer, revérifier le codage pour son affichage dans la page et si tout est bon : cela vient du reste de la page ! (mauvais codes,erreurs de langage,appel de fichiers incompatibles, etc etc ...)
Une petite dernière, pour à la fois terminer cet article et commencer ses premiers pas dans le monde de l'image ...
Buzz Aldrin, les premiers pas sur la lune ( photo )
;)La preuve par neuf, ou les résultats et explications de quelques petits tests :
référencement sur Google Images,optimisation,conseils et tests