Um eine möglichst hohe Bildschärfe zu erzielen besitzen aktuelle Smpartphones eine hohe Pixeldichte. Damit Bilder dort entsprechend gut aussehen, benötigen diese eine höhere Auflösung, wie wir sie bei gleicher Größe der Darstellung vom Desktop gewohnt sind. Um jedem Device ein optimales Bild zu liefern und Resourcen nicht unnötig zu verschwenden in dem man immer ein großes Bild ausliefert, bietet sich das, noch recht neue, srcset Attribut des img-Tags an. Im folgen stelle ich dieses kurz vor und zeige wie ich es bisher verwende.
Das srcset-Attribut
Neben dem bekannten src-Attribut, zur Referenzierung eines Bildes, bietet srcset die Möglichkeit beliebig viele Pfade kommasepariert anzugeben. Zudem lassen sich zu jeder Referenzierung Bedingungsangaben hinterlegen:
src="katze.jpg" srcset="katze-2x.jpg 2x, katze-3x.jpg 3x, katze-4x.jpg 4x"
Das tolle ist, wenn ein alter Browser mit srcset nichts anfangen kann, wird weiterhin src genutzt. Moderne Browser auf Smartphones und Tablets, mit hochauflösenden Displays, nutzen in diesem Beispiel ein höher Auflösendes Bild. Die Angaben 2x, 3x und 4x hinter den Bildpfaden beziehen sich auf den Faktor zwischen Pixeldichte des Devices zu CSS-Pixeln. Wenn man wissen möchte welche Pixeldichtefaktoren auf den Devices vorhanden sind, findet auf mydevice.io eine gute Übersicht.
Größere Bilder bringen auch größere Datenmengen mit sich und mobile Devices haben unterwegs nicht immer die beste Verbindung.
Daher kann es ratsam sein nicht alle Qualitätsstufen abzudecken, da ein Bild das 4x größer ist eben auch im Vergleich zur Non-Retina Version rießig ist. Am besten macht man das von der Darstellungsgröße des Bildes und dem Qualitätseindruck beim Testen mit einen echten Device abhängig
Weitere Möglichkeiten auf die ich nicht eingegangen bin
Neben der Bedingung des Pixeldichtefaktors, gibt auch weitere Angaben, unter anderem das bestimmen einer bestimmten Bildschirmauflösung, ähnlich wie bei Media-Queries, diese werden allerdings noch nicht flächendeckend u.a. von iOS8 unterstützt. Zudem hat sich für mich das referenzieren des Pixeldichtefaktors am zweckdienlichsten herausgestellt.
Neben srcset gibt es auch noch das neue Picture-Element. Dieses hat allerdings aktuell noch eine weitaus schlechtere Cross-Browser-Unterstützung und ist zudem semantisch auch dafür gedacht bei verschiedenen Auflösungen z.B. völlig verschiedene Bilder auszuliefern.