php-homepage.com

Adaptive Bilder - für jeden die passende Bildgröße

update 18.03.2017
Zum Thema Adaptive Images hat sich in den letzten Jahren einiges getan.
Aufgrund der aktuellen Browserentwicklung und speziell dem Boom mobiler Geräte,
wurden neue Techniken zur Einbindung von Bildern in Html5 entworfen:
Responsive Images

Da wir uns schon mit responsive Design, Adaptivem Design beschäftigt haben,
fehlt noch eine saubere Lösung um Bilder richtig zu skalieren!
Wobei Skalieren hier wohl die falsche Bezeichnung ist, richtig wäre adaptieren.
Die einfache Lösung (und auch verbreitetste) um Bilder in passender Auflösung einzubinden,
wäre einfach jedes Bild in maximaler Qulität/Auflösung einzufügen und dieses dann mittels CSS zu skalieren, damit es bei kleineren Auflösungen nicht überlappt.
Einfach jedem Image img {max-width:100; height:auto;} mitgeben;

Doch leider hat diese Lösung einen großen Nachteil:

Geräte mit geringer Auflösung und wahrscheinlich auch Bandbreite müssen das Bild mit maximaler Qualität (unter Umständen mehrere MB groß) herunterladen, auch wenn es nur als kleines Thumbnail angezeigt wird.
Nicht umsonst meckern diverse Tools (Pagespeed, mobile check usw.) über diese Lösung, da sie eine Bandbreitenverschwendung darstellt.

Eine elegante Lösung

Wer ein Display mit Auflösung von beispielsweise 480 Pixeln und noch dazu mobil keine flat hat, sollte auch ein kleineres Bild ausgeliefert bekommen und nicht ein mittels CSS runterskaliertes. (welches trotzdem die volle Dateigröße hat)

Funktion von adaptive images

  1. Photos/Bilder werden automatisch in passender Größe generiert und an den Besucher ausgegeben
  2. Die üblichen Anpassungen skalieren wir mittels CSS (wie oben "einfache Lösung"),
    damit wir nicht alle erdenklichen Auflösungen berücksichtigen müssen.
    max-width:100%;für img
  3. Die Benutzer bekommen eine wirklich mobiltaugliche Webseite/Blog zu sehen
  4. Der Aufwand ist gering und das passende Skript frei verfügbar
Da es hier verschiedene Ansätze gibt, von denen keiner richtig funktioniert, bzw. in der Praxis zu schwer zu implementieren ist. möchte ich die meiner Meinung nach beste Lösung vorstellen:
Seite des Autors und download (Aleitung auf Deutsch liegt bei)
update 23.02.2017
noch immer stellt Adaptive Images die praktikabelste Lösung dar, auch wenn mittlerweile das <picture> Element eingeführt wurde, um verschiedene Bildgrößen einzubinden

Eine andere Lösung? - das <picture> Element

Ein anderer (offizieller) Ansatz ist das Element, hier soll mittels
<source srcset=\"img_smallflower.jpg\" media=\"(max-width: 400px)\">
ähnlich den media queries, abgefragt werden, welche Auflösung das Gerät hat und liefert dann das entsprechende Bild aus.
Grundsätzlich eine nette Idee, aber dies setzt voraus, dass Bilder in verschiedenen Größen am Server liegen und das jeweils benötigte geladen wird. In der Praxis müsste man dann jedes Bild/Foto in diversen Auflösungen speichern und am Server ablegen.
Und dann mit einer Menge Code wieder einbinden - ich zitiere hier ein gutes Beispiel aus dem Selfhtml Wiki:
<picture>
     <source scrset="feuerwehr-1600.jpg, feuerwehr-1600hd.jpg 2x" media="(min-width: 1024px)">
     <source scrset="feuerwehr-480.jpg, feuerwehr-480hd.jpg 2x" media="(min-width: 480px)">
     <!---Fallback--->
     <img src="feuerwehr-480.jpg" scrset="feuerwehr-320.jpg, feuerwehr-320hd.jpg 2x" alt="Feuerwehrfest 2014">
  </picture>

Funktioniert tadellos, Retina Displays werden berücksichtigt (2x) und für ältere Browser gibt es den fallback mit altem img-tag.

Nur wer wird jedes Bild in diversen Größen abspeichern und diese dann mittels aufwändigem Codeblock zig mal in jedem Artikel einbinden?
Für Wordpress und Joomla gibt es ja zum Glück plugins, die aber auch nichts anderes machen als der oben von mir beschriebene workaround von adaptive-images.com. Meist jedoch nur "billige" CSS-Skalierung (max-width:100%; height:auto;)

Fazit:
Responsive Design mit Bildern gestaltet sich schwieriger als gedacht und die ultimative Lösung gibt es nicht.
Die hier erwähnten Möglichkeiten muss jeder an seine Anforderungen anpassen und schlussendlich abwägen, welche Lösung sich am besten eignet!
Wir schreiben mittlerweile 2017 und tatsächlich gibt es jetzt mehrere Lösungen für Adaptive - bzw. Responsive Images:

Responsive Images, Responsive Design in Reinkultur