TD image

• Contraintes techniques pour le web
  • lenteur du réseau : 10s pour une image de 40Ko hors ADSL
  • pitch écran : 0.28 = env. 1/3mm
  • formats, limités à gif et jpeg, ou png (mais qui n'est pas utilisable partout)
  • rendu des couleurs sur l'écran assez peu conforme
  • rendu des couleurs en vidéoprojection encore moins conforme
  • rendu du contraste dépendant de la plateforme (gamma du Mac < gamma du PC)
• Taille du fichier de l'image (ex : fontes)
  • image vectorielle : définition mathématique, volume faible, zoomable sans altération de la qualité
  • image "matricielle" bitmap : 1 pixel = 1 valeur RVB, volume dépendant du nombre de couleurs, affichage par interpolation = perte de qualité, peu zoomable
• Résolution
  • nombre de pixels au pouce : dpi
  • écran = 72dpi
  • impression (laser standard) 600 dpi
  • édition (laser) 2400dpi
• Couleur
  • numérique = la "profondeur" est le nombre de bits consacrés à la teinte

  • 1 bit	noir et blanc
    2 bits	4 couleurs
    4 bits	16 couleurs
    8 bits	256 couleurs
    24 bits	16M de couleurs, en 3 couches de 8 bits RVB
    32 bits	16M de couleurs + 8 bits "couche alpha" de transparence

Formats de fichiers

• bmp = écran windows
• tiff pour l'impression
• jpeg pour les photos "tons continus", avec de nombreuses couleurs et des dégradés
  • compression destructive, de 1 à 10 fois, donc ne pas recomprimer en jpeg une image qui est déja jpeg
  • milliers de niveaux de couleurs, donc reproduit bien les dégradés
  • compression par zone, donc n'est pas bonne pour le trait qui apparaîtrait en ligne brisée ("pixelisée")
  • à utiliser pour les photos de taille supérieure à 100x100 pixels (en dessous gif est plus économique)
• gif pour les croquis "dessin au"trait", avec des traits pleins, des aplats, du texte
  • compression non destructive (Lempel Ziv Welch)
  • jusqu'à 256 couleurs
  • compression de gauche à droite, donc un dégradé de gauche à droite est peu comprimé, alors qu'un dégradé vertical sera bien comprimé
  • les à plats sont bien comprimés, les dégradés le sont mal (ils s'apparentent à des photos)
• gif89a
  • avec zones de transparence
  • entrelacement (affichage progressif quand le réseau sature)
  • animation
• png (Portable Network Graphic)
  • format libre, non propriétaire
  • compresse un peu mieux que gif
  • gère la transparence (couche alpha, 10 à 30%)
  • lissage automatique des traits
  • mais Microsoft n'aime pas... (IE)
• pdf
  • basé sur PostScript, correspond à une image vectorielle d'un document
  • propriété d'Adobe,
  • lecteur gratuit
• swf
  • format "Flash", nécessite un plugin au butineur
  • vectoriel
  • bonnes possibilités de compression

Démo : aller voir www.soapplab.auckland.ac.nz/info/formats/gif.htm

TD : Manips, avec XnView, installé de façon portable, sur les images de ce dossier

1. inpu-output.jpg : enlever le logo, passer la résolution en 72dpi, redimensionner en largeur 325px
2. statue.tif : recadrer sur une des photos, passer en résolution écran 72dpi, redimensionner dans une largeur entre 200 et 300px, sauvegaerder en jpeg
3. PereNoel : orienter l'avion vers la droite
4. NYpanorama : pour l'insérer dans une page web réduire sa largeur à moins de 600px et son poids à moins de 60Ko
5. yankee-go-home : elle est trop sombre, l"éclaircir et améliorer le contraste
6. mooon : combine d'images fixes la composent ?
7. La conquête spatiale : placer un filigrane, pourquoi pose-t-elle des problèmes sur le web ?
8. piste ski : elle est floue, l'améliorer
9. visible earth : elle est trop lourde pour une page web, régler ce problème
10. chat2 : quelle taille choisir pour obtenir une image jpeg correcte de 24Ko ?
11. inside_screen.bmp : ce format passe-t-il sur le web ? appliquer un effet par un filtre
12. PC&Pixel : sera-t-elle mieux en jpg ou en gif ? quelle taille et quelle résolution pour être légère tout en restant lisible ?
    

Doc de référence pour scanner : www.arpla.univ-paris8.fr/sites/scanners/

10 conseils pour bien (re)cadrer vos photos www.linternaute.com/photo_numerique/cadrage

Document : http://www.mines.u-nancy.fr/~tisseran/bureautique/fiches/image.html
Mai 1998 - Dernière mise à jour : 21 février 2008