Cacher les images en fonction de la taille de l'écran et les empêcher de télécharger?

Question

J'essaie d'avoir une image particulière sur de petits écrans et une image différente sur de plus grands écrans. Je sais que cela peut être réalisé avec des requêtes média, mais je suis préoccupé par le téléchargement des deux images, même si l'affichage est défini sur aucune.

Je suis conscient de srcset, mais il n'est pas pris en charge dans IE.

J'ai aussi passé un peu de temps sur Google mais tous les articles sur le sujet semblent avoir 4 ans. Alors, quelle est la méthode moderne pour traiter plusieurs images et les afficher/masquer pour différentes tailles d'écran, sans télécharger les images cachées?

Answer 1

Vous pouvez utiliser un polyfill pour soutenir IE: https://github.com/aFarkas/respimage

Answer 2

vous pouvez définir des images t'en arrière-plan-images de DIVs. Ensuite, vous utilisez des requêtes des médias avec une approche mobile d'abord, comme

.my_div1 { 
    display: none; 
    background-image: none; 
} 
@media screen and (min-width: 768px) { 
    .my_div1 { 
    display: block; 
    background-image: url(image1.png); 
    } 
} 

cette façon l'image ne sera chargée si l'écran est> = 768px.