Introduction au webdesign/Images

Pour habiller les pages web, on utilisera des images. Il existes certaines contraintes vis à vis des images, celles-ci selon leur but, devront avoir :

• une certaine résolution : de 72 à 96 ppp afin d'avoir un affichage fin
• un certain poids : une image de 1Mo n'est pas viable pour un habillage : c'est beaucoup trop lourd à télécharger. Privilégiez donc des images à "petit poids" pour un affichage plus rapide
• un certain format : JPEG, GIF et PNG sont les seuls formats à utiliser (on pourra utiliser le SVG dans certains cas très précis). Les formats tels que BMP, TGA, ou RAW sont à proscrire : les navigateurs ne les afficheront pas, ou mal.

Le format JPEG

Ce format est un format bitmap compressé avec perte.

Il est idéal pour des photos et fonds de pages, cependant, la compression détruit les détails de l'image, donc il faut trouver le bon compromis entre la légèreté de l'image et sa définition.

Ce format ne permet pas la transparence et est un format propriétaire.

Extensions : .jpeg .jpg .jpe

Voir la page Wikipedia pour JPEG

Le format GIF

Ce format est un format bitmap à couleurs indexées avec perte sur la couleur.

L'image est stockée sous la forme d'un tableau de pixels faisant référence à une palette de couleurs comportant un maximum de 256 teintes différentes.

Ce format propriétaire permet la transparence fixe (une seule couleur transparente) et les petites animations.

Extentions : .gif

Voir la page Wikipedia pour GIF

Le format PNG

Ce format est un format bitmap à couleurs indexées sans perte.

Le principe est le même que pour le GIF sauf que :

• le nombre maximal de couleurs est de 48 bits, soit 2⁴⁸ ou 281 474 976 710 656 couleurs.
• la transparence est une transparence d'alpha : Plusieurs couleurs peuvent êtres transparentes ou semi-transparentes (translucides)
• le fichier est compressé : les données du fichier sont compressées comme un fichier ZIP ce qui permet de réduire la taille des fichiers.

L'image est stockée sans perte de précision ni de couleurs, avec des zones semi-transparentes, mais au delà d'une certaine taille, le poids de l'image est conséquent. Pour des photos destinées seulement à être affichées sur un écran, préférer JPEG.

Ce format est un format libre.

Attention ! Internet Explorer souffre d'un bug d'affichage de la transparence des PNG. L'image transparente sera affichée sur un fond beige. Pour palier à cela, on peut utiliser [[Javascript|] en plaçant dans l'entête du document (X)HTML un script du type :

function correctPNG() {
  for(var i=0; i<document.images.length; i++) {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:pointer;" + imgStyle 
         var strNewHTML = "" 
         img.outerHTML = strNewHTML
         i = i-1
     }
  }
}

if (navigator.appName.substring(0, 3) == "Mic") window.attachEvent("onload", correctPNG);

Ce script recherche toutes les balises images (img) et les remplace par un "span" ayant les mêmes dimensions et le même comportement mais en lui appliquant un filtre activeX®.

On peut donc utiliser le format PNG avec transparence pour les illustrations mais pas pour les fonds d'objets, ce qui est dommage car ce type de transparence offre beaucoup de possibilités artistiques.

Le format PNG peut, en outre, contenir d'autres données que les données propres à l'image. Cette technique est utilisée par le logiciel Fireworks® de Macromedia™/Adobe™ pour stocker des informations sur les chemins, calques...