Vielen Dank, dass du bei der Google I/O dabei warst! Inhalte on demand ansehen

Diese Seite wurde von der Cloud Translation API übersetzt.

Responsive Bilder

Im Web wird Text automatisch am Bildschirmrand umgebrochen, damit er nicht überläuft. Bilder haben hingegen eine feste Größe. Wenn ein Bild breiter als das Display ist, wird es über den Rand hinaus angezeigt und der Nutzer muss horizontal scrollen, um es vollständig zu sehen.

Glücklicherweise bietet CSS Tools, mit denen Sie dies verhindern können.

Bilder begrenzen

In Ihrem Stylesheet können Sie mit max-inline-size angeben, dass Bilder niemals breiter als das enthaltende Element gerendert werden dürfen.

Browser Support

Source

img {
  max-inline-size: 100%;
  block-size: auto;
}

Sie können dieselbe Regel auch auf andere Arten von eingebetteten Inhalten anwenden, z. B. auf Videos und iframes.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Mit dieser Regel werden Bilder von Browsern automatisch so skaliert, dass sie auf dem Bildschirm passen.

Zwei Screenshots: Der erste zeigt ein Bild, das über die Browserbreite hinausragt. Der zweite zeigt dasselbe Bild, das im Browserfenster eingegrenzt ist. — Wenn Sie Ihr Bild einschränken, können Nutzer es vollständig sehen, ohne scrollen zu müssen.

Wenn Sie den Wert auto für block-size angeben, behält der Browser das Seitenverhältnis Ihrer Bilder bei, während er sie in der Größe ändert.

Manchmal werden die Abmessungen eines Bildes von einem Content-Management-System (CMS) oder einem anderen Content Delivery System festgelegt. Wenn für Ihr Design ein anderes Seitenverhältnis als das Standardseitenverhältnis des CMS erforderlich ist, können Sie die Property aspect-ratio verwenden, um das Design Ihrer Website beizubehalten:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

Leider bedeutet das oft, dass das Bild im Browser zusammengedrückt oder gedehnt werden muss, damit es in den vorgesehenen Bereich passt.

Wenn Sie das Seitenverhältnis des Bildes ändern, wird es gestaucht oder gestreckt.

Verwenden Sie die Eigenschaft object-fit, um ein Zusammendrücken oder Strecken zu verhindern.

Browser Support

Source

Ein object-fit-Wert von contain weist den Browser an, das Seitenverhältnis des Bilds beizubehalten und bei Bedarf einen leeren Raum um das Bild herum zu lassen.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Wenn object-fit den Wert cover hat, wird der Browser angewiesen, das Seitenverhältnis des Bildes beizubehalten und es bei Bedarf zuzuschneiden.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

Dasselbe Bild mit zwei verschiedenen Werten für „object-fit“. Das erste hat den Wert „contain“ für „object-fit“. Das zweite hat den Wert „cover“ für „object-fit“.

Mit der Property object-position können Sie die Position des Bildausschnitts ändern. Dadurch wird der Fokus des Zuschnitts angepasst, damit der wichtigste Teil des Bildes weiterhin sichtbar ist.

Browser Support

Source

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Mit object-position können Sie nur eine Seite des Bildes zuschneiden.

Bilder senden

Diese CSS-Regeln geben dem Browser an, wie Bilder gerendert werden sollen. Sie können in Ihrer HTML-Datei auch Hinweise dazu geben, wie der Browser mit diesen Bildern umgehen soll.

Hinweise zur Größe

Wenn Sie die Abmessungen Ihres Bildes kennen, geben Sie immer die Attribute width und height an. Auch wenn das Bild aufgrund Ihrer max-inline-size-Regel in einer anderen Größe gerendert wird, kennt der Browser das Seitenverhältnis und kann den richtigen Platz reservieren. So wird verhindert, dass andere Inhalte beim Laden des Bildes verschoben werden.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Das erste Video zeigt ein Layout ohne definierte Bildabmessungen. Beachten Sie, wie der Text springt, wenn die Bilder geladen werden. Im zweiten Video wurden Bildabmessungen angegeben, sodass der Browser Platz für das Bild lässt und der Text beim Laden des Bilds nicht springt.

Tipps zum Laden

