php-homepage.com

Responsive Images und Responsive Design

direkt zur Lösung

Vorgeschichte und Problematik zu responsiven Bildern:

Kaum hat sich mit Html5 und CSS3 ein befriedigender Standard in Sachen modernem Webdesign etabliert,
wurden nun alle Webseiten mittels media queries oder ähnlichen Techniken angepasst. (Responsive Design)

Schon taucht die nächste Hürde am Horizont auf:
Responsive Images bzw. Adaptive Images, (je nach verwendeter Technik) sind zwar nichts Neues, müssen aber aufgrund der aktuellen technischen Entwicklung neu überdacht werden.

Einbinden von Responsive Images

Die high dpi bzw. Retina Display Problematik, Skalierungen und Responsive Webdesign

Vorbei die schönen Zeiten, wo man sich als Webdesigner noch darauf verlassen konnte, dass ein CSS Pixel einem Gerätepixel entspricht...
Apple hat es mit dem (Marketing-)Begriff Retina Display vorgemacht. Auch wenn mittlerweile alle namhaften Hersteller von Displays
- ob Smartphone-screen, tablet, Notebook oder dem klassischen PC-Monitor -
hochauflösende Anzeigegeräte am Markt haben, so hat sich der Begriff Retina schon in den (Webdesign-) Alltag integriert.

Wenn also von hochauflösenden (high dpi) Displays die Rede ist, schließt das Geräte aller Hersteller mitein.

Wo liegt nun aber das Problem?

Wenn man sich an die Vorgaben von Responsive Design gehalten hat,
interessiert es erstmal wenig, welche Bildschirmauflösung, welche Pixeldichte und Zoomfakter die jeweiligen Besucher unserer Webseite verwenden.
Inhalte inklusive Texte skalieren ja mit der Auflösung und den jeweiligen Einstellungen auf Benutzerseite mit.
Nur leider verhält es sich bei Bildern etwas anders (von .svgs mal abgesehen):

Bilder auf high dpi Displays

Ausgangslage:
Wurden noch vor einiger Zeit Grafiken bzw. Fotos auf Websites eingebunden, so verwendete man oft thumbnails, sprich kleinere Vorschauversionen.
Einerseits, um die Ladezeiten gering zu halten, andererseits beanspruchte ein Foto mit etwa 800 oder 1024 Pixeln Breite die gesamte Breite des Bildschirms.
Also generierte man mittels Plugins im CMS mehr oder weniger automatisch kleinere Vorschaubilder von 120-320 Pixeln Breite, die die Seite interessanter und anschaulicher gestalten sollten,
ohne den eigenlichen Inhalt zu überlagern.
Üblich war es, die hochauflösende (größere Version) des Bildes mit dem Voschaubild zu verlinken und somit klickbar (clickable) zu machen.
So konnte der Besucher selbst entscheiden, ob er sich die Grafik oder das Foto in voller Größe ansehen will.
(und dementsprechend große Bilddateien lädt)

Unscharfe Bilder auf high dpi Displays

Da aber ein - sagen wir 240 Pixel breites Bild - auf einem 5 Zoll Smartphone-Display mit 1080 Breite (Full HD)
winzig erscheint, dachten die Hersteller es wäre besonders klug, die Bilder einfach hochzuskalieren.

Wie wir ja alle wissen, bzw. wussten ist ein CSS Pixel auch ein Bildpixel sowie ein Pixel auf dem Bildschirm.
Tja, das war einmal, mittlerweile sind die Bildschirme so hochauflösend und ergo die Pixeldichte so hoch, dass man die einzelnen Pixel
bei üblichem Betrachtungabstand nicht mehr sieht.
Ein Thumbnail in der klassischen Größe von 320x240 Pixel erscheint also auf einem hochauflösenden Screen physikalisch sehr klein,
zwar überaus scharf, aber auch sehr klein und teilweise unkenntlich.

Skalierung auf high-dpi Displays bzw. Retina Displays

Damit die Bilder eben nicht so klein und schwer erkennbar erscheinen, gingen die Geräte- sowie Softwarehersteller dazu über
Inhalte automatisch zu skalieren, damit diese eine leserliche Größe am Display erreichen.
Anmerkung: physische und virtuelle Pixel

Skaliert man ein 320x240 Pixel großes Foto aber um Faktor 2 auf 640x480 vervierfacht sich die Gesamtpixel-Anzahl.
Das Foto (Vorschaubild) hat aber nur Bildinformation für 320x240 Pixel, also wird der Rest "erfunden",
sprich aus 1x1 Pixel werden 2x2 indem die Skalierung einfach für jedes (CSS-) Pixel 4 physikalische Pixel des Displays verwendet.
=> die Qualität leidet teilweise enorm und Bilder werden unscharf.

4k - 5k Displays(!)

