HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
View in English Always switch to English
In diesem Artikel lernen wir das Konzept der responsiven Bilder kennen – Bilder, die auf Geräten mit unterschiedlichen Bildschirmgrößen, Auflösungen und anderen Merkmalen gut funktionieren – und schauen uns an, welche Werkzeuge HTML bietet, um sie zu implementieren. Dies hilft, die Leistung auf verschiedenen Geräten zu verbessern.
Untersuchen wir ein typisches Szenario. Eine typische Website kann ein Bild im Header und einige Inhaltsbilder unterhalb des Headers enthalten. Das Header-Bild wird wahrscheinlich die gesamte Breite des Headers einnehmen, während das Inhaltsbild irgendwo innerhalb der Content-Spalte passen wird. Hier ist ein Beispiel:
Dies funktioniert gut auf einem Breitbildgerät, wie einem Laptop oder Desktop (Sie können das Beispiel live sehen und den Quellcode auf GitHub finden.) Wir werden in dieser Lektion nicht viel über das CSS sprechen, außer dass:
Allerdings treten Probleme auf, wenn Sie die Seite auf einem Gerät mit schmalem Bildschirm anzeigen. Der Header unten sieht in Ordnung aus, aber er beginnt, viel von der Bildschirmhöhe für ein mobiles Gerät einzunehmen. Und in dieser Größe ist es schwierig, die Gesichter der beiden Personen im ersten Inhaltsbild zu erkennen.
Eine Verbesserung wäre es, eine beschnittene Version des Bildes anzuzeigen, die die wichtigen Details des Bildes zeigt, wenn die Seite auf einem schmalen Bildschirm angezeigt wird. Ein zweites beschnittenes Bild könnte für ein Medium-Bildschirmgerät wie ein Tablet angezeigt werden. Das allgemeine Problem, bei dem Sie in dieser Weise unterschiedliche beschnittene Bilder für verschiedene Layouts bereitstellen möchten, ist allgemein als Art Direction Problem bekannt.
Darüber hinaus ist es nicht notwendig, solche großen Bilder in die Seite einzubetten, wenn sie auf einem mobilen Bildschirm angezeigt wird. Dies kann Bandbreite verschwenden; insbesondere möchten mobile Benutzer keine Bandbreite verschwenden, indem sie ein großes Bild herunterladen, das für Desktop-Benutzer gedacht ist, wenn ein kleines Bild für ihr Gerät ausreichend wäre. Im Gegenteil, ein kleines Rasterbild beginnt körnig zu wirken, wenn es größer als seine ursprüngliche Größe angezeigt wird (ein Rasterbild hat eine feste Anzahl von Pixeln in der Breite und in der Höhe). Idealerweise wären dem Webbrowser des Benutzers mehrere Auflösungen verfügbar. Der Browser könnte dann die optimale Auflösung basierend auf der Bildschirmgröße des Geräts laden. Dies wird als Resolution Switching Problem bezeichnet.
Um die Sache zu komplizieren, haben einige Geräte hochauflösende Bildschirme, die größere Bilder benötigen, als Sie erwarten würden, um eine gute Darstellung zu erzielen. Dies ist im Wesentlichen dasselbe Problem, jedoch in einem etwas anderen Kontext.
Vielleicht denken Sie, dass Vektorbilder diese Probleme lösen würden, und das tun sie bis zu einem gewissen Grad – sie sind klein in der Dateigröße und lassen sich gut skalieren, und Sie sollten sie überall dort verwenden, wo es möglich ist. Allerdings sind sie nicht für alle Bildtypen geeignet. Vektorbilder sind großartig für einfache Grafiken, Muster, Interface-Elemente usw., aber es wird sehr komplex, ein vektor-basiertes Bild mit der Art von Details zu erstellen, die Sie beispielsweise in einem Foto finden würden. Rasterbildformate wie JPEGs sind besser geeignet für die Art von Bildern, die wir im obigen Beispiel sehen.
Diese Art von Problem existierte nicht, als das Web in den frühen bis mittleren 90er Jahren erstmals existierte – damals waren die einzigen existierenden Geräte zur Webnavigation Desktops und Laptops, also dachten Browseringenieure und Spec-Schreiber nicht einmal daran, Lösungen zu implementieren. Responsive Bildtechnologien wurden kürzlich implementiert, um die oben genannten Probleme zu lösen, indem sie Ihnen ermöglichen, dem Browser mehrere Bilddateien anzubieten, entweder alle sehen sie das Gleiche, enthalten aber unterschiedliche Pixelanzahlen (Resolution Switching), oder unterschiedliche Bilder, die für unterschiedliche Platzzuweisungen geeignet sind (Art Direction).
Hinweis: Die in diesem Artikel besprochenen neuen Features — srcset/sizes/<picture> — werden alle in modernen Desktop- und mobilen Browsern unterstützt.
In diesem Abschnitt werden wir uns die beiden oben illustrierten Probleme ansehen und zeigen, wie man sie mit den Funktionen von HTML für responsive Bilder löst. Sie sollten beachten, dass wir uns für diesen Abschnitt auf <img>-Elemente konzentrieren werden, wie sie im Inhaltsbereich des obigen Beispiels zu sehen sind – das Bild im Site-Header dient nur zur Dekoration und wird daher mit CSS-Hintergrundbildern implementiert. CSS hat vermutlich bessere Werkzeuge für responsives Design als HTML, und wir werden in einem zukünftigen CSS-Modul darüber sprechen.
Was ist also das Problem, das wir mit Resolution Switching lösen wollen? Wir möchten identische Bildinhalte anzeigen, nur größer oder kleiner, abhängig vom Gerät – das ist die Situation, die wir mit dem zweiten Inhaltsbild in unserem Beispiel haben. Das Standard-<img> Element lässt traditionell nur zu, dass der Browser auf eine einzige Quelldatei zeigt:
Wir können jedoch zwei Attribute verwenden – srcset und sizes – um mehrere zusätzliche Quellbilder zusammen mit Hinweisen bereitzustellen, die dem Browser helfen, das richtige auszuwählen. Sie können ein Beispiel dafür in unserem responsive.html-Beispiel auf GitHub sehen (siehe auch den Quellcode):
Die srcset und sizes Attribute sehen kompliziert aus, aber sie sind nicht schwer zu verstehen, wenn Sie sie so formatieren, wie oben gezeigt, mit einem anderen Teil des Attributwerts auf jeder Zeile. Jeder Wert enthält eine durch Kommas getrennte Liste,