Kurztipp Verwendung von HTML5-Bildern für Responsive Images

Bilder sind bekanntlich einer der schwierigsten Aspekte des responsiven Webdesigns. Heute schauen wir uns an wie Element, eine Lösung für das Problem der reagierenden Bilder, kann verwendet werden jetzt sofort.

Zuerst das Problem

Die Zeiten der pixelgenauen Gestaltung von Websites mit fester Breite liegen wirklich hinter uns. In der heutigen Zeit der Breitbild-Monitore, Internet-TVs, Tablets mit mehreren Größen und Smartphones müssen sich unsere Designs nun auf alles einstellen, von 320px bis möglicherweise bis zu 7680px.

Mit dieser Landschaft mit mehreren Auflösungen ist es auch erforderlich, dass Bilder gestreckt oder verkleinert werden, um diesen stark unterschiedlichen Anforderungen gerecht zu werden. Dies kann sich als problematisch erweisen, da mit Ausnahme von Vektorgrafiken die überwiegende Mehrheit der Bilder bestimmte pixelbasierte Breiten aufweist, die sich nicht ändern.

Also, was machen wir?

Die aktuelle, häufigste Lösung

In der Regel finden Sie Folgendes in fast jeder responsiven Site-CSS:

img max-Breite: 100%; Höhe: Auto; 

Dieser Code verwendet die Max-Breite: 100%; Diese Einstellung sorgt dafür, dass Bilder niemals die Breite ihres übergeordneten Containers überschreiten. Wenn der übergeordnete Container unter die Breite des Bildes schrumpft, wird das Bild zusammen mit dem Bild verkleinert. Das Höhe: Auto; Diese Einstellung stellt sicher, dass das Seitenverhältnis der Bilder beibehalten wird.

Ein fließendes Bild für alle Umstände

Es löst das Problem in einer Hinsicht, sodass wir dasselbe Bild unter vielen verschiedenen Umständen anzeigen können. Aber es erlaubt uns nicht zu spezifizieren anders Bilder für unterschiedliche Umstände.

Eine neue Lösung:

ist ein neues Element, das Teil von HTML5 werden soll. 

Dadurch werden reaktionsschnelle Bilder an den aktuellen Strom angepasst und Elemente arbeiten. Damit können Sie mehrere platzieren Quelle Tags, die jeweils unterschiedliche Bilddateinamen sowie die Bedingungen angeben, unter denen sie geladen werden sollen.

Damit können Sie ein völlig anderes Bild laden, abhängig von:

• Medienabfrageergebnisse, z. Höhe, Breite, Ausrichtung des Ansichtsfensters
• Pixeldichte

Dies bedeutet wiederum, dass Sie:

• Laden Sie Bilder in angemessener Dateigröße, um die verfügbare Bandbreite optimal zu nutzen.
• Laden Sie unterschiedlich zugeschnittene Bilder mit unterschiedlichen Seitenverhältnissen, um Layoutänderungen bei unterschiedlichen Breiten anzupassen.
• Laden Sie Bilder mit höherer Auflösung für eine höhere Pixeldichte.

Je nach Umständen wurden unterschiedliche Bilder angezeigt

Wie geht das? Arbeit?

Die grundlegenden Schritte der Arbeit mit sind:

1. Öffnen und Schließen erstellen Stichworte.
2. Erstellen Sie innerhalb dieser Tags eine Element für jede Abfrage, die Sie ausführen möchten.
3. Füge hinzu ein Medien Attribut, das Ihre Abfrage enthält, z. B. Höhe, Breite, Ausrichtung des Ansichtsfensters usw..
4. Füge hinzu ein srcset Attribut mit dem entsprechenden Bilddateinamen zum Laden.
5. Fügen Sie Ihrem Dateinamen zusätzliche Dateinamen hinzu srcset Attribut, wenn Sie unterschiedliche Pixeldichten vorsehen möchten, z. Retina zeigt an.
6. Fügen Sie einen Fallback hinzu Element.

Hier ein einfaches Beispiel, in dem geprüft wird, ob der Darstellungsbereich kleiner als 768px ist. Wenn dies der Fall ist, wird ein kleineres Bild geladen:

Sie werden feststellen, dass die Syntax in der verwendet wird Medien Das Attribut ist das gleiche, an das Sie beim Erstellen von CSS-Medienabfragen gewöhnt sind. Sie können die gleichen Prüfungen verwenden, das heißt, Sie können abfragen maximale Breite, min-Breite, maximale Höhe, min-Höhe, Orientierung und so weiter.

Sie können diese Überprüfungen verwenden, um beispielsweise Quer- oder Hochformat-Versionen eines Bildes zu laden, abhängig von der Ausrichtung des Geräts, und Sie können immer noch Größenabfragen gleichzeitig mischen. Zum Beispiel:

