Responsive Bilder

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

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

Bilder einschränken

In Ihrem Stylesheet können Sie max-inline-size verwenden, um festzulegen, dass Bilder nie breiter als ihr enthaltendes Element gerendert werden dürfen.

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

Sie können dieselbe Regel auch auf andere Arten von eingebetteten Inhalten wie Videos und iFrames anwenden.

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

Mit dieser Regel skalieren Browser Bilder automatisch herunter, damit sie auf den Bildschirm passen.

Wenn Sie den block-size-Wert auto hinzufügen, behält der Browser das Seitenverhältnis Ihrer Bilder bei, wenn er sie in der Größe anpasst.

Manchmal werden die Abmessungen eines Bildes von einem Content-Management-System (CMS) oder einem anderen System zur Bereitstellung von Inhalten festgelegt. Wenn für Ihr Design ein anderes Seitenverhältnis als das Standardseitenverhältnis des CMS erforderlich ist, können Sie die Eigenschaft 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 der Browser das Bild stauchen oder strecken muss, damit es in den vorgesehenen Bereich passt.

Verwenden Sie das Attribut object-fit, um zu verhindern, dass Bilder gestaucht oder gedehnt werden.

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

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

Ein object-fit-Wert von cover weist den Browser an, das Seitenverhältnis des Bildes beizubehalten und das Bild bei Bedarf zuzuschneiden.

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

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

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

Bilder bereitstellen

Diese CSS-Regeln geben dem Browser vor, wie Bilder gerendert werden sollen. Sie können auch Hinweise in Ihrem HTML-Code angeben, wie der Browser diese Bilder verarbeiten soll.

Hinweise zur Größenanpassung

Wenn Sie die Abmessungen Ihres Bildes kennen, sollten Sie immer die Attribute width und height angeben. Auch wenn das Bild aufgrund Ihrer max-inline-size-Regel in einer anderen Größe gerendert wird, kennt der Browser das Verhältnis von Breite zu Höhe und kann den richtigen Platz reservieren. So wird verhindert, dass sich die anderen Inhalte verschieben, wenn das Bild geladen wird.

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

Hinweise zum Laden

Mit dem Attribut loading können Sie dem Browser mitteilen, ob das Laden des Bildes verzögert werden soll, bis es sich im oder in der Nähe des Darstellungsbereichs befindet. Verwenden Sie für Bilder „below the fold“ (mit Scrollen sichtbar) den Wert lazy. Der Browser lädt Bilder mit Lazy Loading erst, wenn der Nutzer so weit nach unten gescrollt hat, dass das Bild bald sichtbar wird. Wenn der Nutzer nicht scrollt, wird das Bild nie geladen.

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

Verwenden Sie für ein Hero-Bild „above the fold“ nicht loading. Wenn auf Ihrer Website das Attribut loading="lazy" 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-Bild können Sie das Laden mit Fetch Priority weiter priorisieren, indem Sie das Attribut fetchpriority auf high setzen:

<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 Bildes zu priorisieren, muss er den Download einer anderen Ressource wie eines Skripts oder einer Schriftartdatei herabstufen. Legen Sie fetchpriority="high" nur für ein Bild fest, wenn es wirklich wichtig ist.

Hinweise zum Vorabladen

Am besten vermeiden Sie 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 mit JavaScript oder einem CSS-Hintergrundbild hinzugefügt wurden.

Mit dem Vorladen können Sie den Browser dazu bringen, diese wichtigen Bilder vorab abzurufen. Bei wirklich wichtigen Bildern können Sie das Vorladen mit dem Attribut fetchpriority kombinieren:

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

Verwenden Sie diese Attribute sparsam, um zu vermeiden, dass die Priorisierungsheuristiken des Browsers zu oft überschrieben werden. Eine übermäßige Nutzung kann zu Leistungseinbußen 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 das richtige Bild auch in Browsern ohne srcset-Unterstützung vorab geladen.

