Accueil du site La classe numérique

Accueil Outils Conseils techniques Optimisez les images pour créer vos pages web !

Optimisez les images pour créer vos pages web ! Les notions à prendre impérativement en compte lorsque l’on souhaite soit créer des pages -et un futur site !!- web, soit écrire un article dans SPIP en l’agrémentant d’une image.

Petit manuel pour alléger une image avec PhotoFiltre

Pour commencer

Une page web permet de visualiser sur une même interface (la page elle-même) des éléments « multi-média ». Le texte est inclus directement dans la page mais pour les autres éléments, il s’agit de fichiers séparés qui sont seulement « appelés » par la page. Les images font partie de ceux-là.

Ces fichiers ainsi que la page doivent être téléchargés sur l’ordinateur de l’internaute pour être lus, vus, écoutés... et bien-sûr, plus le fichier est lourd, plus cela prend du temps.

On estime grosso-modo qu’une image ne doit pas dépasser 50 Kilo-octets (au maximum). Ceci est une estimation et il faudra prendre en compte le rôle de l’image pour décider si elle peut prendre du poids.

Compression ?

Oui, d’accord mais comment on fait ? Et bien il vous faut d’abord un logiciel de retouche d’image qui pour la plupart permettent de réduire le poids en compressant les données contenues dans le fichier image : nombre de couleurs, détails de l’image...

Il existe plusieurs formats de compression. Les 2 plus utilisés pour le web sont le GIF et le JPEG.

  • Le format GIF est limité à 256 couleurs et autorise la transparence, il est plutôt utilisé pour les graphiques.
  • Le JPEG (ou JPG) lui atteind plusieurs milliers de couleurs, autorise donc les dégradés mais pas la transparence. Il est plutôt utilisé pour les photos.

Pour celles et ceux qui veulent en savoir plus sur les formats d’images

Compressons

Le logiciel utilisé est PhotoFiltre, il permet simplement de retoucher des images et de les optimiser. Dans l’exemple suivant, imaginons une image JPEG acquise depuis un appareil photo numérique. Dimensions : 1600 x 1200 pixels, poids : 1350 Ko (ou 1,35 Mo bien trop lourd pour le web).

  1. Ouvrir PhotoFiltre puis l’image
  2. Recadrer si besoin : outil « Sélection » (flèche blanche dans la barre d’outils à droite) avec mode de sélection « Rectangle » (en bas de la même barre d’outils). Une fois le cadre de sélection choisi sur l’image (cliquer-glisser), aller dans le menu « Image » puis « Recadrer ».
  3. Redimensionner l’image à une taille raisonnable. Arbitrairement, 450 pixels pour sa plus grande longueur : menu « Image » puis « Taille de l’image ». Une nouvelle fenêtre s’ouvre et nous propose de saisir la nouvelle taille, soit ici pour la largeur, 450 (la hauteur s’adapte automatiquement). Cliquer sur « Ok ».
  4. Menu « Fichier » puis Enregistrer sous... pour garder l’image originale et permettre d’optimiser cette nouvelle image : donner un nom clair au fichier (éviter les accents, les espaces, tout caractère spécial), cliquer sur « Enregistrer ».
  5. Une fenêtre de compression (enfin ! :) apparaît : Déplacer le curseur sur la barre horizontale pour plus ou moins compresser. Supérieure la qualité sera, plus lourde l’image sera. En cliquant sur « Aperçu » le poids du fichier s’affichera. Lorsque le rapport qualité/poids semble correct, cliquer sur « Ok ».

Des questions ? :)

Par Stéphanie DE NADAï
Le 10 février 2005
Répondre à cet article

Version imprimable

[Retour] [Privé]


[ Contact ] [ Plan du site ] [ SPIP ] [ Privé ] [ Carrefour numérique ] [ Haut de page ]
Site optimisé pour les navigateurs Internet Explorer 5.5 et Mozilla FireFox 1.0 minimum
Écran 800 x 600