Drücke die Tasten ◄ ► für weitere Artikel  

Responsive Webdesign: „Adaptive Images” optimiert Bilder automatisch

Responsive Webdesign dürfte die Zukunft gehören: Die Masse an Smartphones, Tablets und anderen Geräten mit Internetverbindung resultiert in völlig unterschiedlichen Bildschirmgrößen. Wohl dem, der mit seiner Website auf möglichst viele unterschiedliche Geräte vorbereitet ist. Wer ganz sorgfältig sein will, sollte allerdings auch die verwendeten Bilder in unterschiedlichen Größen anbieten. Eine automatisierte Lösung für PHP-Websites bietet „Adaptive Images“.

Responsive Webdesign: „Adaptive Images” optimiert Bilder automatisch

Zum gehören natürlich Media Queries, um flexibel auf unterschiedliche Screengrößen reagieren zu können. Allerdings lassen sich mit Media Queries nicht alle Probleme beheben, die mobile Geräte mit Webseiten haben. Einen umfassenden Artikel zum Thema Responsive Webdesign gibt es übrigens auch in der Jubiläumsausgabe des t3n-Magazins (Ausgabe 25, Seiten 152-155).

Zu einem konsequenten Responsive Webdesign gehört auch, Bilddateien in unterschiedlichen Größen anzubieten. Adaptive Images erleichtert diese Aufgabe.

Gutes Responsive Webdesign sollte auch Bilder anpassen

Obwohl Responsive Webdesign mittlerweile keine Nischendisziplin mehr ist und immer häufiger eingesetzt wird, bombardieren viele Websites mobile Browser mit Bildern in voller Auflösung. Das kostet Bandbreite und Zeit – zwei Güter, die der mobile Anwender gerne spart. Zwar sorgen viele Websites dafür, dass Bilder an die jeweilige Screengröße des entsprechenden Besuchers angepasst werden, aber das ändert nichts an der Dateigröße der einzelnen Bilder.

Wenn Responsive Webdesign beim Sparen hilft

Seitenbetreiber sollten allerdings auch diesen Aspekt beim Responsive Webdesign bedenken, denn größere Files bedeuten nicht nur längere Lade- und Wartezeiten für Nutzer, sondern können sogar richtig ins Geld gehen – sofern der Besucher nur ein begrenztes Datenvolumen zur Verfügung hat. Eine Lösung besteht darin, auf dem Webserver zwei Versionen jedes Bildes vorzuhalten: eine in voller Auflösung und eine in geringerer Auflösung. Eine andere Lösung bietet Adaptive Images an.

Adaptive Images: Bildgröße automatisch anpassen

Die Lösung von Adaptive Images fügt sich dabei nahtlos in die Ansprüche des Responsive Webdesigns ein und verspricht Bilder in ihrer Größe automatisiert an unterschiedliche Browser anzupassen. Adaptive Images setzt dabei auf JavaScript und PHP. Ein kleines JavaScript-File identifiziert den Browser des Besuchers, während PHP daraufhin das Bild auf der Website entsprechend anpasst. Eine .htaccess-Regel leitet alle Anfragen für jpgs, pngs und gifs an das PHP Image Processor File weiter. Adaptive Images ist eine Ressource, die sich einfach in jede PHP-Website per Plug and Play integrieren lässt.

Weiterführende Links:

57 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
6 Antworten
  1. von Kenyse am 06.09.2011 (16:33Uhr)

    Funktioniert bei mir leider nicht. Fehler beim ausführen der php-datei in Zeile 174.

  2. von jks am 09.09.2011 (09:34Uhr)

    Brauche ich um Responsive Web Design umzusetzen die moblien Geräte (beispielweise iPhone, iPad, Samsung Galaxy S usw.). Eigentlich "reicht" es ja die Funktionalität des Designs und der Codierung über den Browser zu testen, indem man den kleiner / größer aufzieht (mit Browser refresh verbunden) oder täusche ich mich da?

    Ist es empfehlenswert / notwendig die dazugehörigen Geräte zum Testen zur Verfügung zu haben?

    Danke im Voraus

    jks

  3. von Responsive Webdesign: Umfangreiche Präs… am 15.09.2011 (12:42Uhr)

    [...] Responsive Webdesign: „Adaptive Images” optimiert Bilder automatisch - t3n News [...]

  4. von Responsive Webdesign mit HTML5 und CSS3… am 24.10.2011 (11:09Uhr)

    [...] Responsive Webdesign: „Adaptive Images” optimiert Bilder automatisch - t3n News [...]

  5. von 10 kostenlose WordPress-Themes für Resp… am 21.03.2012 (15:54Uhr)

    [...] Responsive Webdesign: „Adaptive Images” optimiert Bilder automatisch - t3n News [...]

  6. von Logisches Konstrukt - Wie sieht der Miss… am 18.05.2012 (09:40Uhr)

    [...] Tendenzen nun wirklich niemand mehr herum. Wer 2012 einen Relaunch macht, MUSS auf ein responsives Design (inklusive adaptiven Bildern) setzen, um der Displaygrößenvielfalt zu begegnen. Ansonsten [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch.. ... » weiterlesen

Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander
Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander

Duo ist ein Browser, der dabei helfen soll, Responsive Webdesign zu testen. Dazu stellt er eine mobile Ansicht neben einer Desktop- oder Tablet-Ansicht dar. » weiterlesen

Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos
Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

Mit der Serie „Responsive Webdesign“ wollen wir euch die Entwicklung flexibler Projekte erleichtern. In Teil 3 zeigen wir Möglichkeiten auf, Galerien, Videos, Bilder und Slider für die... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen