Wie lade ich das Bild nur für die mobile Version der Site herunter?

Question

In der mobilen Version meiner Website habe ich ein anderes Bild des Hauptrezepts, Größe = 70KB, und ich möchte das Bild nur für die mobile Version heruntergeladen, wie es geht? Ich habe diese Lösung gemacht, vielleicht hat jemand eine bessere Lösung? scr 60B Pixel für die Validierung alt = hold alt + 255

https://satoriq.github.io/Lemon-Recipes/ -Ort für die Überprüfung Downloads

<picture> 
     <source media="(max-width: 425px)" 
      srcset="img/main-recipe-mobile.jpg"> 
     <img class="main-recipe__mobile" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt=" "> 
</picture> 

Answer 1

Da Sie nicht mit Hilfe von JavaScript Ich denke, die beste Lösung ist wie folgt:

<style> 
    .desktop {display: block;} 
    .mobile {display: none;} 
    @media (max-width: 425px) { 
    .desktop {display: none;} 
    .mobile {display: block;} 
    } 
</style> 
<figure> 
    <figcaption>FIGURE CAPTION TEXT</figcaption> 
    <img class="desktop" src="desktop.jpg" alt="alternative text for desktop" /> 
    <img class="mobile" src="mobile.jpg" alt="alternative text for mobile" /> 
</figure> 

PS: Ich habe den Bild-Tag in Abbildung geändert, um die empfohlene figcaption hinzuzufügen. Sie können es zurück zum Bild ändern, wenn Sie bevorzugen.

Good Luck und Sie können mehr über Media Queries lesen Sie hier: https://www.w3.org/TR/css3-mediaqueries/