Dimensions d'une image HTML
Chacun des blocs suivants est illustré par une photo de Tom,
mais l'image met du temps à être téléchargée ou alors elle n'est pas trouvée.
Observer ce qui se passe en fonction du code utilisé
pour afficher l'image.
Note : Firefox met les images en cache (contrairement à ce qui est demandé dans l'en-tête HTTP…), il faut donc utiliser le rafraîchissement forcé (control-shift-R) pour voir la démo une deuxième fois.
NB : la phrase « Photo de Tom Cruise » est le texte alternatif de l'image.
Image lente, pas de dimensions spécifiées
Le texte bouge pour laisser la place à l'image une fois
celle-ci téléchargée.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
eu mi placerat nisi bibendum aliquam. Donec tellus ex, blandit a lorem sit
amet, interdum commodo nisi. Morbi quis ornare eros. Vestibulum ornare
hendrerit libero at feugiat.
Phasellus dapibus ipsum in felis tempor, ac iaculis odio maximus.
Nulla sit amet posuere tellus. Nam pretium lacus vel ex molestie, a venenatis
velit placerat. Sed quis velit at ex suscipit semper. Suspendisse in arcu
bibendum, accumsan sem a, condimentum neque.
Image lente, dimensions spécifiées
Le navigateur prévoit la place pour l'image, le texte ne bouge donc pas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
eu mi placerat nisi bibendum aliquam. Donec tellus ex, blandit a lorem sit
amet, interdum commodo nisi. Morbi quis ornare eros. Vestibulum ornare
hendrerit libero at feugiat.
Phasellus dapibus ipsum in felis tempor, ac iaculis odio maximus.
Nulla sit amet posuere tellus. Nam pretium lacus vel ex molestie, a venenatis
velit placerat. Sed quis velit at ex suscipit semper. Suspendisse in arcu
bibendum, accumsan sem a, condimentum neque.
Image non trouvée, dimensions non spécifiées
Le texte alternatif est affiché, mais il n'est pas forcément clair (sous Firefox) qu'il devrait y avoir une image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
eu mi placerat nisi bibendum aliquam. Donec tellus ex, blandit a lorem sit
amet, interdum commodo nisi. Morbi quis ornare eros. Vestibulum ornare
hendrerit libero at feugiat.
Phasellus dapibus ipsum in felis tempor, ac iaculis odio maximus.
Nulla sit amet posuere tellus. Nam pretium lacus vel ex molestie, a venenatis
velit placerat. Sed quis velit at ex suscipit semper. Suspendisse in arcu
bibendum, accumsan sem a, condimentum neque.
Image non trouvée, dimensions spécifiées
Le navigateur prévoit la place pour l'image, le texte alternatif de l'image
est mieux séparé du texte normal.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
eu mi placerat nisi bibendum aliquam. Donec tellus ex, blandit a lorem sit
amet, interdum commodo nisi. Morbi quis ornare eros. Vestibulum ornare
hendrerit libero at feugiat.
Phasellus dapibus ipsum in felis tempor, ac iaculis odio maximus.
Nulla sit amet posuere tellus. Nam pretium lacus vel ex molestie, a venenatis
velit placerat. Sed quis velit at ex suscipit semper. Suspendisse in arcu
bibendum, accumsan sem a, condimentum neque.