Ich versuche, das neue Attribut 'srcset' von 'img' zu verstehen. Ich habe eine einfache Testseite erstellt, aber das Verhalten, das ich von Browsern sehe, ist überraschend.Stimmt etwas mit meiner srcset-Definition nicht oder ist die aktuelle Browserunterstützung nur schwach?
Zunächst ist hier die Testseite:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test Page</title>
<style type="text/css">
section.wrapper {
width: 100%;
text-align: center;
}
section.wrapper div {
margin: 0 auto;
}
section.wrapper div img {
width: 288px;
height: 216px;
}
@media (min-width: 30em) { }
@media (min-width: 40em) {
section.wrapper div img {
width: 576px;
height: 432px;
}
}
@media (min-width: 48em) { }
@media (min-width: 64em) {
section.wrapper div img {
width: 720px;
height: 540px;
}
}
@media (min-width: 72em) {
section.wrapper div img {
width: 960px;
height: 720px;
}
}
</style>
</head>
<body>
<section class="wrapper">
<div class="imagecontainer">
<img src="images/image-720.jpg"
srcset="images/image-1920.jpg 1920w,
images/image-1440.jpg 1440w,
images/image-1152.jpg 1152w,
images/image-960.jpg 960w,
images/image-840.jpg 840w,
images/image-720.jpg 720w,
images/image-576.jpg 576w,
images/image-420.jpg 420w,
images/image-288.jpg 288w,
images/image-144.jpg 144w"
sizes="(min-width: 40em) 576px, (min-width: 64em) 720px, (min-width: 72em) 960px, 100vw"
alt="Test" />
</div>
</section>
</body>
</html>
Ich bin auf einem Retina MacBook Pro testen und ein Retina iPod, mit Chrom/40.0.2214.115 und Firefox 35.0 (auf dem MacBook Pro) und Chrome/40.0.2214.73 und Safari/600.1.4 (auf dem iPod). Ich habe die srcset-Unterstützung in Firefox aktiviert. Ich teste gerade eine schnelle Verbindung.
Was ich versuche zu sehen ist, ob die verschiedenen Browser intelligent ein Bild in der richtigen Größe erhalten können. Sie verhalten sich jedoch nicht so, wie ich es erwarten würde.
Für die iOS-Browser erwarte ich, dass sie den Ausweichwert '100vw' aus dem Attribut 'sizes' verwenden. Da die Darstellungsfeldbreite für einen iPod im Hochformat 320px beträgt, würde ich davon ausgehen, dass sie entweder das 288px- oder das 420px-Bild verwenden. Oder, möglicherweise, da es ein Retina-Gerät ist, würden sie die Bilder 576px oder 840px anfordern. Stattdessen fordern sowohl Safari als auch Chrome das 1920px-Bild an.
Der Desktop-Firefox-Browser führt zwei Anfragen aus. Die erste ist für das im Attribut 'src' angegebene Standardbild. Die zweite ist für das 1920px-Bild. Es fordert immer das größte Bild an, unabhängig von der aktuellen Fenstergröße.
Desktop Chrome kommt am ehesten dazu, das auszugeben, was ich als korrektes Verhalten bezeichnen würde, obwohl das auch etwas eigenartig ist. Wenn meine Testdatei lokal ist, wird immer das 1920px-Bild unabhängig von der Größe des Darstellungsbereichs erfasst. Wenn ich die Testdatei auf einen Remote-Server lege, zeigt sie eine allgemeine Präferenz für das 1152px-Bild (selbst wenn das Bild bei 960px gerendert werden sollte, was 1920px zur logischen Wahl für ein 2x-Gerät macht). Wenn ich den Cache von Chrome lösche und die Größe des Fensters ändere und dann neu lade, werden manchmal kleinere Bilder angefordert.
Wenn das, was ich sehe, das erwartete Verhalten für diese Browser ist, angesichts des aktuellen Status der Unterstützung jedes Browsers, dann ist es für mich klar, dass ich wahrscheinlich die Bilder mit höherer Auflösung nicht liefern sollte - besser zu dienen Bild, das auf einem 2-fach-Display weniger perfekt aussieht als ein riesiges JPEG über eine möglicherweise langsame Verbindung auf einem mobilen Gerät zu speichern. Und wenn Firefox immer das Standardbild abruft, dann sollte ich das wahrscheinlich eher verkleinern als vergrößern.
Gibt es ein Problem mit meinem Code, der diese Verhaltensweisen verursacht? Und wenn nicht, gibt es aktuelle Best Practices für die Verwendung von srcset, die mit den Eigenheiten der verschiedenen aktuellen Implementierungen zurechtkommen und die Möglichkeiten des Features ausnutzen, ohne dass übermäßig große Bilder heruntergeladen werden?
es ist nicht mein Fall, aber mit class = "img-responsive" in Bootstrap mit srcset über ein Problem zu suchen. Gefunden, dass diese "sizes =" (min-Breite: 40em) 576px, (min-Breite: 64em) 720px, (min-Breite: 72em) 960px, 100vw "' mein Problem lösen. Vielen Dank! – Equiman