Traitement des images

Vous trouverez dans cette section les informations nécéssaires afin d'ajuster vos images pour les intégrer à vos pages Web.

Démonstration étape par étape du traitement

Format, taille, dimension

Formats graphiques

JPG
Le format JPG est utilisé pour la numérisation des images et des photos possédant de multiples dégradées de couleurs. La palette de couleurs peut gérer plusieurs millions de nuances de teintes.

GIF et PNG
Les autres formats graphiques acceptés pour le Web sont le format GIF et le format PNG. Le format GIF et le format PNG sont principalement utilisés pour des éléments graphiques de type logo ou illustration c'est-à-dire de type couleurs franches . La palette de couleurs est limité à 256 couleurs. Le format GIF permet de produire des images transparentes c'est-à-dire qu'il se marie avec la couleur de fond d'une page Web.

Taille et dimension

La taille et la dimension sont lesfacteursà considérer afin d'optimiser les images afin de les inclure dans unepage Web. La tailled’une image ne devrait pas dépasserune cinquantaine de kilo octets (50 Ko). Évitez également que la totalitédes éléments graphiques d’une page ne dépasse la taille de150 Ko.

Cette approche facilite la consultation de vos pages Web par les personnes ayant une connexion Internet plus lente que la haute vitessevousassurant qu'un plus grand nombre de personnes visitera votre site. Le téléchargement d'une page de moins de 200 Ko prend environ de 3 à 5 secondes pour les personnes possédant une connexion Internet standard par ligne téléphonique.

Pour alléger la taille d'une image, on réduit la dimension de l'image à la grandeur d'affichage réelle dans une page Web. La résolution (LIEN ) des images est également réduite lors de cette opération par le logiciel de traitement graphique utilisé.

Les images doivent en effet occuper le moins d'espace possible, afin de réduire le temps de chargement. Que l'on utilise une image prise avec une caméra numérique, une image numérisée destinée à l'imprimerie ou une image obtenue par balayage (scanner) devront être, dans laplupart des cas, traitéespour répondre aux impératifs du Web c’est-à-dire de faible résolution et s’afficher en taille réelle.

La façon la plus simple de consulter les propriétés d'une image afin d'en vérifier la taille est de positionner le pointeur de la souris pour quelques instants sur le fichier graphique. Une légende s'affichera identifiant le type de fichier et la taille (figure 1) . Dans certains environnements la dimension de l'image sera également identifié.

Figure 1: Propriétés de l'image - pointeur souris

Choisir la bonne dimension

Les dimensions (largeur et hauteur) d’une image sont indiquées en pixels . La définition d'un écran d'ordinateur est également identifié en pixels ( 800 pixels par 600 pixels,1024 pixels par 768 pixels, etc.) .

Il est bon usage d'adapter la dimension des images afin qu'elle soit consultable en entier sur un écran de définition de 800 px par 600px, c'est-à-dire sans qu'une barre de défilement horizontale apparaisse (figures 2 et 3). Afin de respecter cette règle, Il faut éviter que la largeur des images dépasse 760 pixels.

Figure 2 : Image de 1200 pixels - affichage écran de 800px par 600px

Figure 3 : Image de 700 pixels - affichage écran de 800px par 600px

En résumé, gardez en tête les objectifs que vous visez en créant votre site Web. Vous cherchez probablement plus à informer vos visiteurs qu'à les distraire. Si tel est le cas, limitez la taille et le nombre des images.À chacun de fixer la limite de «poids» de ses images. Le seul barème à considérer: le visiteur impatient qui, au bout de quelques secondes d'attente, va aller cliquer ailleurs!

Traitement des images

Quel logiciel utiliser ?

Il existe sur le marché une multitude de logiciels de traitement graphiques. Certains plus complexes comportent des fonctions avancées de traitement (exemple : Photoshop), d'autres plus simple d'utilisationpermettent rapidement d'alléger des images en réduisant leur dimension etleur résolution en quelques étapes.

C'est dans cet esprit que nous avons choisi la version française du gratuiciel XnView. Vous pouvez en télécharger une copie à partir de ce site (lien). Si vous possédez un autre logiciel de traitement graphique (Gimp, Paintshop, etc.), la procédure estsimilaire.

