Ich entwerfe eine reaktionsfähige Site mithilfe von Medienabfragen, um das Layout zu ändern, wenn sich die Größe des Ansichtsfensters ändert.

Für Handys halte ich es für vorteilhaft, ein Bild mit niedrigerer Auflösung zu verwenden, um Ladezeiten und Bandbreite für Seiten zu sparen.

Wie würde ich das Bild mit hoher Qualität deaktivieren und es mithilfe von CSS durch das Bild mit niedrigerer Qualität ersetzen?

Vielen Dank.

11
user2827048 23 Aug. 2015 im 00:36

4 Antworten

Beste Antwort

Mit dem HTML5-Element picture können Sie Inline-Medienabfragen angeben, um die Größe Ihrer Bilder zu bestimmen:

<picture>
 <source srcset="sm.png" media="(max-width: 400px)">
 <source srcset="mid.png" media="(max-width: 800px)">
 <source srcset="lg.png">
 <img src="lg.png" alt="MDN">
</picture>

Das Element wird ordnungsgemäß verschlechtert, um das Bild-Tag in Browsern anzuzeigen, die es nicht unterstützen.

Lesen Sie mehr über das picture -Element in MDN .

eine JS-Polyfüllung für den Fall, dass der Fallback des img -Tags nicht ausreicht!

18
Maximillian Laumeister 23 Aug. 2015 im 17:20

Sie können Ihre CSS-Tabellenkalkulationsdatei entwickeln, indem Sie für große Bilder in der mobilen Ansicht keine Anzeige hinzufügen. Die neuen mobilen Browser laden keine großen Bilder, wenn sie in CSS Anzeige: keine enthalten, sodass die Seite schneller und auch geladen werden kann Das Hinzufügen einer Anzeige für kleine Bilder in der Desktop-Ansicht führt dasselbe aus.

0
Jason VanHil 22 Aug. 2015 im 22:07

Zum Zeitpunkt dieses Schreibens hat das picture -Element praktisch keine Browserunterstützung.

Hier sind zwei Alternativen:

  • Wenn das Bild aus dem CSS stammt, können Sie verhindern, dass es mit display: none geladen wird.

  • Wenn sich das Bild im HTML-Tag img befindet, muss der Browser Bilder vom Attribut src aufrufen. Sie können dies umgehen, indem Sie data verwenden Attribut stattdessen. Wenden Sie data auf alle Bilder an und fügen Sie src nur hinzu, wenn Sie sie laden möchten.

HTML

  <img data-src="http://i.imgur.com/60PVLis.png" height="100" width="100" alt="">

JS

  $(document).ready(function() {
       $(this).find('img').each(function() {
         $(this).attr("src", $(this).data("src"));
       });
    });
3
Michael_B 28 Juli 2019 im 15:49

Es ist ganz einfach: Erstellen Sie ein anderes Bild mit geringerer Auflösung und fügen Sie es in Medien ein Anfragen.

Mithilfe von Medienabfragen können Sie Elemente basierend auf Bildschirmauflösung und Medientyp ausblenden und anzeigen.

Eine großartige Ressource wäre dieser Artikel über Medienabfragen auf CSSTricks, die verschiedene Geräte, Plattformen und res abdecken

-1
Praveen Puglia 24 Aug. 2015 im 06:21