Responsive Images mit ’srcset‘

Bilder und Grafiken für Webbrowser in den geeigneten Maßen bereitzustellen ist spätestens seit der Einführung von Retina-Displays nicht mehr ganz so einfach wie früher. Es gibt zwar auch hier unterschiedliche Lösungen, allerdings sind diese oft auch mit Nachteilen verknüpft. Bspw. könnte mit JavaScript abgefragt werden, ob das aktuell verwendete Display eine hohe Pixeldichte hat und demnach ein hochauflösendes Bild bereitstellen. Bis das JavaScript fertig geladen ist passiert dann aber erst einmal gar nichts oder es wird zuerst das niedrig aufgelöste Bild geladen, was wiederum erhöhten/unnötigen Datenverbrauch bedeutet.

Dann gibt es da noch das neue HTML-Element <picture>, welches aktuell nur von wenigen Browsern unterstützt wird (Google Chrome 39+, Mozilla Firefox 38+). Das srcset-Attribut im IMG-Element hingegen wird, wenn auch nur teilweise, auch vom Safari unterstützt. Der Internet Explorer Edge wird dies ebenfalls unterstützen. Für ältere Webbrowser gibt es aber auch hier einen Polyfill namens PictureFill.

So sieht die Syntax aus:

Für schnelle responsive Grafiken mit einfacher Syntax reicht das srcset-Attribut vollkommen aus. Wird es komplexer hilft dann wohl nur das <picture>-Element oder doch JavaScript.

Weitere Informationen

Weiterempfehlen: