Anfängerleitfaden zu responsiven Bildern: Wie man sie richtig macht

In diesem Tutorial zu responsiven Bildern werden CSS-Techniken, HTML-Funktionen und einige Tools behandelt, die Sie in Betracht ziehen sollten. All dies sollte Ihnen einen guten Überblick geben, wie Sie heute mit responsiven Bildern in Ihren Projekten beginnen können.

Inhaltsverzeichnis:

• Responsive Bilder mit einfachem CSS
• Responsive Bilder mit den Attributen srcset und „ sizes “.
• Verwenden srcset mit einem Pixeldichte-Deskriptor
• Verwenden des <picture> -Elements
• Tools und Dienste zur Unterstützung von responsiven Bildern

Responsive Bilder mit einfachem CSS

Der einfachste Weg, ein Bild auf einer Webseite responsive zu machen, erfordert keine Medienabfragen oder zusätzliches HTML. Mit ein paar Zeilen HTML und CSS können Sie jedes Bild vergrößern oder verkleinern, je nach Größe des Fensters.

Zuerst enthält mein HTML width und height :

Das Einfügen der width und height in den HTML-Code ist eine bewährte Methode. Dadurch wird sichergestellt, dass der Browser den erforderlichen Platz für das Bild reserviert und es beim Laden des Bildes keinen nachfolgenden Seitenumbruch gibt.

Zusammen mit dem werde ich das folgende CSS verwenden:

 img { max-width : 100% ; height : auto; }
 Codesprache: CSS ( css )

Diese Werte überschreiben meinen HTML-Code. Die Eigenschaft max-width ist auf 100% festgelegt, um sicherzustellen, dass sie den erforderlichen Platz bis zu einem Maximum von 1000 Pixel (dem Wert aus dem HTML) ausfüllt. Der height von auto stellt sicher, dass die Höhe des Bildes die Bildabmessungen proportional zu seiner natürlichen Breite und Höhe hält. Wenn ich die height: auto line entferne, bleibt das Bild unabhängig von der Breite auf der im HTML definierten Höhe – was normalerweise nicht das ist, was ich möchte.

Sie können dieses einfache Beispiel mit dem folgenden CodePen ausprobieren. Am besten öffnen Sie die Demo in einem neuen Fenster, wenn Sie die Reaktionsfähigkeit testen möchten.

Und beachten Sie, dass in meinem Beispiel die natürlichen Abmessungen des Bildes 2000 Pixel x 1333 Pixel betragen, ich mich jedoch dafür entscheide, es mit maximal 1000 Pixel anzuzeigen.

Theoretisch könnte ich das Obige für jedes Bild auf meiner Seite tun, und dies wäre eine rudimentäre und akzeptable Möglichkeit, responsive Bilder in meine Projekte zu integrieren. Aber idealerweise möchte ich dies auf die nächste Ebene bringen und die Kontrolle über die Auflösung des Bildes und andere Faktoren erlangen, um die Leistung zu verbessern und bei der SEO zu helfen, was ich in den folgenden Abschnitten besprechen werde.

Responsive Bilder mit den Attributen srcset und „ sizes “.

In dem einfachen CSS-Beispiel oben lade ich ein Bild mit einer Größe von etwa 1,44 MB – selbst nachdem ich die verlustfreie Komprimierung verwendet habe, um die Größe zu reduzieren. Das ist für sich genommen nicht schlimm, wenn es auf einem Desktop angezeigt wird, aber es ist sicherlich nicht die Größe, die ich auf einem kleinen Gerät wie einem Smartphone laden möchte. Hier kommen die Attribute srcset und sizes ins Spiel.

Mit dem srcset Attribut können Sie mehrere Bildgrößen in einem einzigen Wert angeben. Dies sind die Bilder, auf die der Browser oder das Gerät unter bestimmten Umständen Zugriff hat. Das sizes arbeitet zusammen mit srcset , um dem Browser mitzuteilen, welches der Bilder er auswählen soll.

Hier ist ein Beispiel, das mehrere Versionen des Bildes leopard.png aus dem vorherigen Beispiel verwendet:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Codesprache: HTML, XML ( xml )

Wenn Sie die Attribute srcset und „ sizes “ noch nie zuvor gesehen haben, mag das auf den ersten Blick verwirrend erscheinen. Ich werde alles aufschlüsseln, damit es relativ einfach zu verstehen ist.

Aufschlüsselung des srcset Attributs

Das Attribut srcset akzeptiert eine durch Kommas getrennte Liste mit einer oder mehreren Zeichenfolgen. Jede Saite enthält:

• Eine URL, die auf ein Bild verweist
• Einer der folgenden optionalen Deskriptoren (getrennt durch ein Leerzeichen):
  • Ein Breiten-Deskriptor
  • Ein Pixeldichtedeskriptor