Mit dem Attribut loading teilen Sie dem Browser mit, ob das Laden des Bildes verzögert werden soll, bis es sich im Darstellungsbereich oder in dessen Nähe befindet. Verwenden Sie für Bilder, die nicht sofort sichtbar sind, den Wert lazy. Der Browser lädt Lazy-Load-Bilder erst, wenn der Nutzer weit genug nach unten gescrollt hat, sodass das Bild bald sichtbar wird. Wenn der Nutzer nie scrollt, wird das Bild nie geladen.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Lazy-Loaded-Bilder werden erst geladen, wenn der Nutzer zu ihnen scrollt.

Verwenden Sie für ein Hero-Image „above the fold“ nicht loading. Wenn das Attribut loading="lazy" auf Ihrer Website automatisch angewendet wird, können Sie loading in der Regel auf den Standardwert eager setzen, um zu verhindern, dass Bilder mit Lazy Loading geladen werden:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Abrufpriorität

Bei wichtigen Bildern wie dem LCP können Sie das Laden mithilfe der Abrufpriorität weiter priorisieren, indem Sie das Attribut fetchpriority auf high festlegen:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Dadurch wird der Browser angewiesen, das Bild sofort und mit hoher Priorität abzurufen, anstatt zu warten, bis der Browser das Layout fertiggestellt hat und Bilder normal abrufen würde.

Wenn Sie den Browser jedoch auffordern, den Download einer Ressource wie eines Bilds zu priorisieren, muss er die Priorität einer anderen Ressource wie eines Scripts oder einer Schriftdatei herabsetzen. Legen Sie fetchpriority="high" nur für ein Bild fest, wenn es wirklich wichtig ist.

Tipps zum Vorabladen

Vermeiden Sie nach Möglichkeit das Vorladen, indem Sie alle Bilder in die ursprüngliche HTML-Datei einfügen. Einige Bilder sind jedoch möglicherweise nicht verfügbar, z. B. Bilder, die durch JavaScript oder ein CSS-Hintergrundbild hinzugefügt wurden.

Mit dem Vorabladen können Sie den Browser dazu bringen, diese wichtigen Bilder im Voraus abzurufen. Bei besonders wichtigen Bildern können Sie dieses Vorladen mit dem Attribut fetchpriority kombinieren:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Verwenden Sie diese Attribute sparsam, um die Priorisierungs-Heuristiken des Browsers nicht zu oft zu überschreiben. Eine übermäßige Verwendung kann zu einer Leistungsminderung führen.

Einige Browser unterstützen das Vorabladen responsiver Bilder basierend auf srcset mithilfe der Attribute imagesrcset und imagesizes. Beispiel:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

Wenn Sie den href-Fallback ausschließen, wird in Browsern ohne srcset-Unterstützung weiterhin das richtige Bild vorab geladen.

Sie können Bilder nicht in verschiedenen Formaten vorab laden, da bestimmte Formate nicht von allen Browsern unterstützt werden. Dies kann zu zusätzlichen Downloads führen, die die Daten der Nutzer verschwenden.

Bild-Decodierung

Es gibt auch ein decoding-Attribut, das du img-Elementen hinzufügen kannst. Sie können dem Browser mitteilen, dass das Bild asynchron decodiert werden kann, damit die Verarbeitung anderer Inhalte priorisiert werden kann.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

Sie können den Wert sync verwenden, wenn das Bild selbst der wichtigste Inhalt ist, der priorisiert werden soll.

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

Das Attribut decoding hat keine Auswirkungen auf die Geschwindigkeit der Bilddekodierung. Sie wirkt sich nur darauf aus, ob der Browser auf diese Bilddekodierung wartet, bevor andere Inhalte gerendert werden.

In den meisten Fällen hat das keine großen Auswirkungen, aber manchmal kann der Browser Ihr Bild oder andere Inhalte dadurch etwas schneller anzeigen. Wenn Sie beispielsweise ein großes Dokument mit vielen Elementen haben, die lange zum Rendern brauchen, und große Bilder, die lange zum Decodieren brauchen, und sync auf wichtige Bilder setzen, wird der Browser angewiesen, auf das Bild zu warten und beide gleichzeitig zu rendern. Alternativ können Sie async so festlegen, dass der Browser Inhalte schneller anzeigt, ohne auf die Dekodierung des Bildes zu warten.

Es ist jedoch in der Regel besser, decoding nicht zu verwenden, sondern eine zu große DOM-Größe zu vermeiden und responsive Bilder zu verwenden, um die Dekodierungszeit zu verkürzen.

Responsive Bilder mit `srcset`

Dank dieser max-inline-size: 100%-Deklaration können Ihre Bilder nicht aus ihren Containern herausbrechen. Wenn ein Nutzer jedoch einen kleinen Bildschirm und ein Netzwerk mit geringer Bandbreite hat, ist es verschwenderisch, wenn er Bilder in derselben Größe herunterladen muss wie Nutzer mit größeren Bildschirmen.

Fügen Sie zum Beheben dieses Problems mehrere Versionen desselben Bildes in verschiedenen Größen hinzu und verwenden Sie das Attribut srcset, um dem Browser mitzuteilen, dass diese Größen vorhanden sind und wann sie verwendet werden sollen.

Schlagwort für die Breite

Sie können srcset mit einer durch Kommas getrennten Liste von Werten definieren. Jeder Wert ist die URL eines Bildes, gefolgt von einem Leerzeichen und einigen Metadaten zum Bild, die als Deskriptor bezeichnet werden.

In diesem Beispiel wird in den Metadaten die Breite jedes Bildes in w angegeben. Ein w entspricht der Breite eines Pixels.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

Das Attribut srcset ergänzt das Attribut src, anstatt es zu ersetzen. Sie benötigen weiterhin ein gültiges src-Attribut, aber der Browser kann den Wert durch eine der im srcset aufgeführten Optionen ersetzen. Um Bandbreite zu sparen, lädt der Browser das größere Bild nur herunter, wenn es benötigt wird.

Größen

Wenn Sie den Width-Beschreibungsparameter verwenden, müssen Sie auch das Attribut sizes verwenden, um dem Browser weitere Informationen zur Verfügung zu stellen. So wird dem Browser mitgeteilt, in welcher Größe das Bild unter verschiedenen Bedingungen angezeigt werden soll. Diese Bedingungen werden in einer Medienabfrage angegeben.

Das Attribut sizes nimmt eine durch Kommas getrennte Liste von Medienabfragen und Bildbreiten an.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

In diesem Beispiel geben Sie dem Browser an, dass das Bild in einem Darstellungsbereich mit einer Breite von mehr als 66em nicht breiter als ein Drittel des Bildschirms sein soll (z. B. in einem Dreispalten-Layout).

Bei einer Ansichtsbreite zwischen 44em und 66em wird das Bild auf halber Bildschirmbreite angezeigt (wie bei einem Layout mit zwei Spalten).

Bei einer Breite von weniger als 44em wird das Bild in voller Breite des Bildschirms angezeigt.

Das bedeutet, dass das größte Bild nicht unbedingt für das breiteste Display verwendet wird. In einem breiten Browserfenster, in dem ein mehrspaltiges Layout angezeigt werden kann, wird ein Bild verwendet, das in eine Spalte passt. Dieses Bild kann kleiner sein als ein Bild, das für ein einspaltiges Layout auf einem schmaleren Bildschirm verwendet wird.

Mithilfe von Größenbeschreibungen können Sie die Anordnung Ihrer Seite auf verschiedenen Bildschirmgrößen ändern.

Beschreibung der Pixeldichte

Sie können auch eine alternative Version von Bildern angeben, die auf Displays mit hoher Pixeldichte angezeigt werden soll, damit die Bilder auch bei höheren Auflösungen scharf aussehen.

Zwei Versionen desselben Bildes eines glücklich aussehenden Hundes mit einem Ball im Maul, wobei das eine Bild scharf und das andere unscharf ist. — Bilder mit niedrigerer Pixeldichte können unscharf wirken.

Verwenden Sie den Dichtebeschreiber, um die Pixeldichte des Bildes in Bezug auf das Bild im src-Attribut zu beschreiben. Der Dichtebeschreiber besteht aus einer Zahl, gefolgt vom Buchstaben x, z. B. 1x oder 2x.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Wenn small-image.png 300 × 200 Pixel groß und medium-image.png 600 × 400 Pixel groß ist, kann medium-image.png in der Liste srcset nach 2x stehen.

Sie müssen keine ganzen Zahlen verwenden. Wenn eine andere Version des Bildes 450 × 300 Pixel groß ist, können Sie sie mit 1.5x beschreiben.

Präsentationsbilder

Bilder in HTML sind Inhalte. Deshalb fügen Sie das alt-Attribut mit einer Beschreibung des Bildes für Screenreader und Suchmaschinen hinzu.

Wenn Sie ein dekoratives Bild ohne aussagekräftigen Inhalt einbetten, können Sie ein leeres alt-Attribut verwenden.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Das Attribut alt muss immer angegeben werden, auch wenn es leer ist. Ein leeres alt-Attribut teilt einem Screenreader mit, dass das Bild Präsentationscharakter hat. Wenn das alt-Attribut fehlt, sind diese Informationen nicht verfügbar.

Präsentations- oder Dekorationsbilder sollten idealerweise mit CSS statt mit HTML eingebunden werden. HTML dient der Strukturierung. CSS dient der Präsentation.

Hintergrundbilder

Verwenden Sie die CSS-Eigenschaft background-image, um Präsentationsbilder zu laden.

element {
  background-image: url(flourish.png);
}

Sie können mit der Funktion image-set mehrere Bildkandidaten für background-image angeben.

Die image-set-Funktion in CSS funktioniert ähnlich wie das srcset-Attribut in HTML. Geben Sie eine Liste mit Bildern mit einer Beschreibung der Pixeldichte für jedes Bild an.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

Der Browser wählt das für die Pixeldichte des Geräts am besten geeignete Bild aus.

Wenn Sie Ihrer Website Bilder hinzufügen, sollten Sie viele Faktoren berücksichtigen, darunter:

Für jedes Bild den richtigen Platz reservieren.
Bestimmen Sie, wie viele Größen Sie benötigen.
Entscheiden, ob das Bild einen Inhalt hat oder dekorativ ist.

Es lohnt sich, die Zeit zu nehmen, um die Bilder richtig zu machen. Eine schlechte Bildstrategie kann Nutzer irritieren und frustrieren. Eine gute Bildstrategie sorgt dafür, dass Ihre Website unabhängig vom Gerät oder der Netzwerkverbindung des Nutzers flüssig und scharf wirkt.

Es gibt noch ein weiteres HTML-Element in Ihrem Toolkit, mit dem Sie Ihre Bilder besser steuern können: das picture-Element.

Wissen testen

Testen Sie Ihr Wissen zu Bildern.

Bilder müssen Stile hinzugefügt werden, damit sie in den Darstellungsbereich passen.

Richtig

Bilder ohne Begrenzung werden in ihrer natürlichen Größe angezeigt.

Falsch

Stile sind erforderlich.

Welche Stile können helfen, die Anpassung eines Bildes an ein unnatürliches Seitenverhältnis zu optimieren, wenn Höhe und Breite des Bildes gezwungen wurden, ein unnatürliches Seitenverhältnis zu haben?

object-fit

Geben Sie an, wie das Bild zu Keywords wie contain und cover passt.

image-fit

Diese Property gibt es nicht, ich habe sie mir ausgedacht.

fit-image

Diese Property gibt es nicht, ich habe sie mir ausgedacht.

aspect-ratio

Dies kann zu einem unnatürlichen Bildverhältnis führen oder es beheben.

Wenn Sie height und width in Ihre Bilder einfügen, kann CSS sie nicht anders formatieren.

Richtig

Betrachten Sie sie eher als Hinweise als als Regeln.

Falsch

CSS bietet eine Vielzahl von dynamischen Optionen zur Größenänderung von Bildern, auch wenn Höhe und Breite inline im Tag angegeben sind.

Das srcset-Attribut _______ das src-Attribut nicht, sondern _______ es.

ergänzen, ersetzen

srcset ersetzt das src-Attribut nicht.

ersetzen, ergänzt

Sie bietet dem Browser zusätzliche Optionen zur Auswahl, sofern verfügbar.

Ein fehlendes alt in einem Bild ist dasselbe wie ein leeres alt.

Richtig

Ein leeres alt-Attribut teilt einem Screenreader mit, dass dieses Bild nur zur Präsentation dient.

Falsch

Ein fehlendes alt wird von einem Screenreader nicht erkannt.

Responsive Bilder

Bilder begrenzen

Bilder senden

Hinweise zur Größe

Tipps zum Laden

Abrufpriorität

Tipps zum Vorabladen

Bild-Decodierung

Responsive Bilder mit srcset

Schlagwort für die Breite

Größen

Beschreibung der Pixeldichte

Präsentationsbilder

Hintergrundbilder

Wissen testen

Responsive Bilder mit `srcset`