Les images de votre page web

 

Ou sont-elles?
La première question à se poser est : quelles sont les images dont j'ai besoin ? Vous pouvez utiliser des photos, des logos ou autres illustrations acquises grâce à un scanner, des photos prises par une caméra ou un appareil photo numérique, ou encore des images que vous avez glané sur le web auparavant.

(Avertissement : Le respect des droits d'auteur concernant ces images c'est votre affaire, pas la mienne. Et ne venez pas dire que c'est moi qui vous ai poussé à utiliser des documents sans l'autorisation de leurs égoïstes d'auteurs...)

Peu importe le procédé, le but est que, dans un petit dossier de votre disque dur, vous disposiez des images en question.
Elles sont forcément enregistrées dans un certain format.
Il va falloir changer cela. Ah!

 

C'est quoi les formats d'images?
Comme d'habitude, l'histoire de l'informatique a vu naître, dans le domaine du traitement des images,des dizaines de méthodes différentes, toutes basées souvent sur un système d'exploitation ou une marque d'ordinateur en particulier...
Citons quelques formats :

BMP : le format standard chez Windows. Les fichiers sont décrits pixel par pixel. Supporte aujourd'hui les millions de couleurs et la compression.

PICT : le format standard chez Macintosh. Les fichiers sont décrits pixel par pixel, le plus souvent en 256 couleurs. Supporte aujourd'hui les millions de couleurs et la compression.

TIFF : le format standard en édition et imprimerie. L'image peut avoir des millions de couleurs et le taux de compression (LZW) est faible. Ce qui donne des fichiers très gros à stocker et à transporter (faut des cartouches Zip ou Jaz ou autres trucs très chers).

PNG : "Nouveau" format qui permet de zoomer dans l'image lorsqu'elle est affichée sur un page web. Cela est rendu possible toujours grâce à la compression.

 

Kezako la compression?
Et bien l'un des problèmes des images numériques pour leur transmission est souvent leur importante taille de stockage en Kilo-octets, voire en Méga-octets.

Gagner de la place c'est important : pour le stockage ça vous permet de mettre plusieurs images sur la même disquette. Sur internet, le grand gagnant est le visiteur de votre site qui ne poireautera pas 5 minutes en attendant que votre photo de coucher de soleil en Martinique veuille bien s'afficher sur son écran (la ligne téléphonique, rappelons-le est une voie de transmission assez lente mais encore majoritairement utilisée dans le monde).

Donc on a inventé la compression !
C'était si simple qu'il fallait y penser : au lieu de décrire une image pixel par pixel

pixel 1 de la rangée 1 = rouge, pixel 2 de la rangée 1 = orange, etc...
--> Il valait mieux regrouper les infos quand elles se répétaient. Ça donne donc:

pixel 1,3,18 et 23 de la rangée 1 = rouge, etc...

On a donné la même information, mais en utilisant moins de lettres, ce qui nous donne un enregistrement plus petit, et un fichier image transmis plus rapidement sur internet !!!
Tous les systèmes de compression de fichier (.zip, .hqx, .tar) que l'on utilise pour le téléchargement fonctionnent aussi ainsi.

 

Et les GIF et les JPEG alors ?
Nous y venons. Le problème de tous ces formats d'image c'est qu'ils appartenaient souvent à une entreprise ou à un système d'exploitation spécifique. Internet a besoin de formats standards qui soient disponibles pour tous les ordinateurs et libres de droit pour ne pas avoir à payer à chaque fois une licence pour l'utiliser.

Les formats d'image répondant à ces critères sont :

GIF : Appelé aussi Compuserve GIF 89a, car créé par le premier fournisseur d'accès à internet. Il enregistre l'image sans compression, pixel par pixel mais on peut définir la palette des couleurs : 2, 4, 8, 16, 32, 64, 128 ou encore 256 couleurs. Il permet aussi de définir une couleur de transparence qui laissera apparaître le fond de la page.
On peut également enregistrer plusieurs images dans le même fichier pour créer un GIF animé.

JPEG : Issu d'un travail collaboratif de l'indépendant JPEG Group, ce format est universellement reconnu pour son efficacité. Il permet d'enregistrer des images en millions de couleurs en diminuant énormément leur taille de stockage. On peut définir la qualité voulue de 0 à 10 : plus la compression est grande, plus l'image risque de perdre en qualité, notamment avec des zones "pixellisées".
En qualité 5, l'image reste potable à regarder. Si c'est pour envoyer à Mamie ou stocker sur son disque dur, restez en qualité 10, la taille sera de toute façon plus petite que dans un autre format.

 

Oui, mais moi, avec mon site, je fais quoi ?
Et bien maintenant que vous êtes calés (n'est-ce pas?) sur la question, il va falloir prendre une grande décision pour chacune de vos images : GIF ou JPEG ?
Docteur Nortonne dit :

Enregistrer votre image en GIF si :

Enregistrer votre image en JPEG si :

En ce qui concerne les logiciels qui vous permettront d'enregistrer correctement vos images au bon format, il ne faut pas oublier qu'il existe des sharewares ou freewares qui peuvent remplacer le fameux (et trop cher) Photoshop.

Sur Windows, voyez PaintShop Pro.
Sur Mac, le plus complet est Graphic Converter.
Comme GC peut vous paraître compliqué au premier abord vu le nombre impressionnant de fonctions et de formats qu'il possède, nous avons déniché pour vous deux petits freeware Macintosh simples et utiles :

 

 

De la méthode GIF
Pour enregistrer en GIF, vous devez d'abord recadrer et mettre l'image à la taille souhaitée.
Ce qui veut dire? Qu'on coupe bien les bords de son image pour ne pas laisser une bande blanche de 50 pixels autour de son image sous prétexte que ça fait bien! l'internaute sur modem lui, attendra 30 secondes de plus à cause de la jolie bordure (surtout qu'on peut la faire pour rien avec un tableau HTML ou une bordure de la couleur du texte)
Il y a sûrement une fonction dans votre logiciel graphique pour faire ça (recadrer ou rogner l'image, crop en anglais) lisez sa documentation si vous ne la trouvez pas au pif.

La taille de l'image doit être pensée en pixels, et pas en centimètres. Vérifiez tout d'abord que vous êtes bien en résolution 72 DPI (ou Points Par Pouce - et surtout pas en Points Par Centimètres). Ensuite vous pouvez choisir la largeur ou la hauteur en pixels, de toute façon le logiciel graphique convertit automatiquement l'un ou l'autre pour garder les mêmes proportions.

Attention!
Pensez que beaucoup de gens dans le monde n'ont pas votre Pentium III ou votre iMac et ne peuvent pas afficher leur écran en 800x600 pixels. L'affichage de base est le 640x480 pixels. Prévoyez donc que vos photos entre dans ce cadre-là, ou alors il faudra faire défiler la fenêtre pour les voir en entier et c'est pas terrible. C'est valable aussi pour les images JPEG, bien sur. Mais finissons avec le format GIF...

L'enregistrement doit être la dernière étape.
Vous devez passer l'image du mode RVB (ou RGB) vers le mode "couleurs indexées". Ce qui veut dire que les couleurs utilisées dans l'image sont triées et comptabilisées.
En général, votre logiciel fera passer alors votre image en 256 couleurs. Essayez ensuite (il vous faudra peut-être repasser en mode RGB pour cela) de la passer en 64 couleurs, puis en 32, etc, pour voir jusqu'à quel nombre de couleurs votre image reste "potable". Vous pouvez alors enregistrer l'image sous... le format GIF en précisant à ce moment-là la couleur de transparence (c'est une option).

Veillez à donner à votre image un nom compréhensible par le plus bête des systèmes (en l'occurrence MS-DOS) : abcdefgh.gif (moins de 8 lettres.gif) sans jamais inclure d'espace, d'accénts ou autres #@&§. Seuls les tirets "-" et "_ " sont autorisés.
(je ne dis pas que tous les DOS sont bêtes, DR-DOS, par exemple gère les fichiers nommé avec 32 lettres!)

Pour les GIF animées, voyez notre page sur la question.

Pour la transparence et ce logo ovale que vous voulez plaquer sur le fond avec motif voyez aussi notre page sur cette angoissante question.

 

JPEG ou JPG ?
Pour enregistrer en JPEG, c'est souvent plus simple. Vous restez en RVB, millions de couleurs ou 256, vous cadrez bien votre image puis vous enregistrez sous... JPEG. On vous demande alors de choisir le degré de qualité de l'image. La qualité moyenne "5" est suffisante. Vous pouvez descendre jusqu'à "3" si l'image est encore trop lourde en octets après l'enregistrement en qualité 5. Choisissez 10 seulement si c'est une image qui sera retravaillée plus tard ou imprimée.

Au niveau du nom à donner à l'image, même recommandations que pour GIF, à la différence que l'image doit s'appeler xxxxxxxx.jpg, en trois lettres seulement parce que c'est comme ça...

Ou dois-je finalement enregistrer mes images ?

Le plus simple est d'avoir dans votre petit dossier "site" où vous rangez vos pages HTML, un sous-dossier "images" ou vous stockez les gif et les jpg. Si votre site contient plusieurs dossiers, créez autant de sous-dossiers "images".

Maintenant que vous avez bien préparé vos images, vous pouvez :

Sommaire de l'aide