La balise HTML `img`

Découvrez les bases du travail avec les images et le HTMLimgtag, et comment les rendre réactifs

Les images peuvent être affichées à l'aide duimgétiqueter.

Cette balise accepte unsrcattribut, que nous utilisons pour définir la source de l'image:

<img src="image.png" />

Nous pouvons utiliser un large éventail d'images. Les plus courants sont PNG, JPEG, GIF, SVG et plus récemment WebP.

La norme HTML nécessite unaltattribut d'être présent, de décrire l'image. Ceci est utilisé par les lecteurs d'écran et aussi par les robots des moteurs de recherche:

<img src="dog.png" alt="A picture of a dog" />

Vous pouvez définir lewidthetheightattributs pour définir l'espace que prendra l'élément, afin que le navigateur puisse en tenir compte et qu'il ne modifie pas la mise en page lorsqu'il est complètement chargé. Il prend une valeur numérique, exprimée en pixels.

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

Images réactives utilisantsrcset

LesrcsetL'attribut vous permet de définir des images réactives que le navigateur peut utiliser en fonction de la densité de pixels ou de la largeur de la fenêtre, selon vos préférences. De cette façon, il ne peut télécharger que les ressources dont il a besoin pour rendre la page, sans télécharger une image plus grande si elle se trouve sur un appareil mobile, par exemple.

Voici un exemple, où nous donnons 4 images supplémentaires pour 4 tailles d'écran différentes:

<img src="dog.png"
	alt="A picture of a dog"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

Dans lesrcsetnous utilisons lewmesure pour indiquer la largeur de la fenêtre.

Puisque nous le faisons, nous devons également utiliser lesizesattribut:

<img src="dog.png"
	alt="A picture of a dog"
	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

Dans cet exemple, le(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxchaîne dans lesizesL'attribut décrit la taille de l'image par rapport à la fenêtre, avec plusieurs conditions séparées par une virgule.

L'état des médiasmax-width: 500pxdéfinit la taille de l'image en corrélation avec la largeur de la fenêtre. En bref, si la taille de la fenêtre est <500px, il restitue l'image à 100% de la taille de la fenêtre.

Si la taille de la fenêtre est plus grande mais <900px, il rend l'image à 50% de la taille de la fenêtre.

Et même s'il est encore plus grand, il rend l'image à 800 pixels.

Levw unit of measure can be new to you, and in short we can say that 1 vwest 1% de la largeur de la fenêtre, donc100vwcorrespond à 100% de la largeur de la fenêtre.

Un site Web utile pour générersrcsetet des images de plus en plus petites sonthttps://responsivebreakpoints.com/.

Téléchargez mon gratuitManuel HTML


Plus de tutoriels html: