Introduction au webdesign/Images

**Images**
Leçon : Introduction au webdesign

Chapitre n^o 3
Chap. préc. :	Concepts
Chap. suiv. :	Modèle de boîtes

En raison de limitations techniques, la typographie souhaitable du titre, « Introduction au webdesign : Images
Introduction au webdesign/Images », n'a pu être restituée correctement ci-dessus.

Préambule modifier

Pour habiller les pages web, on utilisera des images. Il existe 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 1 Mo 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.

Les formats d'images modifier

Le format JPEG modifier

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 propriétaire ne permet pas la transparence.

Extensions : .jpeg .jpg .jpe

Voir la page Wikipedia pour JPEG

Le format GIF modifier

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

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.

Extensions : .gif

Voir la page Wikipedia pour GIF

Le format PNG modifier

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 être 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érez JPEG.

Ce format est un format libre.

Internet Explorer Windows 5.5 et 6.0 exigent des mesures particulières pour le traitement des zones semi-transparentes d'une image PNG (faute de quoi, ces zones sont affichées avec une couleur opaque). Le traitement de ces images nécessite en effet :

soit le détour par l'extension CSS filter pour les images d'arrière-plan CSS.
soit l'utilisation, pour les images de contenu HTML, d'un JavaScript 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 = "<span " + imgID + imgClass + imgTitle
          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
          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®.

Ce problème est corrigé à partir de la version 7.0 d'Internet Explorer.

Le format PNG, qui est libre, 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...

Extensions : .png

Voir la page Wikipedia pour PNG

Autre formats modifier

D'autres formats, moins connus sont utilisables :

Le format MJPEG modifier

MJPEG pour Motion JPEG est un format vidéo composé d'une suite d'image JPEG. Ce format est utilisé notamment par les caméras de surveillance sur IP ou les appareils photos numériques.

Extensions : .mjpeg, .mjpg

Voir la page Wikipedia pour MJPEG

Les formats MNG et APNG modifier

Même principe que pour le MJPEG : le MNG et APNG sont une suite d'images au format PNG.

Le format MNG est officiellement supporté uniquement par Konqueror. Le format APNG est quant à lui supporté par Mozilla et les navigateurs Gecko (comme Firefox, par exemple)

Extensions : .mng et .apng ou .png

Voir la page Wikipedia pour MNG Voir la page Wikipedia pour APNG

Le format SVG modifier

Ce format est un "alien" dans le monde de l'image. C’est un format libre d'images vectorielles défini dans un fichier XML.

Ce format peut aussi intégrer une feuille de style et permet alors toutes les possibilités permises par CSS.

Les navigateurs Gecko (Mozilla, Firefox...) supportent nativement le SVG, pour Internet Explorer il faut utiliser un module complémentaire.

Extension : .svg

Voir la page Wikipedia pour SVG

Introduction au webdesign

Concepts

Modèle de boîtes