In meinem Beispiel habe ich einen Breiten-Deskriptor eingefügt, den Sie am häufigsten sehen werden. Ich habe drei verschiedene Versionen des Bildes eingefügt: Die große Version mit hoher Auflösung, zusammen mit einer 800 Pixel breiten und einer 480 Pixel breiten Version.

Beachten Sie, dass bei der Verwendung des Breitendeskriptors im obigen Beispiel die Syntax der Breitenwert ist, unmittelbar gefolgt von einem „w“ (verwenden Sie keinen „px“-Einheitswert!). Für jeden der Breiten-Deskriptoren, die die Bilder darstellen, verwende ich die intrinsische Breite des Bildes in Pixeln. Sie können die wahre Größe eines Bildes auf verschiedene Arten ermitteln – indem Sie auf seine Eigenschaften in Ihrem Dateisystem, einem Fotoeditor oder sogar in Ihrem Browser oder den Entwicklertools Ihres Browsers verweisen.

Aufschlüsselung des sizes

Das sizes funktioniert nur zusammen mit dem srcset Attribut. Sie können srcset allein verwenden (siehe nächster Abschnitt), aber die häufigste Art, srcset zu verwenden, ist zusammen mit sizes .

Das sizes akzeptiert eine durch Kommas getrennte Liste mit einer oder mehreren Zeichenfolgen. Jede Saite enthält:

• Eine Medienbedingung (ähnlich den in CSS verwendeten Medienabfragen)
• Ein Wert, der die Größe des „Slots“ definiert, den das Bild einnehmen wird

Der Slot-Wert kann eine absolute Länge wie em oder px oder eine relative Einheit des Ansichtsfensters (zB vw ) sein. Beachten Sie, dass in meinem Beispiel die Schlitzwerte im sizes nicht genau mit den drei Breitendeskriptoren übereinstimmen. Hier nochmal der Code:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Codesprache: HTML, XML ( xml )

Die Tatsache, dass die Slot-Werte nicht genau mit den Breiten-Deskriptoren übereinstimmen, ist in Ordnung. In meinem Fall kann ich den sizes wie folgt aufschlüsseln:

• Ein 600 Pixel breiter Viewport lädt das 480 W-Bild aus dem srcset Wert in einen 480 Pixel breiten Slot.
• Ein 1000 Pixel breiter Viewport lädt das 800 W-Bild in einen 800 Pixel-Slot.
• Das Standardbild in voller Größe (2000 W) füllt einen 1000-Pixel-Slot, wenn die vorherigen Medienbedingungen nicht erfüllt sind.

Die letzte Zeichenfolge ist nur ein Slot-Wert ohne Medienbedingung. Wie bereits erwähnt, stellt dies sicher, dass der Browser etwas anzuzeigen hat, wenn keine der Medienbedingungen erfüllt sind, und funktioniert standardmäßig.

Sie können den Beispielcode mithilfe der CodePen-Demo unten in Aktion sehen. Beachten Sie, dass Sie in diesem Fall etwas testen müssen, das verschiedene Geräte nachahmt (wie die DevTools in Chrome). Sie können die Seite auch mit einer Vielzahl von echten Geräten öffnen, um einen echten Test durchzuführen. Der Einfachheit halber habe ich jedem der Bilder eine Textüberlagerung hinzugefügt, damit Sie sehen können, welche geladen werden, wenn Sie die Seite anzeigen.

Beachten Sie, dass nach dem Laden des Originalbilds die Größe des Bilds nicht geändert wird, wenn Sie die Größe des Ansichtsfensters ändern. Die Attribute srcset und „ sizes “ sind nützlich, um Bilder gemäß den Medienbedingungen beim ersten Laden zu laden, helfen jedoch nicht, Bilder basierend auf der Größenänderung des Bildschirms zu wechseln. Später zeige ich Ihnen eine andere Funktion für responsive Bilder, die dieses Problem lösen wird.

Verwenden srcset mit einem Pixeldichte-Deskriptor

Weiter oben habe ich erwähnt, dass das srcset Attribut mit einem Pixeldichte-Deskriptor verwendet werden kann. Dieser Deskriptor lässt den Browser entscheiden, welches Bild basierend auf den Auflösungsfähigkeiten des Geräts verwendet werden soll. So sieht das aus:

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Codesprache: HTML, XML ( xml )

Beachten Sie hier ein paar Dinge. Erstens verwende ich für das reguläre src -Attribut das kleinste Bild, um einen Mobile-First-Ansatz sicherzustellen. Als nächstes enthält das Attribut srcset einige andere Versionen des Bildes, wobei die Auflösung durch die Deskriptoren 1,5x und 2x angegeben wird. Das 480-Bild enthält keinen Deskriptor, da das 1x impliziert ist. Beachten Sie schließlich, dass kein sizes vorhanden ist, das ich in diesem Fall nicht benötige. MDN erklärt, wie der Browser das Bild auswählt:

