One Size Fits Some: A Guide to Responsive Web Design Image Solutions

Veröffentlicht: 2022-03-11

Während Mobil- und Tablet-Geräte der endgültigen Weltherrschaft näher kommen, befinden sich Webdesign und -technologie in einem Wettlauf, um der ständig wachsenden Zahl von Bildschirmgrößen gerecht zu werden. Die Entwicklung von Tools zur Bewältigung der Herausforderungen dieses Phänomens bringt jedoch eine ganze Reihe neuer Probleme mit sich, wobei eines der neuesten Schlagworte „Responsive Web“ ist. Das ist die Herausforderung, das Internet auf den meisten, wenn nicht allen Geräten zum Laufen zu bringen, ohne die Erfahrung des Benutzers zu beeinträchtigen. Anstatt Inhalte für Desktops oder Laptops zu entwerfen, müssen Informationen für Mobiltelefone, Tablets oder andere mit dem Internet verbundene Oberflächen verfügbar sein. Diese Entwicklung des responsiven Webdesigns hat sich jedoch als schwierig und manchmal schmerzhaft erwiesen.

Während es fast trivial sein kann, Textinformationen unterzubringen, kommt der schwierige Teil, wenn wir Inhalte wie responsive Bilder, Infografiken, Videos usw. in Betracht ziehen, die einst nur für Desktops entwickelt wurden. Dabei stellt sich nicht nur die Frage nach der korrekten Darstellung der Inhalte, sondern auch, wie die Inhalte selbst über verschiedene Endgeräte konsumiert werden. Benutzer auf Smartphones unterscheiden sich von Benutzern auf Desktops. Dinge wie Datentarife und Verarbeitungsgeschwindigkeit müssen ebenfalls berücksichtigt werden. Google hat damit begonnen, mobilfreundliche Websites in seinen Suchergebnissen hervorzuheben, wobei einige spekulieren, dass dies zu einem erheblichen Pagerank-Boost für solche Websites führen wird. Frühere Lösungen adressierten dies, indem sie nur mobile Subdomains (und Weiterleitungen) bereitstellten, aber dies erhöhte die Komplexität und geriet schnell aus der Mode. (Nicht jeder Standort kann sich diese Route leisten.)

Auf der Suche nach responsiven Webbildern

Responsive Webdesign-Bilder müssen einfach so skaliert werden, dass sie zu gängigen Geräten in der heutigen Zeit passen.

An diesem Punkt müssen Entwickler und Designer sicherstellen, dass die Ladezeit ihrer Website optimiert ist, um den Benutzern gerecht zu werden, die sich auf mobilen Websites befinden. Über 20 % des Webverkehrs sind jetzt mobile Nutzer, und die Zahl steigt weiter. Da Bilder den größten Anteil an Seiteninhaltsdaten einnehmen, wird es zu einer Priorität, diese Last zu reduzieren. Es wurden mehrere Versuche unternommen, um die Größenänderung von Bildern im responsiven Design zu vereinfachen, darunter sowohl serverseitige als auch Front-End-Lösungen. Um diese responsiven Bildlösungen zu diskutieren, müssen wir zunächst die aktuellen Mängel bei der Bildverknüpfung verstehen.

Das <img> -Tag hat nur das Quellattribut, das direkt mit dem Bild selbst verknüpft ist. Es hat keine Möglichkeit, ohne Add-Ons den richtigen Bildtyp zu bestimmen.

Können wir nicht einfach alle Bildgrößen in den HTML-Code aufnehmen und CSS-Regeln verwenden, um Folgendes display:none für alle, aber das richtige Bild? Das ist die logischste Lösung in einer perfekten logischen Welt. Auf diese Weise kann der Browser alle nicht angezeigten Bilder ignorieren und sie theoretisch nicht herunterladen. Browser sind jedoch über die übliche Logik hinaus optimiert. Damit die Seite schnell genug gerendert wird, ruft der Browser verlinkte Inhalte vorab ab, bevor auch nur die erforderlichen Stylesheets und JavaScript-Dateien vollständig geladen sind. Anstatt die großen Bilder zu ignorieren, die für Desktops gedacht sind, haben wir am Ende alle Bilder heruntergeladen, was zu einer noch größeren Seitenlast führt. Die reine CSS-Technik funktioniert nur für Bilder, die als Hintergrundbilder gedacht sind, da diese innerhalb des Stylesheets (mithilfe von Medienabfragen) festgelegt werden können.

Also, was ist eine Website zu tun?

Responsive Back-End-Image-Scaling-Lösungen

Eine Back-End-Lösung kann perfekt für die Handhabung der Bildgröße in einer responsiven Webdesign-Situation sein.

Abgesehen von Websites/Subdomains, die nur für Mobilgeräte bestimmt sind, müssen wir den User-Agent (UA) schnüffeln und ihn verwenden, um die Bilder in der richtigen Größe an den Benutzer zurückzuliefern. Allerdings kann jeder Entwickler bestätigen, wie unzuverlässig diese Lösung sein kann. Ständig tauchen neue UA-Strings auf, was es anstrengend macht, eine umfassende Liste zu pflegen und zu aktualisieren. Und natürlich berücksichtigt dies noch nicht einmal die Unzuverlässigkeit leicht zu fälschender UA-Strings.

Adaptive Bilder

Einige serverseitige Lösungen sind jedoch eine Überlegung wert. Adaptive Images ist eine großartige Lösung für diejenigen, die eine Back-End-Responsive-Image-Korrektur bevorzugen. Es erfordert kein spezielles Markup, sondern verwendet stattdessen eine kleine JavaScript-Datei und erledigt die meiste schwere Arbeit in seiner Back-End-Datei. Es verwendet einen mit PHP und Nginx konfigurierten Server. Es verlässt sich auch nicht auf UA-Sniffing, sondern prüft stattdessen die Bildschirmbreite. Adaptive Bilder eignen sich hervorragend zum Verkleinern von Bildern, sind aber auch praktisch, wenn große Bilder eine Art Direction benötigen, dh eine Bildverkleinerung durch Techniken wie Zuschneiden und Drehen – nicht nur durch Skalieren.

Sencha-Touch

Sencha Touch ist eine weitere Back-End-Responsive-Design-Bildlösung, obwohl es besser ist, sie als Drittanbieterlösung zu bezeichnen. Sencha Touch passt die Größe des Bildes entsprechend an, indem es das UA schnüffelt. Nachfolgend finden Sie ein einfaches Beispiel für die Funktionsweise des Dienstes:

 <img src="http://src.sencha.io/http://example.com/images/kitty_cat.jpg" alt="My Kitty Cat">

Es gibt auch eine Option zur Angabe der Bildgröße, falls wir nicht möchten, dass Sencha die Bildgröße automatisch ändert.

Letztendlich benötigen serverseitige (und Drittanbieter-) Lösungen Ressourcen, um die Anfrage zu verarbeiten, bevor das richtige Bild zurückgesendet wird. Dies kostet wertvolle Zeit und verlangsamt wiederum die Request-Response-Reise. Eine bessere Lösung könnte sein, wenn das Gerät selbst bestimmt, welche Ressourcen direkt angefordert werden sollen, und der Server entsprechend antwortet.

Front-End-Lösungen

Front-End-Responsive-Design-Bildskalierungslösungen können eine großartige Option sein, um das Laden von Websites zu optimieren.

In letzter Zeit gab es große Verbesserungen auf der Browserseite, um responsive Bilder zu adressieren.

Das <picture> -Element wurde vom W3C in die HTML5-Spezifikation eingeführt und genehmigt. Es ist derzeit nicht in allen Browsern weit verbreitet, aber es wird nicht lange dauern, bis es nativ verfügbar ist. Bis dahin verlassen wir uns auf JavaScript-Polyfills für das Element. Polyfills sind auch eine großartige Lösung für ältere Browser, denen das Element fehlt.

Es gibt auch den Fall des srcset Attributs, das für mehrere webKit-basierte Browser für das <img> -Element verfügbar ist. Dies kann ohne JavaScript verwendet werden und ist eine großartige Lösung, wenn Nicht-WebKit-Browser ignoriert werden sollen. Es ist eine nützliche Notlösung für den einen oder anderen Fall, in dem andere Lösungen nicht ausreichen, sollte aber nicht als umfassende Lösung betrachtet werden.

Bildfüllend

Picturefill ist eine Polyfill-Bibliothek für das <picture> -Element. Es ist eine der beliebtesten Bibliotheken unter den Front-End-Lösungen für responsive Bildgrößen- und Skalierungsprobleme. Es gibt zwei Versionen; Picturefill v1 ahmt das <picture> -Element unter Verwendung von span nach, während Picturefill v2 das <picture> -Element unter den Browsern verwendet, die es bereits anbieten, und ein Polyfill für ältere Browser bereitstellt (z. B. für IE >= IE9). Es hat einige Einschränkungen und Problemumgehungen, insbesondere für Android 2.3 - was übrigens ein Beispiel dafür ist, wo das Attribut img srcset zur Rettung kommt. Nachfolgend finden Sie ein Beispiel-Markup für die Verwendung von Picturefill v2:

 <picture> <source media="(min-width: 768px)"> <source media="(max-width: 767px)"> <img alt="My Kitty Cat"> </picture>

Um die Leistung für Benutzer mit begrenzten Datenplänen zu verbessern, kann Picturefill mit verzögertem Laden kombiniert werden. Die Bibliothek könnte jedoch eine breitere Browserunterstützung bieten und die seltsamen Fälle ansprechen, anstatt sich auf Patches zu verlassen.

Imager.js