Sie können Bilder nicht in verschiedenen Formaten vorab laden, je nachdem, welche Formate vom Browser unterstützt werden. Dies kann zu zusätzlichen Downloads führen, die das Datenvolumen der Nutzer unnötig belasten.

Responsive Bilder mit srcset

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

Um dieses Problem zu beheben, fügen Sie 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.

Breiten-Deskriptor

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 dann von einigen Metadaten zum Bild, die als Deskriptor bezeichnet werden.

In diesem Beispiel wird die Breite der einzelnen Bilder in den Metadaten mit der Einheit w beschrieben. 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 seinen 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 Breiten-Deskriptor verwenden, müssen Sie auch das Attribut sizes verwenden, um dem Browser weitere Informationen zu geben. Damit wird dem Browser mitgeteilt, welche Größe das Bild unter verschiedenen Bedingungen haben soll. Diese Bedingungen werden in einer Media-Anfrage angegeben.

Das Attribut sizes akzeptiert eine durch Kommas getrennte Liste von Media-Anfragen und Bildbreiten.

<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 wird dem Browser mitgeteilt, dass in einem Viewport mit einer Breite über 66em das Bild nicht breiter als ein Drittel des Bildschirms angezeigt werden soll (z. B. in einem dreispaltigen Layout).

Bei einer Breite des Viewports zwischen 44em und 66em soll das Bild mit der halben Bildschirmbreite angezeigt werden (wie in einem zweispaltigen Layout).

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

Das bedeutet, dass das größte Bild nicht unbedingt für den breitesten Bildschirm 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 ist möglicherweise kleiner als ein Bild, das für ein einspaltiges Layout auf einem schmaleren Bildschirm verwendet wird.

Descriptor für die Pixeldichte

Sie können auch Deskriptoren verwenden, um eine alternative Version von Bildern für HD-Displays bereitzustellen. So bleiben die Bilder auch bei den höheren Auflösungen, die diese Displays bieten, scharf.

Verwenden Sie den Dichte-Deskriptor, um die Pixeldichte des Bildes im Verhältnis zum Bild im Attribut src zu beschreiben. Der Dichtedeskriptor ist eine 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ß ist und medium-image.png 600 × 400 Pixel, 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 sollten Sie das alt-Attribut mit einer Beschreibung des Bildes für Screenreader und Suchmaschinen einfügen.

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"
>

Sie müssen das Attribut alt immer angeben, auch wenn es leer ist. Ein leeres alt-Attribut signalisiert einem Screenreader, dass das Bild nur zur Darstellung dient. Wenn das Attribut alt fehlt, sind diese Informationen nicht verfügbar.

Idealerweise werden präsentative oder dekorative Bilder mit CSS anstelle von HTML eingebunden. HTML ist für die Struktur. CSS ist für die Darstellung zuständig.

Hintergrundbilder

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

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

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

Die image-set-Funktion in CSS funktioniert ähnlich wie das srcset-Attribut in HTML. Stellen Sie eine Liste mit Bildern und einem Pixeldichte-Deskriptor für jedes Bild bereit.

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.

Beim Hinzufügen von Bildern auf Ihrer Website müssen Sie viele Faktoren berücksichtigen, darunter:

• Für jedes Bild wird der richtige Platz reserviert.
• Ermitteln, wie viele Größen Sie benötigen.
• Entscheiden, ob das Bild Inhalt oder dekorativ ist.

Es lohnt sich, sich die Zeit zu nehmen, die Bilder richtig zu gestalten. Schlechte Bildstrategien können Ihre Nutzer verärgern und frustrieren. Mit einer guten Bildstrategie wirkt Ihre Website schnell und scharf, unabhängig vom Gerät oder der Netzwerkverbindung des Nutzers.

Es gibt noch ein weiteres HTML-Element, mit dem Sie mehr Kontrolle über Ihre Bilder haben: das picture-Element.

Dein Wissen wird getestet

Wissen zu Bildern testen