1427 sujets

Web Mobile et responsive web design

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
Administrateur
Hello,

La seconde solution est à éviter car le navigateur chargera les deux images inutilement pour n'en afficher qu'une seule.
Meilleure solution
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?
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)