Um zu verstehen, wie die Deskriptoren funktionieren, denken Sie daran, dass ein Gerätepixel jedes CSS-Pixel darstellt. 1x wäre also ein Verhältnis von 1:1, 1,5x wäre ein Verhältnis von 1,5:1 und so weiter. Sie können es im CodePen unten ausprobieren, aber Sie müssen andere Geräte verwenden (oder ein Tool verwenden, das sie nachahmt), um den Unterschied zu sehen.

Verwenden des <picture> -Elements

Die bisher besprochenen Funktionen zum Einbinden von responsiven Bildern gehen davon aus, dass ich immer dasselbe Bild zeige, aber in unterschiedlichen Größen und Auflösungen. Und obwohl ich in allen Beispielen CSS verwende, um die Breite der Bilder zu ändern, wenn der Benutzer die Größe des Browsers ändert, ändert sich das Bild selbst nie wirklich, sobald die Seite geladen ist.

Das <picture> -Element ist eine HTML-Funktion, mit der Sie alternative Versionen eines Bildes basierend auf dem Vorhandensein bestimmter Medienfunktionen anbieten können. Auf diese Weise können Bilder auch ausgetauscht werden, wenn der Benutzer die Größe des Ansichtsfensters ändert, und Sie können im Wesentlichen Art Direction mit Ihren Bildern ausführen, indem Sie verschiedene Arten derselben Szene zeigen, die jedoch je nach Gerätegröße unterschiedlich zugeschnitten oder gezoomt werden.

Beispielsweise wäre eine Weitwinkelaufnahme mit einem kleinen Objekt in der Mitte für ein größeres Gerät auf einem Desktop oder Tablet geeignet, aber ein kleineres Gerät wie ein Smartphone könnte dasselbe Bild beschnitten oder vergrößert laden.

Hier ist ein Beispielcode, der es mir ermöglicht, eine Art Direction für mein Bild vorzunehmen:

Beachten Sie Folgendes zum Code:

• Das <picture> -Element akzeptiert mehrere verschachtelte <picture> -Elemente als untergeordnete Elemente
• Jedes der <source> -Elemente innerhalb von <picture> verwendet das media , um die Medienbedingung zu definieren, die die Verwendung dieses Quellbilds auslöst
• Das Element <picture> akzeptiert das reguläre <img> -Element als untergeordnetes Element, das der Browser als Fallback erkennt, wenn es <picture> nicht unterstützt
• Es gibt keine Attribute direkt auf dem <picture> -Element ( <picture> akzeptiert nur die globalen HTML-Attribute und hat keine eigenen Attribute).

Der folgende CodePen demonstriert dies:

Wenn Sie die Demo in einem neuen Fenster öffnen, können Sie die Größe des Fensters ändern, um zu sehen, wie sich das Bild ändert. Beachten Sie, wie das Motiv des Bildes stärker eingezoomt wird, wenn das Browserfenster kleiner wird. Dies ist eine einfache Möglichkeit, ansprechende, künstlerisch ausgerichtete Bilder zu erstellen, die auf jedem verwendeten Gerät angemessen aussehen. Das macht natürlich etwas mehr Arbeit, aber es lohnt sich, wenn Sie möchten, dass Ihre Bilder auf jedem verwendeten Gerät aussagekräftig sind.

Tools und Dienste zur Unterstützung von responsiven Bildern

Es gibt unzählige Tools, sowohl kostenlose als auch kommerzielle, die bei der Implementierung von responsiven Bildern helfen. Und einige davon werden Ihnen dabei helfen, einen Großteil des Codes, den ich besprochen habe, nicht einmal schreiben zu müssen. Hier sind einige, die Sie nützlich finden könnten:

Wichtig und praktisch ist, dass eine Reihe verschiedener Dienste responsive Bilder automatisch erstellen können und Funktionen wie unterschiedliche Bildgrößen, eine API für die spontane Bildgenerierung und mehr bieten.

Sogar WordPress selbst bietet eine integrierte Unterstützung für responsive Bilder (ab Version 4.4).

Ein weiteres Tool/Service, das einen Blick wert ist, ist Optimole. Es ist ein fortschrittliches Bildoptimierungs- und Bereitstellungstool, das vom Team hinter Themeisle entwickelt wurde. Dieser reduziert nicht nur die Festplattengröße Ihrer Bilder, ohne dass die visuelle Qualität darunter leidet, sondern kümmert sich auch darum, die Bilder über ein Bild-CDN an Ihre Website-Besucher zu liefern. Einer der Aspekte dieser Bildbereitstellungsfunktion ist, dass Ihre Bilder auch für die Anzeige auf verschiedenen Geräten optimiert werden.

Es gibt eine kostenlose Version von Optimole. Es ermöglicht monatlich bis zu 5.000 Website-Besuche und bietet Ihnen alle Funktionen zur automatischen Skalierung, CDN und mehr.

Wie sind Ihre Erfahrungen mit responsiven Bildern auf Websites? Lassen Sie es uns in den Kommentaren unten wissen.

Layout und Präsentation von Chris Fitzgerald und Karol K.