Imager.js ist eine Bibliothek, die vom BBC News-Team erstellt wurde, um responsive Bilder mit einem anderen Ansatz als dem von Picturefill zu erstellen. Während Picturefill versucht, das <picture> -Element in nicht unterstützte Browser zu bringen, konzentriert sich Imager.js darauf, nur die geeigneten Bilder herunterzuladen und gleichzeitig die Netzwerkgeschwindigkeiten im Auge zu behalten. Es enthält auch verzögertes Laden, ohne sich auf Bibliotheken von Drittanbietern zu verlassen. Es funktioniert, indem Platzhalterelemente verwendet und durch <img> -Elemente ersetzt werden. Der folgende Beispielcode zeigt dieses Verhalten:

 <div> <div class="image-load" data-src="http://example.com/images/kitty_{width}.jpg" data-alt="My Kitty Cat"></div> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

Der gerenderte HTML-Code sieht folgendermaßen aus:

 <div> <img src="http://example.com/images/kitty_480.jpg" data-src="http://example.com/images/kitty_{width}.jpg" alt="My Kitty Cat" class="image-replace"> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

Die Browserunterstützung ist viel besser als die von Picturefill auf Kosten einer pragmatischeren als einer zukunftsorientierten Lösung.

Quell-Shuffling

Source Shuffling nähert sich dem responsiven Bildproblem aus einem etwas anderen Blickwinkel als die übrigen Front-End-Bibliotheken. Es ähnelt etwas aus der „Mobile First“-Denkschule, wobei es standardmäßig die kleinstmögliche Auflösung bedient. Wenn erkannt wird, dass ein Gerät einen größeren Bildschirm hat, tauscht es die Bildquelle gegen ein größeres Bild aus. Es fühlt sich eher wie ein Hack und weniger wie eine vollwertige Bibliothek an. Dies ist eine großartige Lösung für hauptsächlich mobile Websites, bedeutet jedoch, dass das doppelte Herunterladen von Ressourcen für Desktops und/oder Tablets unvermeidlich ist.

Einige andere bemerkenswerte JavaScript-Bibliotheken sind:

  • HiSRC - Ein jQuery-Plugin für responsive Bilder. Die Abhängigkeit von jQuery könnte ein Problem sein.
  • Mobify.js – Eine allgemeinere Bibliothek für responsive Inhalte, darunter Bilder, Stylesheets und sogar JavaScript. Es „erfasst“ das DOM vor dem Laden der Ressourcen. Mobify ist eine leistungsstarke, umfassende Bibliothek, kann aber übertrieben sein, wenn das Ziel nur reaktionsschnelle Bilder sind.

Zusammenfassung

Letztendlich liegt es am Entwickler, zu entscheiden, welcher responsive Webdesign-Bildansatz für die Benutzerbasis geeignet ist. Das bedeutet, dass die Datenerhebung und -prüfung eine bessere Vorstellung von dem zu wählenden Ansatz geben wird.

Zum Abschluss kann die folgende Liste von Fragen hilfreich sein, bevor Sie sich für die geeignete Lösung für responsive Bilder entscheiden.

  • Sind ältere Browser ein Problem? Wenn nicht, erwägen Sie einen moderneren Ansatz (zB: Picturefill, srcset Attribut)
  • Ist die Reaktionszeit kritisch? Wenn nicht, entscheiden Sie sich für eine Drittanbieter- oder Back-End-Lösung.
  • Sollen die Lösungen Inhouse sein? Lösungen von Drittanbietern werden selbstverständlich ausgeschlossen.
  • Gibt es bereits viele Bilder auf einer Website, die versucht, auf responsive Bilder umzustellen? Gibt es Bedenken bezüglich Validierung oder semantischen Tags (oder eher nicht-semantischen Tags)? Dies erfordert eine Back-End-Lösung, um die Bildanforderungen an so etwas wie adaptive Bilder weiterzuleiten.
  • Ist Art Direction ein Problem (insbesondere bei großen Bildern mit vielen Informationen)? Eine Bibliothek wie Picturefill ist für ein solches Szenario eine bessere Lösung. Außerdem funktionieren auch alle Back-End-Lösungen.
  • Gibt es Bedenken wegen fehlendem JavaScript? Eine der Front-End-Lösungen kommt nicht in Frage, was die Back-End- oder Drittanbieter-Optionen übrig lässt, die auf UA-Sniffing angewiesen sind.
  • Gibt es eine Priorität für mobile Reaktionszeiten gegenüber Desktop-Reaktionszeiten? Eine Bibliothek wie Source Shuffling ist möglicherweise besser geeignet.
  • Besteht die Notwendigkeit, allen Aspekten der Website, nicht nur Bildern, ein ansprechendes Verhalten zu bieten? Mobify.js könnte besser funktionieren.
  • Ist die perfekte Welt erreicht? Verwenden Sie den reinen CSS-Ansatz display:none !