Techniken für kontextspezifische Bilder

Einer der Nachteile der ausschließlichen Verwendung von CSS-Media-Abfragen als alleiniges Mittel für eine mobile Lösung besteht darin, dass dieselben Inhalte sowohl an Desktop-Browser als auch an mobile Geräte ausgeliefert werden (die theoretisch langsamer sind und über weniger Netzwerkgeschwindigkeit verfügen).

Das Ausliefern desselben HTMLs an beide… nicht so schlimm. Das Ausliefern von Bildern, die um ein Vielfaches größer sind, als sie auf Mobilgeräten benötigt werden, das ist eher ein Problem. Eine Reihe kluger Leute hat versucht, dieses Problem zu lösen, daher wollte ich ihre Arbeit hier hervorheben:

Der CSS3-Weg

Obwohl diese Methode von Nicolas Gallagher aktuell in keinem Browser funktioniert, halte ich sie für meine Lieblingsmethode. Sie setzen das kleinste Ihrer Bilder als Standardquelle und listen dann die URL-Pfade zu größeren Versionen in HTML5-Datenattributen auf.

<img src="image-mobile.jpg"
     data-src-desktop="image-desktop.jpg"
     alt="">

Dann verwenden Sie CSS-generierten Inhalt, um die Grafik durch eine größere zu ersetzen, über Media-Abfragen, wenn die Bildschirmbreite dies als Desktop anzeigt.

@media (min-width: 1024px) {
    img[data-src-desktop] {
        content: attr(data-src-desktop, url);
    }
}

Selbst die aktuelle Entwicklungsversion des CSS-Standards, die stark von der Originalversion gekürzt wurde, behält diese Fähigkeit bei.

Nicolas beschreibt die potenziellen Nachteile in seinem Artikel klar und deutlich. Ich bin der Meinung, dass jedes dieser Probleme mit zukünftiger Technologie gelöst werden kann.

Der JavaScript-Weg

Während der oben genannte CSS3-Weg derzeit theoretisch ist, ist diese JavaScript-Technik von Scott Jehl von Filament Group einsatzbereit (wenn auch noch experimentell).

Diese Technik ist tatsächlich eine Kombination aus JavaScript, HTML und .htaccess (also nur für Apache-Server). Die Readme-Datei erklärt es am besten.

Sobald rwd-images.js geladen ist, testet es die Bildschirmbreite. Wenn sie groß ist, fügt es ein BASE-Element in den Kopf Ihrer Seite ein und leitet alle nachfolgenden Bild-, Skript- und Stylesheet-Anfragen über ein fiktives Verzeichnis namens „/rwd-router/“ weiter. Wenn diese Anfragen den Server erreichen, ermittelt die .htaccess-Datei, ob es sich um ein responsives Bild handelt oder nicht (hat es einen ?full-Abfrageparameter?). Sie leitet responsive Bildanfragen sofort zu ihrer vollen Größe weiter, während alle nicht-responsiven Bildanfragen über eine URL-Umschreibung, die das Segment „/rwd-router/“ ignoriert, an ihr richtiges Ziel gehen.

Der Cookie-Weg

Keith Clark hat eine Methode, um einen Cookie zu speichern, der die Bildschirmgröße des aktuellen Geräts enthält. Dieser Cookie kann vor dem Ausliefern von Bildern getestet und verwendet werden, um zu entscheiden, welche Größe ausgeliefert werden soll.

Es funktioniert, indem ein Cookie mit den Bildschirmabmessungen gesetzt wird.

document.cookie = "device_dimensions=" + screen.width + "x" + screen.height; 

Dann werden Bilder tatsächlich durch ein einfaches Skript geleitet. Der Dateiname ist ein Parameter.

<img src="images/?test.png">

Das Skript liest den Cookie und liefert das passende Bild. Das vollständige Beispiel finden Sie im vollständigen Artikel.

Andere?

Haben Sie andere Projekte gesehen, die versucht haben, dieses Problem anzugehen? Ich würde diesen Artikel gerne mit den besten Methoden aktuell halten.