Der obige Code lädt eine kleinere, quer geschnittene Version des Bildes auf einem kleineren, landschaftsorientierten Gerät. Es lädt eine größere Version desselben Bildes auf ein größeres landschaftsorientiertes Gerät. 

Wenn das Gerät im Hochformat ausgerichtet ist, lädt es eine hochformatige Version, die auf einem kleinen Gerät klein oder auf einem großen Gerät groß ist.

Wenn Sie unterschiedliche Versionen von Bildern mit höherer Auflösung für Displays mit höherer Dichte bereitstellen möchten, fügen Sie der Datei zusätzliche Dateinamen hinzu srcset Attribut. Betrachten wir beispielsweise unser erstes Codefragment von oben, wobei die Retina-2x-Auflösung hinzugefügt wurde:

Die Medienabfrage wird zunächst noch ausgewertet, sodass Sie steuern können, in welchen Abmessungen Ihr Bild auf dem Bildschirm angezeigt wird. Dann wird die Pixeldichte der Anzeige überprüft. Wenn höhere Dichten unterstützt und von den Präferenzen des Benutzers zugelassen werden, wird die Version mit höherer Dichte des Bildes geladen.

Verwenden  Heute

Jetzt native Implementierung für ist in Arbeit für Chrome, Firefox und Opera. In der Zukunft wird es wahrscheinlich weitreichende Unterstützung geben, da sich auch andere Browser durchsetzen. Im Moment steht diese Unterstützung jedoch noch nicht an.

In der Zwischenzeit müssen Sie nicht warten, wenn Sie mit der Verwendung beginnen möchten jetzt sofort. Sie müssen einfach Picturefill 2.0 verwenden. eine polyfill von den cleveren Leuten der Filament Group.

Nach dem Download der picturefill.js Datei in Ihr Projekt einfügen, indem Sie sie einfach in den Kopfbereich Ihrer Site laden:

Es gibt auch eine Option zum asynchronen Laden des Skripts, um die Effizienz zu erhöhen. Informationen hierzu finden Sie in der Dokumentation von Picturefill.

Mit diesem Skript wird das geladen Element funktioniert wie ich erklärt habe, mit nur wenigen Einschränkungen.

Einschränkungen bei Bildern

IE9

Picturefill funktioniert gut mit anderen IE-Versionen, jedoch erkennt IE9 dies nicht Quelle Elemente, die eingepackt sind Bild Stichworte. Um dies zu umgehen, wickeln Sie die Quellelemente bedingt ein Video Tags, die sie dann für IE9 sichtbar machen, zum Beispiel:

Android 2.3

Wie IE9 kann Android 2.3 nicht sehen Quelle Elemente in einem Bild Element. Es kann jedoch das verstehen srcset Attribut bei regulärer Verwendung img Etikett. Stellen Sie sicher, dass Sie Ihren Fallback immer mit einschließen img Element mit dem Standarddateinamen in der srcset Attribut für Android 2.3 und alle anderen Browser, die möglicherweise dasselbe Problem haben.

Erfordert die Unterstützung von JavaScript und Native Media Query

Da es sich um eine JavaScript-basierte Lösung handelt, muss JavaScript im Browser aktiviert sein. Picturefill 2.0 bietet keine Problemlösung "no-js", da sonst mehrere Bilder erscheinen würden, wenn der native Browser dies unterstützt wird ausgerollt. Sie haben jedoch die Möglichkeit, Picturefill 1.2 zu verwenden, wenn die Option "no-js" ein Muss für Sie ist.

Die andere Anforderung, die Picturefill hat, ist die Unterstützung von nativen Medienabfragen, um die Abfragen in aktivieren zu können Medien Attribut zur Arbeit. Alle modernen Browser unterstützen Medienabfragen, wobei IE8 und niedriger der einzige nicht unterstützende Browser mit einer geringen verbleibenden Benutzerbasis ist.

Mögliche zusätzliche HTTP-Anforderungen

In Browsern, die native Unterstützung für haben srcset, aber noch nicht für Bild, Möglicherweise ist der Dateiname im Fallback angegeben img Element könnte vor einem besser passenden Bild von der angefordert werden Quelle Elemente ist bestimmt.

Dies ist nur ein vorübergehendes Problem und wird wegfallen, wenn es sich um einheimische handelt Bild Die Implementierung wird ausgerollt.

Mehr Informationen

• Lesen Sie mehr über Picturefill 2.0 und laden Sie es auf der Picturefill-Seite für Ihr Projekt herunter
• Erhalten Sie alle Informationen über die  Element von responsiveimages.org.

Ausprobieren  heute in Ihrem Projekt und sehen Sie, was Sie denken!