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.
4 Antworten
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!
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.
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: nonegeladen wird.Wenn sich das Bild im HTML-Tag
imgbefindet, muss der Browser Bilder vom Attributsrcaufrufen. Sie können dies umgehen, indem Siedataverwenden Attribut stattdessen. Wenden Siedataauf alle Bilder an und fügen Siesrcnur 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"));
});
});
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