Introduction au webdesign/Images
Préambule
modifierPour 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
modifierLe format JPEG
modifierCe 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
modifierCe 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
modifierCe 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
modifierD'autres formats, moins connus sont utilisables :
Le format MJPEG
modifierMJPEG 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
modifierMê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
modifierCe 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