Die gleiche Problematik ergibt sich bei 4k (Ultra HD) 5k usw. Displays, wie sie aktuell schon bei vielen Monitoren zur Anwendung kommt. Auch hier wird entweder über das Betriebssystem und/oder den Browser skaliert, damit die ursprünglich für Full HD erstellten Inhalte
eine leserliche Größe erreichen. Dadurch leidet die Bildschärfe.
Ein Horror für Webdesigner, da sich hier kaum mehr kontrollieren, bzw.
einschätzen lässt, wie die Webseiten schlussendlich auf den unzähligen unterschiedlichen Geräten angezeigt werden.

Lösungsansätze für unscharfe Bilder, Grafiken und Fotos auf high dpi Displays

Noch immer nicht optimal gelöst ist die Problematik von responsive/adaptive images im Responsive Webdesign,
da tauchen schon wieder neue, na ich will es jetzt mal "Unschönheiten" nennen:-), auf.

18.03.2017
aus aktuellem Anlass habe ich das srcset Attribut nochmal einer Testreihe unterzogen.
Und siehe da, es gibt eine Lösung

Möglichkeiten, unscharfe Bilder auf Retina bzw. High DPI Displays zu vermeiden:

Oft braucht man aber Screenshots oder Fotos, man könnte diese zwar in .svg umwandeln.(etwa mit Inkscape)
Auf den ersten Blick mag dies etwas unsinnig erscheinen, erhöht sich doch dadurch die Dateigröße.
Dafür spart man sich aber mehrere .jpg oder .png Versionen des Fotos, die man aufwändig mittels media queries oder per Javascript einbinden müsste.

UHD Screenshot vom Desktop
"thumbnail" responsive als svg eingebunden

Einbinden verschiedener Bildgrößen für high dpi displays (auch Retina)

Picture Element

Relativ neu ist das "picture"-Element, hier stellt man Bilder in verschiedenen Auflösungen bereit
und bindet diese mitttels media Abfrage und "srcset" ein. Im folgenden Beispiel binde ich Bilder in den Auflösungen 320 (Standard), 720 und 1024 ein.
Einfach browserfenster verkleinern bzw. vergößern,
das Bild ändert sich und passt sich der jeweiligen Fenstergröße an! responsive-images

code:

<picture>
  <source media="(min-width: 1024px)" srcset="/images/responsive1024.jpg">
  <source media="(min-width: 720px)" srcset="/images/responsive720.jpg">
  <img src="responsive.jpg" alt="responsive-images" style="width:auto;">
</picture>

Hier wird das neue <picture>-Tag in Verwendung mit media querries
genutzt, um bei bestimmten Auflösungsschritten (breakpoints) unterschiedliche Bildgrößen einzubinden.

Zu bemerken ist nur, dass man die Schritte von der größten zur kleinsten Auflösung angibt.
Zusätzlich könnte man mittels (orientation: portrait) bzw. (orientation: landscape)
noch den Porträt- und Landscape Modus abfragen.

Das picture Element wird derzeit leider noch nicht von allen browsern richtig umgesetzt!
Anmerkung: Das picture-tag zwingt den Browser das unter srcset=... angebotene image zu verwenden,
während er im klassischen img-tag (in Verbindung mit srcset) die Auswahl unter der mit ...w (width)
selbst trifft. Was überraschenderweise wunderbar funktioniert!!!

Die ultimative Lösung für Responsive Images im Responsive Webdesign

Das klassische <img>-tag <img src="... bietet auch älteren Browsern ohne srcset-Unterstützung ein unverändertes fallback an.
Zusätzlich kann man mit den einzelnen srcset Attributen beliebig viele unterschiedliche Bildgrößen einbinden.
Hier ist für jeden das optimale Ergebnis aus Bildqualität und Dateigröße erzielbar!

srcset mit klassischem img-tag:

Browserfenster vergrößern/verkleinern und die jeweils optimale Grafik wird angezeigt, eventuell refreshen:

responsive image demo

Code:

<img src="/images/2017/responsive-300.png"
                     srcset="/images/2017/responsive-300.png 300w,
                     /images/2017/responsive-640.png 640w,
                     /images/2017/responsive-1280.png 1280w,
                     /images/2017/responsive-2560.png 2560w"
                     sizes="60vw"
                     alt="responsive image demo">

Zusätzlich gibt es noch die describtors "width", "sizes" und "density":

  • width w (320w, 720w, 1024w) - wie die breakpoints in meinem Beispiel;
    die width ist natürlich frei wählbar

  • <sizes="(min-width:1024px) 33%, (min-width:720px) 50%, (min-width:320px) 33%">
    sizes funktioniert nur in Verbindung mit width w

  • srcset="image.jpg, image-2X.jpg 2x"
    wie sie oft für retina displays verwendet werden (pixel density ratio)
    pixel density ratio darf nicht zusammen mit w verwendet werden und ist auch nicht nötig, wie die Lösung unten zeigt!

