[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)

dans la foulée, je souhaiterait que certaines divs ne soient pas chargées du tout
lorsqu'une page est lue sur un smartphone.
une idée?

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

merci. olivier
le srcset est réglé, mais je cherchait aussi s'il y a un moyen de faire la meme chose avec une div, non seulement ne pas afficher une div sur un mobile mais ne pas charger, même invisible.

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)

merci olivier
j'utilisait les bg image et les mediaqueries avant d'utiliser picture/srcset
ca roule.

a part l' image de fond sur la page d'accueil, toutes les autres sont en bien sur en lazyloading.
Modifié par drphilgood (03 Jan 2021 - 14:16)