# Introduction au webdesign/Images
## Préambule

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

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 :
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

D'autres formats, moins connus sont utilisables :

#### Le format MJPEG

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

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

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
| Concepts | Modèle de boîtes |