Note : Si vous ne désirez installer un logiciel, il existe des sites offrant la possibilité d’effectuer le même type de traitement en ligne.

Création d'une version adaptée d'une image pour le Web

1) Déterminer la largeur désirée de l'image à afficher dans la page Web.

Une image d'une largeur de 750 pixels occupe la largeur maximale sur un écran d’une définition de 800 pixels par 600 pixels).

2) Identifier la taille de l'image d'origine

Placer le pointeur de la souris sur le fichier de l'image ( tel qu'en figure 1)

3) Modifier la dimension de l’image

Ouvrir l’image dans XnView > Menu « Fichier » item « Ouvrir une image » .
Notez qu'il est possible de consulter les paramètres originaux à cette étape

Redimensionner> Menu « Images » item « Redimensionner »

Modifier la largeur de l’image de la section « Taille Écran ».
Assurez-vousque la case « Garder les proportions » soit coché afin d'éviter de déformer l'image. (figure4)

Cliquer sur confirmer

Figure 5 : Écran XNView - Redimensionner

4) Enregistrer cette version de votre image dans le dossier regroupant les éléments graphiques associés à vos pages Web.

Tel qu'indiqué à la page Web "Édition des pages" Le nom desfichiers graphiques (format GIF et JPG ) à inclure dans vos pages Web ne doivent pas contenir : d'espaces blancs, de caractères en majuscules, decaractères accentués.

Image et texte

L’utilisation d’un tableau sans bordures peut faciliter le contrôled'un texte à associer à une image.

Intégration d'un texte et d'une image dans un tableau.

Créer un nouveau tableau en sélectionnant le nombre de rangées et de cellules désirées (menu Tableau > Insérer un tableau).

Figure 6 : Insérer un tableau

Une fois le tableau créé, sélectionner le tableau (placer le curseur de la souris sur le tableau , activer le menu contextuel (bouton droit de la souris ) et choisir <Propriétés du tableau >.Adapter les propriétés désirées : < onglet Tableau > bordure à0 pixels < onglet Cellules > et ajuster la largeur des cellules (en %).

Figure 7 : Propriétés de l'onglet tableau

Figure 8 : Propriétés d'une cellule

GIF : L'extension .gif est la contraction de Graphics Interchange Format, norme développée par CompuServe à la fin des années 80. Parler de transparence.

JPG : L'extension .jpg est un raccourci pour JPEG qui est une norme de compression courante pour les photographies et d'autres images.

PNG : Le format PNG (ou format Ping) est un format de fichier graphique bitmap (raster). Il a été mis au point en 1995 afin de fournir une alternative libre au format GIF, format propriétaire dont les droits sont détenus par la société Unisys (propriétaire de l'algorithme de compression LZW), ce qui oblige chaque éditeur de logiciel manipulant ce type de format à leur verser des redevances. Ainsi PNG est également un acronyme récursif pour PNG's Not Gif. Source : www.commentcamarche.com - licence Creative Commons.

Octet : (a travailler) Ensemble de huit bits, pouvant prendre 256 valeurs différentes. La capacité de stockage de données d'un ordinateur s'exprime en octets. Un Kilo-octet (1Ko) représente 1024 octet et un Mega-octet (1Mo) un millier de Ko ou un million d'octets. En anglais :Byte

Pixel : Chaque point composant une image numérique est un pixel. Plus il y de points par pouce (PPP) plus l'image est précise, donc en plus haute définition. Cette unité de base sert également à identifierla résolution desécrans d'ordinateurs (800 pixels par 600 pixels,1024 pixels par 768 pixels, etc.), plus la définition d'un écran est élevé, plus d'information s'affiche à l'écran.

XnView : est fourni comme gratuiciel pour une utilisation privée, non-commerciale ou éducative (incluant les organisations à but non lucratif). Vous avez le droit d'utiliser et de faire un nombre illimité de copie de ce logiciel. Pour une utilisation ou distribution commerciale, il est nécessaire de vous enregistrer. Ceci est une aide pour le développement de versions futures.