Images

Types de fichier d'image

• GIF (Graphics Interchange Format)
  les images GIF se composent seulement de 256 couleurs
  utilisées pour les graphiques et les dessins
  la taille plus petite
  le chargement plus rapide
• JPG / JPEG (Joint Photographic Experts Group)
  contiennent des millions de couleurs
  utilisées pour les photographies
• PNG (Portable Network Graphics)
  une alternative aux formats JPEG et GIF
  des millions de couleurs
  une compression efficace

Taille d'images

• Les dimensions sont définies en pixels.
• Un pixel est le point minimal adressable par le contrôleur vidéo.
• À chaque pixel est associée une couleur, décomposée en trois couleurs primaires (en pourcentage ou avec une valeur sur 255),

  

  Source : Wikipedia

  Exemple: rgb(0, 0, 255) ou rgb(0%, 0%, 100%) pour le bleu et rgb(255, 255, 0) ou rgb(100%, 100%, 0%) pour le jaune.
  
• La taille de chaque pixel est déterminée par la résolution de l'écran et la taille de la diagonale.

  Exemples :
  résolution : 1024x768, diagonale : 19", taille de pixel : 0.377mm
  résolution : 800x600, diagonale : 17", taille de pixel : 0.4318mm
  résolution : 640x480, diagonale : 15", taille de pixel : 0.4763mm
  

Comment créer une image ?

• utiliser des images prises avec une caméra numérique
• se servir d'un programme d'édition d'images
  • PhotoShop
    principalement utilisé pour le traitement de photographies numériques, mais sert également à la création d'images.
  • Irfan View, excellent et gratuit
  • Paint Shop Pro de Corel
  • SnapaShot (captures d'écran), gratuit
• télécharger des images de l'Internet

Comment insérer une image dans une page Web ?

• On utilise la balise <img> avec l'attribut "src"
• exemples :
  • Image locale

    Code HTML :

    <img src="gif/next.gif"/>
    Dans le navigateur :
    
  • Image externe

    Code HTML :

    <img src="http://w3.uqo.ca/dii/img/uqo/t_ext05.jpg"/>
    Dans le navigateur :
    
  • Image étant un lien

    Code HTML :

    <a href="http://www.uqo.ca/">
      <img src="http://w3.uqo.ca/dii/img/uqo/t_ext05.jpg"/>
    </a>

    Dans le navigateur :
    
• Attributs de la balise <img>
  • src (obligatoire) : l'adresse de l'image
  • alt (obligatoire) : un texte alternatif si l'image n'est pas disponible.
    Utilisé aussi par les visiteurs non-voyants (le chargement des images peut être bloqué; Firefox -> Outils -> Options -> Contenu; IE -> Outils -> options Internet -> Avancé -> Multimédia)
  • title - description de l'image; affichée lorsque le visiteur place le curseur sur l'image
  • width et height - utilisés pour définir la largeur et la hauteur de l'image en pixels.

    Exemple : Code HTML :

    <img src="http://w3.uqo.ca/dii/img/uqo/t_ext05.jpg" width="60" heigth="60" title="Pavillon Alexandre-Taché" alt="UQO" />
    Dans le navigateur :
    

    Si on ne définit pas sa largeur et sa hauteur, l'image sera affichée dans sa dimension réelle.

• Remarque : N'utilisez pas les attributs width et height pour réduire la dimension de l'image. Faites-le avec un logiciel d'édition d'images. Le navigateur doit charger l'image entière.