[Résolu] Affichage de la petite ou grande image

bonjour,
2 méthodes pour charger une image selon la taille du viewport
avec srcset ou mediaqueries et display
y a t'il une préférence? les 2 fonctionnent.

<picture>
	<source media="(min-width: 1200px)" srcset=”grandeimage.jpg">
	<img src=”petiteimage.jpg" alt="" class="imgfond">
</picture>

ou

<div>
	<img src=”petiteimage.jpg" alt="" class="imgfond">
	<img src=”grandeimage.jpg" alt="" class=”imgfond”>
</div>

+ css mediaqueries display none ou inline sur la classe selon la taille de la fenetre

merci raphael
je croyais qu'en display none l'image n'était pas chargée puisqu'elle n'occupe pas de place,
alors que invisibility hidden occupe son espace.
je vais modifier là ou j'avait utilisé la 2eme méthode et utiliser srcset.
Modifié par drphilgood (02 Jan 2021 - 19:40)

j'ai trouvé ici pour une image
https://forum.alsacreations.com/topic-1-85426-1-Charger-une-image-sur-desktop-mais-pas-sur-Mobile.html

mais je voudrais la même chose pour une div

merci
Modifié par drphilgood (02 Jan 2021 - 19:58)

Salut,

Voici un exemple avec srcset : CodePen

Et pourquoi une div ? Je ne comprends pas l'intérêt.

Eventuellement si les srcset ne conviennent pas, on peut aussi passer les images dans un media querie avec des valeurs min-width et max-width, et il me semble que c'est optimisé pour éviter un chargement si pas nécessaire :

/* exemple : */
@media screen and (max-width: 36.01rem) {
  #welcome {
    background-image: url(image1.jpg);
  }
}
@media screen and (min-width: 36.01rem) and (max-width: 65.01rem) {
  #welcome {
    background-image: url(image2.jpg);
  }
}
@media screen and (min-width: 65.01rem) {
  #welcome {
    background-image: url(image3.jpg);
  }
}

Sinon tu peux tenter un display:none sur ta div, comme tu avais prévu, mais avec aussi un loading="lazy" sur les images. Alsacréations en parlais récemment : Chargement différé des images avec loading="lazy"
Modifié par Olivier C (03 Jan 2021 - 12:34)