Im Bereich des Responsive Web-Design tauchen meist viele Probleme auf. Demnach ist entweder die Bildgröße nicht klein genug, oder es werden doppelte Requests an den Server übermittelt. Zudem ist die Syntax ein sehr komplexes Thema, wobei es auch unter Browsern sowie Spezifikationen keine Konsens geben kann. Anhand des neuen Bildformats sollen diese Probleme der Vergangenheit angehören.

Der Vorschlag von Yoav Weiss diesbezüglich dürfte sehr interessant sein: Weiss schlägt einen Container vor, der sich um vorhandene Bildformate befindet. Dabei handelt es sich um ein neues Dateiformat. Wie man aus seinem Blog entnehmen kann, bringt dies viele Vorteile mit sich.

 

  • Das Markup bleibt unverändert, also ein einfaches Element, das über eine einzige Bildquelle verfügt
  • Die Programmierung von automatischen Tools wäre wesentlich einfacher, da die sich lediglich auf die Bilder fixieren, nicht um das Markup oder Layout
  • Die Bildänderungen, die beispielsweise beim Verkleinern oder Vergrößern eines Browserfensters auftreten, könnten demnach inkrementell heruntergeladen werden, ohne ein Laden von Daten zu veranlassen, die bereits im Speicher vorhanden sind.
  • Für Webentwickler ist das Abrufen von mehreren Versionen von Bilddateien nicht mehr von Nöten

 

Wie funktioniert so ein Container für Responsive Images?

Im Container-Format sind mehrere Ebenen enthalten, das aus dem heutigen (Web-P, JPEG-XR) sowie zukünftigen Bildformat besteht. In diesem Format werden Vergrößerungs- und Ausschneidevorgänge verwendet, damit die Unterstützung der Anwendungsfälle der unterschiedlichen Auflösungen sowie Art Direction gewährleistet werden kann. Demnach kann der Browser ausschließlich die Ebenen downloaden, die auch wirklich von Bedeutung sind, damit ein bestimmtes Bild angezeigt werden kann.

Das Abrufen der Ebenen

Bei diesem Vorgang handelt es sich um eine eher schwierige Angelegenheit, da die aktuellen Browser nicht über einen neuen Mechanismus verfügen. Man könnte sich dabei aber an HTTP-Intervallen (Ranges) anlehnen, wie bei Videos. Weiss empfiehlt dazu ein progressive-Attribut vor, das sich auf dem Bildelement befindet. Diesen Vorgang wird hier kurz erläutert:

-  Trifft der Browser auf ein Bild mit dem Attribut „progressive“ aufeinander, wird ein vordefiniertes Intervall heruntergeladen , dass es in folgenden Größen gibt:

  • Ein kleines Intervall, das vorher festgelegt wurde und beispielsweise 8 Kilobyte aufweist
  • Ein Wert, der vom Autor festgelegt wird
  • Ein Wert, der heuristisch ermittelt wurde
  • Basis auf ein „Manifest“

- Das Intervall wird dann heruntergeladen, während das ganze Bild heruntergeladen wird
- Im ersten Intervall kommt dann im Browser eine sogenannte „Offset Table Box“, die ein Verzeichnis enthält. Aus diesem Verzeichnis kann man entnehmen, an welcher Byte-Stelle der Datei welche Ebene hinterlegt ist.
- Sobald das Seitenlayout fertiggestellt ist, wird vom Browser die am besten passende Ebene geladen.

ähnliche Artikel:

  1. Responsive Inspector – Vereinfachtes Arbeiten mit Media Queries
  2. Webtool „Am I Responsive?“
  3. Die neuen Adobe Touch Apps
  4. Adobe Brackets – Code-Editor für Webentwickler als Open Source
 

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>