LE POIDS DES PHOTOS

LE POIDS DES PHOTOS
Il est important de donner un nom correct à toutes les images que
vous utilisé pour constituer des galeries d'images. Si vous laissez le nom
de fichier tel que vous le propose votre appareil photo, vous serez
référencé dans les moteurs de recherches sur des mots qui ne
correspondent à rien (genre "pic00005").
Si vous souhaitez optimiser votre référencement, n'hésitez pas à
donner à vos images des noms à rallonge.
Une photos d'un lapin bleu sur le sable devra être nommée "lapin-bleusur-le-sable.jpg" par exemple.
Comment optimiser une image pour le WEB ?
Quelques conseils
Le problème :
Pour le web les images doivent être aussi petites que possible. Si la page charge trop
lentement, les usagers se lassent et passent ailleurs.
Taille de l'image
Si l'image doit être visualisée à l'écran elle doit avoir une résolution de 72 dpi.
Sa taille totale doit être adaptée à la visualisation dans une page. (Rarement plus de 500 pixels
de large, 400 pixels de haut.)
On peut donc scanner à taille réduite ou rogner ou redimensionner l'image mais il est
préférable de scanner à la bonne dimension.
Choix du GIF ou du JPEG :
GIF
il y a du texte dans l'image
A choisir si Si
Si il y a des surfaces de même couleur
:
(logos, icônes, schémas,...)
Rarement mauvais. C'est le format à
employer en cas de doute.
Si l'image doit être redimensionnée, c'est
A éviter si : lamentable; particulièrement pour des
images tramées (Dither)
Pas très bon pour les photos
max 256 couleurs.
La compression se fait sur les zones de
même couleur (ou trame), et sur la réduction
du nombre de couleurs. Attention, si on
Remarques trame (diffusion) pour réduire le nombre de
couleurs, on ne peut plus guère compresser
:
puisqu'il n'y a plus de pixels successifs de
même couleur.
Pour des captures d'écran par exemple, on
peut envisager de passer l'image en gris
parfois et de réduire à 4 niveaux.
JPEG
Pour les photos
Si il y a des dégradés fins.
Si on veut compresser très fort
une image.
Si il y a du texte : les lettres
perdent de leur piqué et sont mal
lisibles.
Peu intéressant si l'image est en
256, et à fortiori en 16 ou 4
couleurs.
Forcément en millions de
couleurs. Inutile de se priver sur
ce plan- là.
Pour paramétrer le facteur de
compression, observer les bords
très contrastés : des sortes d'écho
du bord sont un signe qu'on a été
trop loin; on voit aussi apparaître
des gros carrés dans les
dégradés.
Pour réduire la taille d'un GIF:
Réduire le nombre de couleurs : On peut souvent gagner du poids en réduisant le nombre de
couleurs.
Souvent le rendu gagne à activer la conversion avec pixellisation (ou tramage stochastique ou
diffusion), mais la compression est alors moins efficace. Si on n'active pas cette fonction des
zones de couleur (effet de lèpre) disgracieuses apparaissent, mais la compression est plus
forte et l'image plus "light"
Comparatif de réductions avec un GIF
Pour réduire la taille d'un JPEG:
Réduire le facteur de qualité : On choisit le degré de compression : plus la compression est
forte et l'image "light" plus la qualité devient discutable en particulier dans les zones de fort
contraste, les bords, etc.
Comparatif de réductions avec un JPEG
En Résumé :
•
•
Choisir le JPEG pour les photos : une valeur de 30% est assez typique.
Pour les GIF, limiter le nombre de couleurs au minimum nécessaire. 16 suffit parfois.
•
•
•
•
(Graphic Converter (Mac) ou Paintshop Pro (PC) font un très bon job ici : Shareware
tous les 2)
Voir aussi la page sur les images du club internet
Voir aussi pour comprendre la trame et les niveaux.
Voir aussi la page d'un participant du cours : comparatif la même image en GIF et
JPEG à divers niveaux de compression.
N.B: Penser à changer les liens qui s'y réfèrent si on renomme un fichier
Scanner, détramer, optimiser, graver...
Le vendredi 12 mars 2004.
Que ce soit pour une destination "print" (papier) ou Web, nous avons souvent à
scanner, optimiser et diffuser des images. Tout comme pour le traitement de texte, nous
utilisons en général notre scanner et notre logiciel graphique à moins de 50% de ses
capacités. Quelques conseils pour augmenter ce pourcentage.
Pour scanner, mieux vaut partir de son logiciel graphique.
On peut également utiliser directement son scanner... pour ouvrir ensuite son logiciel de
dessin/retouche d’image, car une image scannée, c’est bien, mais retaillée aux dimensions
voulues et optimisée (dont le poids a été allégée au maximum sans "trop" nuire à la qualité)...
c’est plus utile. !
Donc partez de votre Photoshop, Gimp, ImageReady, Fireworks, Paint Shop, etc., préféré.
Pour importer l’image depuis votre scanner, cherchez une commande "Importer" ou
"Scanner" et, s’il y a lieu, choisissez l’option "Twain" (qui rend votre logiciel graphique
compatible avec votre scanner ou votre appareil photo numérique).
S’ouvre alors le programme de commande de votre scanner.
Si vous voulez utiliser votre scanner à plus de 50% de ses capacités... paramétrez-le !
Les choix les plus importants à faire :
- choisir la zone à scanner
C’est une évidence, il faut d’abord délimiter la zone à scanner, qui n’est pas nécessairement la
totalité de l’image ou du document que vous venez de glisser sur la vitre du scanner.
Pour cela, manipulez l’outil d’encadrement classique pour réduire la zone choisie ou en créer
plusieurs sur le document (par défaut, le scanner sélectionne la totalité de l’image ou du
document lorsqu’il la ou le prévisualise).
- choisir la résolution
C’est le choix primordial. La résolution s’exprime en dpi (dot per inch [1]). Les conséquence
du choix de la résolution se traduisent d’une part dans la qualité et la beauté de l’image, et,
d’autre part dans son poids en octets, kilo-octets ou méga-octets, le tout étant d’obtenir
l’image la plus belle et la plus légère... ce qui est bien sûr contradictoire.
Deux repères : une bonne résolution pour une image numérique destinée à l’impression
papier est 300 dpi. Si l’image est destinée à illustrer un site Internet, contentez-vous de 70 à
90 dpi.
- choisir la taille
Si vous destinez votre image numérique à un site Internet, choisissez une taille d’environ
450x300 ou 400x300 pixels, ou plus grande dans des cas exceptionnels.
Outre la mise en valeur que vous voulez offrir à votre image, d’autres éléments sont à prendre
en compte comme la taille moyenne d’écran des internautes qui visitent votre site. Un
analyseur gratuit d’audience comme Xiti.com nous apprend ainsi que plus de 60% des
visiteurs de GénérationCyb.net ont une taille d’écran de 1024 sur 768 pixels, ce qui nous
autorise à concevoir de grandes images. Mais l’autre contrainte est, bien sûr le poids des
images qui, plus il augmente, gêne l’internaute... et coûte cher en hébergement !
Pour indiquer à votre scanner la taille d’image désirée, vous pouvez, sur certains logiciels de
scanners, saisir directement la taille en pixels, centimètres, etc.
Sinon, la taille de votre image apparaît quelque part sur votre écran, et vous pouvez modifier
la résolution en dpi jusqu’à obtenir les hauteur et largeur d’image souhaitées. Par exemple,
une résolution de 75 dpi appliquée à une photo 10x15cm donnera une image numérique de
450 pixels de large (une résolution de de 79 dpi appliquée à une photo 9x13 donnera le même
résultat).
- détramer
cette opération n’est pas proposée par tous les scanners. Elle vous sera utile si vous scannez
une image (dessin, photo) tirée d’un livre ou d’un magazine. En effet, à la différence d’une
photo que la FNAC vous a tirée sur papier et qui est en quelque sorte un original, une image
reproduite dans un magazine a été tramée pour mieux ressortir à l’impression. Elle n’est donc
plus un original pur, et l’opération de détramage (ou "descreen") va tenter de corriger la
transformation due au tramage.
Evitez donc de détramer lorsque vous scannez des photos originales...
- renforcer les contrastes
Les images une fois scannées sont parfois un peu floues, avec ou sans détramage. Pour les
affiner, utilisez dans votre logiciel graphique la commande "Renforcement", "Plus net",
"Accentuation", "Sharpen" ou "Unsharp Masking" si le logiciel de votre scanner vous le
propose.
- optimiser
Lorsque vous avez scanné l’image, la résolution et la taille choisies ont déterminé son poids
en Ko. Avec le logiciel graphique, vous pouvez encore alléger le poids de l’image, en
réduisant encore sa taille, ou en optimisant son format pour le transformer par exemple du
format TIFF issu du scan et très lourd en format jpg (bien adapté pour les photos sur le Web)
ou gif (bien adapté pour les illustrations sur le Web). Voici par exemple la fenêtre
d’optimisation du logiciel ImageReady sur Mac :
- graver
Pour conserver ou transmettre des images scannées dans leur format original, on a parfois
recours au gravage sur CD-Rom. Juste deux petites choses concernant les noms de fichiers :
si vous gravez depuis un PC, veillez à configurer votre logiciel graveur pour qu’il autorise
des noms de fichier dépassant 8 caractères, et à ce qu’il ne transforme pas systématiquement
les minuscules en majuscules. Sinon, si les fichiers sont reliés entre eux - par exemple des
pages html reliées par des liens hypertextes -, vous aurez des surprises...,
si vous gravez depuis un Mac, veillez à bien faire figurer la terminaison dans les noms de
fichiers (.jpg, .tiff, .rtf, etc.), sans quoi ils ne seront pas nécessairement lisibles sur PC.
Pourquoi Optimiser ses images ?
A qui n’est-il pas arrivé de se retrouver avec une image immense, prenant toute la place dans
une page ?
Aujourd’hui je vais vous faire un petit topo pour que cela ne vous arrive plus.
Tout d’abord il faut que vous compreniez qu’il est indispensable d’adapter vos images à vos
pages (ou à l’utilisation que vous voulez en faire).
Vous devez savoir qu’il est possible de changer la taille d’une image grâce au code html. C’est ce
que vous faîtes quand vous redimensionnez une image à l’aide de Dreamwaver par exemple.
Si vous avez pris cette habitude, il vous faut l’oublier. C’est une mauvaise habitude.
Il est de savoir que ce que vous changez ainsi n’est pas la taille "réelle" de l’image mais en réalité
sa taille d’affichage. Vous n’influez donc pas sur le poids de l’image. Si vous rétrécissez une
grande image, son temps de chargement sera le même que pour la très grande image. Et vous
savez que sur le net il est de rigueur de diminuer au maximum les temps de téléchargement.
L’idéal est donc de réduire sa taille réelle pour augmenter la vitesse de téléchargement et
d’affichage de la page. Dans le cas inverse, si vous agrandissez une petite image vous perdrez
en qualité. Voyez par vous même :
Voici l’image dans sa taille originale
Avouez que ce n’est pas très joli.
si j’agrandi cette image voyez ce que ça donne.
Dans tous les cas il est impossible d’agrandir une petite image sans perte de qualité. (Ne croyez
pas tout ce que vous voyez dans les films. Ce qu'ils font est imposssible dans la réalité !)
Comment redimensionner une image
Pour ce faire on va utiliser un petit logiciel qui s’appelle Pixia. Mais il est possible de le faire avec
de très nombreux logiciels comme Photoshop, Paintshop Pro, XnVIEW, The GIMP ...
Vous pouvez le télécharger en version française ici : pixia.free.fr/telech.htm
Installez le logiciel puis lancez le.
Ouvrez l’image que vous voulez redimensionner. (vous pouvez utiliser le raccourci CTRL + O)
La barre d\’état (en bas de la fenêtre) vous donne diverses informations :
1.
2.
3.
4.
Le nom et l\’emplacement du fichiers [c :\\Mes Documents\\Mes Images\\maphoto.jpg]
La taille en pixel de votre image [2272*1704 pixels]
La profondeur de couleurs [24 bits]
La taille d’affichage en %. Vous pouvez réduire ce % si la photo n’apparaît pas
entièrement. Le raccourci pour faire un zoom arrière est CTRL + D, celui pour faire un
zoom avant est CTRL + T. Pour vous déplacer dans une image agrandie, appuyez sur la
barre Espace, et cliquez sur l'image en maintenant enfoncé le bouton gauche de la
souris.
Maintenant pour changer la taille de l’image :
Avec Pixia cela se fait en créant une copie de l’image dans une autre taille (utile si vous désirez
garder la version "haute définition" pour l’imprimer par exemple).
Il vous suffit simplement de cliquer sur Image puis sur Clone redimensionné....
Dans la boîte de dialogue tapez les dimensions désirées.
Je vais vous donnez quelques exemple de tailles standard pour que vous ayez une idée de ce
que vous obtiendrez
640 * 480 (taille maximun utilisable sur le net.
480 * 360
320 * 240
160 * 120
Maintenant que vous avez redimensionné votre image, il va vous falloir l’enregistrer.
Nous allons l’enregistrer en JPEG, format le plus courant pour Internet (un petit topo sur les
formats d’images)
Pour enregistrer comme un nouveau fichier, le raccourci est CTRL+A (enregistrez sous...)
Tapez le nom que vous voulez donner à votre image et dans le menu déroulant juste en dessous
choisissez JPEG(*.jpg)
A présent il va vous falloir choisir la qualité de l’image que vous voulez (le taux de compression).
L’échelle va de 1 à 100. Plus la valeur est élevée, meilleur est la qualité de l’image (et plus
l’image est lourde).
Tapez 90 et cliquez OK.
Vous obtenez donc une image de bonne qualité mais assez lourde.
Il n’y a pas de "bons rapport" poids/qualité. C’est à vous d’essayer différents taux de compression
et de trouver celui qui est le meilleur pour votre image. On considère qu’un poids "raisonnable"
d’image se situe entre 50 et 70 Ko. Mais si il y a peu d\’image sur votre page, il vous est possible
de passer cette limite. Evidement vous pouvez mettre des photos moins lourdes. Je sais que
personnellement mes photos font rarement plus de 35 Ko.
Attention, vous devez toujours faire attention de garder votre image originale non modifiée. En
effet au fur et à mesure de vos retouches et de vos enregistrements, la qualité de l’image se
dégradera progressivement.
Vous voilà donc paré pour mettre en ligne des images qui ne seront pas trop grandes et qui ne
mettront pas trois plombes à se télécharger.