So kann man mittels media conditions bestimmte Prameter des Anzeigegrätes ermitteln und das passende Bild liefern.
media conditions sind Teil der media queries, wie wir sie seit css3 kennen.
(min-width:, max-width:, orientation:, usw.)

Klingt kompliziert? Ja, scheint auf den ersten Blick so:-) Aber es funktioniert wunderbar und löst alle Probleme mit Skalierung usw.
Man muss natürlich nicht immer alle Attribute angeben bzw. abfragen, dies war nur eine grobe Übersicht über die neuen Möglichkeiten,
Bilder einzubinden.

Wie schon erwähnt, ist die Browserunterstützung des picture-tags bzw. von scrset noch nicht so verbreitet.
Ich persönlich bevorzuge folgende Syntax:

<img class="srcset" src="/images/2017/responsive-images-300.png"
                     srcset="
                     /images/2017/responsive-images-300.png 300w,
                     /images/2017/responsive-images-640.png 640w,
                     /images/2017/responsive-images-1280.png 1280w,
                     /images/2017/responsive-images-2560.png 2560w"
                     sizes="(min-width: 3840px) 75vw,
                     98vw"
                     alt="Einbinden von Responsive Images">
zusätzlich zu obigem Codebeispiel habe ich hier noch sizes verwendet:
min-width:... als media query weist den Browser an,
ab einer Größe von 3840 Pixel "4k(!)" das Bild nurmehr auf 75vw (viewport-width)
anzuzeigen. Ich habe zwar einen 4k Monitor, aber Bilder mit 2560 width abzuspeichern und einzubinden ist genug, finde ich.
das 98vw (1% Rand links und rechts sind mein persönlicher Geschmack) zählt für alle anderen, da ich hier keine media querry vorgestellt habe.
natürlich könnte man hier alle möglichen breakpoints definieren, aber wir wollen mal nicht übertreiben:-)

Diese Methode deckt auch Skalierungen seitens Betriebssystem und Browser
sowie Device Pixel Ratio (dpr) und "Retina" x2, x3 usw. ab!

Achja und zu den "Retina Displays" :
Als Webdesigner sollte man nicht auf Marketing Bla Bla reinfallen^^, habe da irrwitzige Diskussion in diversen Webmaster Foren mitverfolgt...

Ob super HD Retina, wir sind die Coolsten...
Virtuelle Pixel, Downsampling usw. blenden halt viele, na gut ihr Fanboys.
Physikalisch hat selbst das Iphone6+ nur 1920x1080 Pixel. Punkt.
mein China Mobile hat die gleiche Bildschärfe und kostet ohne Marketingags eben nur etwa 1/4.

Anders sieht es bei den Imacs mit 5k Display aus, da stecken wirklich Pixel drin:p

Als Webdesigner/Seitenbetreiber/Blogger ist nur wichtig, dass richtig ausgeführtes Responsive Design alle Fälle abdeckt.
Internet Explorer und seine Unzulänglichkeiten erwähne ich nur der Vollständigkeit halber, aber das Problem hat sich in den letzten Jahren von selbst erledigt:))

Responsive Images mit media queries

Bereits seit CSS3 implementiert sind die media queries, womit alle modernen Webseiten mit mobilen bzw. responsivem design arbeiten.
Die ehemals (vor picture und srcset) einzige Möglichkeit (ohne Javascript oder dergleichen),
die von allen halbwegs modernen browser-versionen unterstützt wird (css3)

Responsive Images mit media queries:

Da media queries schon länger breit unterstützt werden, wäre dies die ultimative Lösung.
Leider lassen sich auf diesem Weg nur Hintergrundbilder festlegen.
Ein weiterer Ansatz wäre noch, über media queries das gewünschte Image (das parent Element) visible /hidden zu stylen.

Adaptive Images

Ein etwas älterer, aber nicht weniger aktueller Ansatz.

fluid images

Das folgende image wird fluid eingebunden.
Der Klassiker mit width:100%;... passt sich der Fenstergröße an.

Leider hat diese Methode zwei "Unschönheiten"

Inwieweit sich dies aufs Suchmaschinenranking auswirkt, vermag niemand genau zu sagen, pagespeed reklamiert diese Vorgehensweise zumindest.

Schlusswort

Hatte ich zu Anfang meiner Recherchen zum Thema Responsive images noch gehofft, die optimale Lösung zu finden,
So stellt sich wieder einmal heraus, dass es die Lösung nicht gibt.
Kompromisse zwischen technischer Durchführbarkeit, Kompatibilität und Darstellungsqualität
müssen leider eingegangen werden.
Schlussendlich muss man entscheiden, welche Methode man für welches Projekt implementiert.