サイトのモバイル版のみのイメージをダウンロードするには？

Question

私のサイトのモバイル版には、メインレシピの別の写真があります。サイズは70KBです。そのイメージはモバイル版のみでダウンロードしたいのですが、どうすればいいですか？私はこの解決策を作った、誰かがより良い解決策を持っているのかもしれない？検証ALT =ホールドALT + 255

https://satoriq.github.io/Lemon-Recipes/ -siteため のSCR 60Bピクセルダウンロード

<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

をチェックするためのJavaScriptを使用していないので、私は最善の解決策は次のようだと思う：

<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： おすすめのfigcaptionを追加するために、画像タグをfigureに変更しました。あなたが好きなら、それを画像に戻すことができます。

幸運と、あなたはここでメディアクエリの詳細を読むことができます： https://www.w3.org/TR/css3-mediaqueries/