Comment préparer une image en fonction de sa destination ou de paramètres imposés ?

Le nécessaire

Un logiciel de traitement d'image par exemple Photofiltre qui est installé sur toutes les stations du collège (dossier "Outils et logiciels" sur le bureau).

Les bonnes pratiques

   1 - Deux types de format :

• JPEG ou JPG : Les photographies doivent être sauvegardées et chargées sur votre site en format JPEG. Ce type de fichier gère efficacement les couleurs dans votre photographie et permet d'obtenir des photographies de qualité équivalente au PNG, qui seront cependant beaucoup plus légères.
   
• PNG : Les graphiques, en particulier ceux qui utilisent de grands aplats de couleurs, doivent être sauvegardés en PNG. Cela inclut donc l'essentiel des illustrations créées par ordinateur, infographies, les images qui contiennent beaucoup de textes et les logos. Le PNG est plus précis que le JPEG, ainsi les contours de vos aplats de couleurs et de vos lettres seront plus nets PGN qu'en JPEG. Le PNG gère également la transparence, ce qui est indispensable pour un logo !

    La question inévitable :
Comment choisir dans le cas d'une photographie comportant un texte ? Si le texte prime sur la photographie, et qu'il est de grande taille, utilisez le format PNG.

Attention :
Convertir une image de JPEG à PNG n'améliorera pas sa qualité. Si votre logo est au format JPEG par exemple, tâchez de récupérer la version PNG.

   2 - Taille et résolution des images

Il faut trouver l'équilibre entre la taille et la résolution des images. 

Haute résolution ⇒ meilleure qualité ⇒ poids plus lourd ⇒ chargement lent ⇒ mauvaise expérience pour les visiteurs du site.
Basse résolution ⇒ images floues et pixelisées.
 

Comment s'y retrouver ?

Taille du fichier : espace occupé par le fichier sur l'ordinateur. Elle s'exprime en Mo. Si la taille du fichier est trop grande  cela signifie que la résolution, la taille de l'image ou les deux sont trop élevées.

Taille d'image : largeur et hauteur de l'image exprimées en pixels, par exemple 800 x 600 pixels.

Résolution : c'est la densité de l'image exprimée en pixels par pouce (ppi, ppp) pour un écran d'ordinateur ou de téléviseur, pour une imprimante, un scanner ou une souris optique on parle de points par pouce (dpi) _wikipédia . Les écrans d'ordinateurs affichent généralement 72 ppi, inutile donc d'utiliser une résolution supérieure. Cependant qu'une impression peut être de 300 dpi.

IL N'Y A PAS DE LIEN ENTRE LES DPI ET LES PPI ! (autrement dit : pas de règle de calcul entre valeur de ppi et dpi).

   3 - En pratique

• Une grande image (fond de site) devrait être inférieure ou égale à 1 Mo,
• Image de fond d'écran : largeur 2000 pixels maximum.
• Image de présentation diaporama largeur comprise entre 600 et 800 maximum, idem pour la hauteur.

Comment faire pour réduire ? Dans le logiciel de traitement d'image (photofiltre par exemple) ...

• dans le menu 'image', sélectionner 'taille de l'image', 'Redimensionner' ou 'recadrer' l'image : adapter la largeur et la hauteur en fonction du besoin. Attention toujours conserver les proportions, sinon vous déformez l'image.
• Réduire la résolution ( 72 ppi est souvent suffisant),
• Réduire le nombre de couleurs, si cela est disponible.
• Faire enregistrer sous, choisir le type de l'image (png, jpeg en fonction des besoins), choisir un autre nom pour l'image modifiée que l'image originale afin d'évaluer le changement de taille en Mo ou ko (1Mo = 1000 ko).

   4 - Les derniers conseils

• Utiliser des images de style et de taille similaires.
• Optimiser les noms des fichiers image. Capitole-Toulouse.jpg est préférable à DSC283245.jpg .
• Remplir les descriptions et textes alternatifs.
• Placer les images à côté de textes pertinents contenant des mots clés.

Voyons différents cas

Grue carnot 128 couleurs 96 ppi recadré x400 11 Ko	Grue carnot 256 couleurs 96 ppi recadré x400 14 Ko

Pour 3 Ko de plus on voit que le rendu est meilleur avec 256 couleurs (voir coin supérieur gauche) lorsque qu'on zoome très fortement.

Alors que pour les images ci-dessous la différence n'est pas flagrante. Remarquez aussi que le passage de 96 ppi (résolution d'origine) à 72 ppi fait augmenter la taille du fichier.

La meilleure façon de diminuer la taille d'un fichier image est donc soit de recadrer, soit de diminuer le nombre de couleurs au détriment du rendu.

	Grue carnot 256 couleurs 96 ppi.png 223 ko, 591 x 678 pixels
	Grue carnot 256 couleurs 72 ppi.png 283 Ko, 591 x 678 pixels
	Grue carnot 128 couleurs 96 ppi.png 166 Ko, 591 x 678 pixels