Vu la multitude de formats d'image existants (BMP, PICT, TIFF, JPEG, GIF, PNG, etc.) on est en droit de se demander lequel est le plus approprié pour un usage sur le web. Il va de soit que ceux qui conviendront le mieux seront ceux qui offriront une qualité d'image maximum pour un encombrement sur le disque minimum.
Trois formats d'images se distinguent particulièrement des autres.
C'est le format idéal pour de grandes images en milliers, voire millions de couleurs. C'est un format dit lossy, c'est-à-dire qui dégrade la qualité de l'image pour la compresser. On peut néanmoins trouver un bon compromis entre compression et qualité.
Ce format est surtout intéressant pour les images de petite taille et/ou avec peu de couleurs. En effet les images en GIF comportent au maximum 256 couleurs. Ces couleurs sont indexées dans une palette, ce qui permet de réduire le poids de l'image par rapport au bitmap où la couleur est redéfinie pour chaque pixel.
Le GIF possède deux énormes avantages :
C'est un format d'image compressé, mais sans pertes de donnés. Souvent méconnu, le PNG est pourtant bien meilleur que le GIF. Il existe en deux versions :
Le PNG-8 est l'exact équivalent du GIF, à savoir qu'il comprend au maximum 256 couleurs, dont une ayant la possibilité d'être transparente. Il ne permet cependant pas de réaliser des animations, en ravanche il est plus léger que son concurrent.
Le PNG-24 quant à lui permet l'utilisation de milliers de couleurs et une
transparence sur 256 niveaux, ce qui évite le désagréable effet de crénealge
des images transparentes binaires.
Gros problème : MSIE ne
gère pas ce format d'image, qui est pourtant la recommandation
du W3C !
Il existe un JavaScript, provenant de http://homepage.ntlworld.com/bobosola,
pour palier ce problème en exploitant
le code propriétaire
d'Internet Explorer, le voici :
<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() {
// correctly handle PNG transparency in Win IE 5.5 or higher.
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:hand;" + 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
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
Cependant cette solution n'est pas pleinement satisfaisante, l'image s'affichant mal (fond bleu-vert au lieu de transparent) jusqu'à ce que soit exécuté le script, c'est à dire une fois la page totalement chargée.
Le JPEG est le format incontournable pour les grandes images, il n'y a plus qu'à attendre que le JPEG 2000 soit implémenté en standard dans les navigateurs et les logiciels de retouche d'images. Le PNG pourrait être l'autre grand format du web si Microsoft décidait de le faire interpréter correctement par son navigateur. Mais vu que la firme de Redmond à décrété que son navigateur était abouti (il n'y aura plus de nouvelle version) on rique de devoir utiliser le GIF encore un bout de temps.