Où trouver un tutorial sur les images ?
L'auteur vous propose le chapitre "Les images" dans "Apprendre le langage Html".
Où trouver un tutorial sur les images mapées ou images réactives ?
L'auteur vous propose le chapitre "Les images mapées" dans "Maîtriser le langage Html".
Comment enlever le cadre bleu autour des images servant de lien ?
Assurément la question la plus posée... En ajoutant l'attribut BORDER="0" dans la balise <IMG... >, on enlève ainsi le bord bleu qui entoure par défaut les images sur lesquelles il y a un lien hypertexte. Votre balise image ressemblera alors à :
<IMG SRC="graphic.gif" BORDER=0 height=xx width=yy alt="texte alternatif">
Comment choisir entre le format gif ou jpeg ?
Les critères de choix sont la qualité de l'image et la taille en bits. Il ne vous en coûtera pas grand chose de faire un essai dans l'un et l'autre format. Cependant, l'expérience dégage les règles suivantes ;
- pour les petites images comme des icônes et des boutons, le format GIF.
- pour les logos, cliparts ou autre images dessinée par ordinateur, le format GIF.
- pour les photographies ou images scannées, le format JPEG.
- pour les grandes images ou images avec beaucoup de nuances, le format JPEG.
Quelle est la différence entre le format gif version 87a et version89a ?
Le premier format GIF utilisé sur le Web s'appelait GIF87a qui représentait l'année et la version. En 1989 sortit une version plus sophistiquée qui incluait les possibilités d'animation d'images, de transparence de couleur et d'effet d'entrelacement. Ce format prit le nom de (vous l'aurez deviné) GIF89a. C'est ce dernier que l'on utilise le plus fréquemment.
On parle parfois d'images ou de format Compuserve. De quoi s'agit-il ?
Le format GIF pour "Graphic Interchange Format" a été standardisé en 1987 par Compuserve même si la licence pour l'algorithme de compression appartient maintenant à Unisys. Compte tenu de son excellente qualité et son taux de compression performant, ce format fut vite adopté pour le transfert des images par les autres réseaux.

De nombreux outils graphiques appellent d'ailleurs encore ce format "GIF - Compuserve" ou "Compuserve Graphics Interchange".

Qu'est-ce que la transparence ?
La transparence est une des propriétés du format GIF 89a qui peut rendre transparente une (et seulement une) des 256 couleurs de la palette de l'image. Cette couleur rendue transparente prendra alors la couleur de l'arrière-plan.

Cette possibilité de transparence est fournie par les outils graphiques comme Adobe Photoshop ou Paint Shop Pro pour ne citer qu'eux.

Qu'elle est la différence entre une image gif entrelacé et non-entrelacé ?
Une image non-entrelacée ne s'affiche que lorsque elle est entièrement téléchargée. Ce qui, étant donné la qualité de la connexion, peut prendre un certain temps. Une image entrelacée s'affiche de façon progressive par balayages successifs, d'abord de façon sommaire puis de façon de plus en plus détaillée. Ce qui crée l'illusion d'un affichage plus rapide. Le temps de chargement est en effet identique.

Cet effet progressif dû aux images entrelacées passera inaperçu avec des fichiers dont la taille est inférieure à 3KB. Il est donc inutile pour les boutons, traits et autres petites icônes. On le réservera donc pour les images d'une certaine taille.

Comment sont réalisées les images animées ?
Une gif animée est composée des plusieurs images que l'on fait défiler à une vitesse déterminée, un peu comme un dessin animé.

Il existe plusieurs petits programmes qui permettent de réaliser ses propres animations. Citons Animation Shop inclus dans Paint Shop Pro 5 et plus et Ulead Gif Animator.

Vaut-il mieux utiliser le code hexadécimal ou le nom pour définir une couleur ?
Les navigateurs récents (Netscape 3 et + et Explorer 4 et +) reconnaissent indifféremment les couleurs par leur nom ou leur code hexadécimal. Seuls des navigateurs de la génération précédente (et ils commencent à se faire rares), nécessitent encore le codage hexadécimal. Pour éviter tout problème de compatibilité et pour la pureté du code Html, certains (dont l'auteur) préfèrent malgré tout encore le codage hexadécimal.

Dans le même ordre d'idée, le # du codage hexadécimal #RRGGBB est devenu facultatif pour les navigateurs récents. Il vaut mieux garder le code classique pour éviter toutes surprises.

Où trouver une liste avec le code hexadécimal et des noms de couleurs ?
Dans "Apprendre le langage Html", vous trouverez dans les annexes, une liste de couleurs avec leur code hexadécimal et une liste de noms de couleurs.
Au lieu de mes images, le navigateur affiche les icônes suivantes. Pourquoi ?
Au lieu de vos jolies images, vous trouvez ou . La raison en est simple. Le navigateur n'a pas trouvé votre image. Vérifier le code de votre balise, le nom du fichier image, l'emplacement de celle-ci et l'URL utilisée.

Pour rappel, il est tellement plus pratique de mettre toutes les images d'un site dans le même répertoire que celui-ci.

A quoi sert l'attribut ALT dans la balise image ?
L'attribut ALT="..........." est un petit commentaire associé à une image destiné aux navigateurs non-graphiques et pour les internautes qui ont désactivé l'affichage des images.

Microsoft Explorer a eu la bonne idée d'afficher le texte associé à l'attribut ALT dans une petite infobulle.

L'attribut ALT bien que facultatif, donnera le look "professionnel" à votre page.

Comment accélérer l'affichage des images sur ma page ?
Vaste sujet que celui-là... Voici quelques conseils ou trucs qui se révéleront utiles :
    • les attributs height et width de l'image sont quasi indispensables.
    • votre image a-t-elle bien été redimensionnée à la dimension de votre page.
    • une grande image est-elle vraiment indispensable pour le contenu de votre propos. Une partie de celle-ci ne serait-elle pas tout aussi explicite.
    • votre image gif n'est-elle pas de qualité équivalente en 16 couleurs plutôt qu'en 256 couleurs ?
    • votre image jpeg n'est-elle pas de qualité équivalente avec un taux de compression de 20% ?
    • n'oubliez pas que lorsqu'une image a été chargée, elle est présente dans le cache du navigateur. Elle s'affichera dans les autres pages de votre site de façon instantanée.
    • avez-vous songé qu'il est possible de précharger les images (voir plus moins dans la FAQ).

Je voudrais afficher une image dans le coin supérieur gauche sans les marges ?
Ajoutez dans la balise <BODY> les attributs suivants : marginwidth="0" marginheight="0" leftmargin="0" topmargin="0". Si cette image fonctionne comme lien, n'oubliez pas de mettre BORDER="0" dans la balise <IMG>.
A quoi correspondent ces fameuses "216 safe colors" ?
Lorsqu'un visiteur visionne une page avec une résolution graphique en 256 couleurs (et uniquement dans ce cas), il y a un fort risque de déformation des couleurs de l'image. En effet dans la palette des 256 couleurs, seulement 216 sont communes aux différents systèmes d'exploitation (windows, Macintoch, etc). Les couleurs restantes sont soit utilisées par le système soit différentes. Les pros du Web et des graphiques encodaient leurs images avec une palette de couleurs sûres [safe colors] de 216 couleurs.

Avec l'évolution des cartes graphiques et l'affichage en 16 ou 24 bits, ce problème est de moins en moins d'actualité.

Vous pouvez en savoir plus en consultant une page du même auteur consacrée à la compatibilité des graphiques.

Comment faire pour précharger les images ?
Que ce soit avec du Javascript ou en passant par des frames invisibles, il existe plusieurs solutions pour précharger des images.
J'ai vu une image qui changeait au passage de la souris. Comment faire ?
Avec du Javascript, il est possible de concevoir une image qui change au passage de la souris. Voici un exemple de script à utiliser.