Text im Web wird am Bildschirmrand automatisch umgebrochen, sodass er nicht überläuft. Bei Bildern ist das anders. Bilder haben eine unveränderliche Größe. Wenn ein Bild breiter als der Bildschirm ist, überläuft das Bild und es erscheint eine horizontale Bildlaufleiste.
Glücklicherweise können Sie in CSS Maßnahmen ergreifen, um dies zu verhindern.
Bilder einschränken
In Ihrem Stylesheet können Sie mit max-inline-size festlegen, dass Bilder nie in einer Größe gerendert werden sollen, die breiter als das enthaltene Element ist.
img {
max-inline-size: 100%;
block-size: auto;
}
Sie können dieselbe Regel auch auf andere Arten eingebetteter Inhalte anwenden, wie Videos und iFrames.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
Wenn diese Regel angewendet wird, verkleinern Browser die Bilder automatisch, damit sie auf den Bildschirm passen.
Wenn für block-size der Wert auto hinzugefügt wird, bleibt das Seitenverhältnis der Bilder konstant.
Manchmal haben Sie keinen Einfluss auf die Abmessungen eines Bildes, zum Beispiel, wenn ein Bild über ein Content-Management-System hinzugefügt wird. Wenn Sie für Ihr Design ein Seitenverhältnis benötigen, das von den tatsächlichen Abmessungen des Bildes abweicht, verwenden Sie die aspect-ratio-Eigenschaft in der CSS-Datei.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Dann kann es jedoch vorkommen, dass der Browser das Bild zusammendrückt oder streckt, damit es in das von Ihnen bevorzugte Seitenverhältnis passt.
Das lässt sich mit der Property object-fit verhindern.
Ein object-fit-Wert von contain weist den Browser an, das Seitenverhältnis des Bildes beizubehalten, auch wenn dies bedeutet, dass oben und unten Platz bleibt.
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, auch wenn das bedeutet, dass das Bild oben und unten abgeschnitten wird.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
Wenn es ein Problem beim gleichmäßigen Zuschneiden oben und unten gibt, verwende die CSS-Eigenschaft object-position, um den Fokus des Zuschnitts anzupassen.
So sorgen Sie dafür, dass die wichtigsten Bildinhalte weiterhin sichtbar sind.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
Bilder bereitstellen
Diese CSS-Regeln teilen dem Browser mit, wie Bilder gerendert werden sollen. Sie können in Ihrem HTML-Code auch Hinweise dazu bereitstellen, wie der Browser mit diesen Bildern umgehen soll.
Größenhinweise
Wenn Sie die Abmessungen des Bildes kennen, sollten Sie die Attribute width und height verwenden. Auch wenn das Bild aufgrund Ihrer max-inline-size: 100%-Regel in einer anderen Größe gerendert wird, kennt der Browser das Verhältnis zwischen Breite und Höhe und kann ausreichend Platz reservieren. So verhindern Sie, dass Ihre anderen Inhalte beim Laden des Bilds herumrutschen.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Hinweise werden geladen
Mit dem Attribut loading teilen Sie dem Browser mit, ob das Laden des Bildes verzögert werden soll, bis es sich im Darstellungsbereich oder nahe dem Darstellungsbereich befindet. Verwenden Sie für Bilder „below the fold“ (mit Scrollen sichtbar) den Wert lazy. Der Browser lädt faule Bilder erst dann, wenn der Nutzer so weit nach unten gescrollt hat, dass das Bild gleich zu sehen ist. Wenn der Nutzer nicht scrollt, wird das Bild nicht geladen.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
Für ein Hero-Image, das ohne Scrollen sichtbar ist, sollte loading nicht verwendet werden. Wenn deine Website das loading="lazy"-Attribut automatisch anwendet, kannst du oft das eager-Attribut (das Standardattribut) festlegen, um zu verhindern, dass dies angewendet wird:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
Priorität abrufen
Für wichtige Bilder wie das LCP-Bild können Sie das Laden mithilfe von Abrufpriorität weiter priorisieren. Setzen Sie dazu das Attribut fetchpriority auf high:
<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 auf das Layout des Browsers zu warten, da die Bilder normalerweise abgerufen werden.
Denken Sie jedoch daran: Wenn Sie den Browser bitten, das Herunterladen einer Ressource (z. B. eines Bildes) zu priorisieren, muss der Browser eine andere Ressource, wie z. B. ein Skript oder eine Schriftartdatei, herabstufen. Legen Sie fetchpriority="high" nur dann für ein Bild fest, wenn es wirklich wichtig ist.
Hinweise zum Vorabladen
Einige Bilder sind im ersten HTML-Code möglicherweise nicht verfügbar, wenn sie über JavaScript oder als Hintergrundbild in CSS hinzugefügt werden. Sie können auch die Funktion „Vorabladen“ nutzen, damit diese wichtigen Bilder vorzeitig abgerufen werden können. Für wirklich wichtige Bilder kann dieses Attribut mit dem Attribut fetchpriority kombiniert werden:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Auch hier sollten Sie sparsam eingesetzt werden, um zu vermeiden, dass die Priorisierungsheuristiken der Browser überschrieben werden, was zu Leistungseinbußen führen könnte.
Das Vorabladen responsiver Bilder basierend auf „srcset“ (siehe unten) über die Attribute imagesrcset und imagesizes ist komplexer und wird in einigen Browsern unterstützt, aber nicht in allen:
Wenn du das href-Fallback ausschließt, wird in Browsern, die diese Funktion nicht unterstützen, das falsche Bild nicht vorab geladen.
Das Vorabladen auf Grundlage unterschiedlicher Bildformate, die je nach Browserunterstützung erfolgen, wird derzeit nicht unterstützt und kann zusätzliche Downloads zur Folge haben.
Idealerweise sollten Sie das Vorabladen wo möglich vermeiden und das Bild im ursprünglichen HTML-Code zur Verfügung stellen, um Codewiederholungen zu vermeiden und den Zugriff auf alle Optionen zu ermöglichen, die vom Browser unterstützt werden.
Bilddecodierung
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. Der Browser kann dann die Verarbeitung anderer Inhalte priorisieren.
<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 decoding-Attribut beeinflusst nicht die Geschwindigkeit der Bilddecodierung, sondern es wird lediglich angegeben, ob der Browser auf diese Bilddecodierung wartet, bevor andere Inhalte gerendert werden.
In den meisten Fällen hat dies nur geringe Auswirkungen, in bestimmten Fällen kann es jedoch dazu führen, dass das Bild oder der Inhalt etwas schneller angezeigt wird. Bei einem großen Dokument mit vielen Elementen, deren Rendering eine gewisse Zeit in Anspruch nimmt, und bei großen Bildern, deren Decodierung eine gewisse Zeit in Anspruch nimmt, kann beispielsweise bei wichtigen Bildern sync festgelegt werden, dass der Browser auf das gleichzeitige Rendern des Bildes warten und dann beide rendern soll. Alternativ können Sie mit async zulassen, dass der Inhalt schneller angezeigt wird, ohne auf die Bilddecodierung zu warten.
Besser ist es jedoch in der Regel, übermäßige DOM-Größen zu vermeiden und dafür zu sorgen, dass responsive Bilder verwendet werden, um die Decodierungszeit zu verkürzen. Das Decodierungsattribut hat daher nur geringe Auswirkungen.
Responsive Bilder mit srcset
Dank der max-inline-size: 100%-Deklaration wird es nie zu einem Durchbruch der Container kommen. Aber selbst wenn es in Ordnung ist, ein großes Bild zu haben, das verkleinert wird, fühlt es sich nicht gut an. Wenn jemand ein Gerät mit kleinem Bildschirm in einem Netzwerk mit geringer Bandbreite verwendet, werden unnötig große Bilder heruntergeladen.
Wenn Sie mehrere Versionen desselben Bildes in unterschiedlichen Größen erstellen, können Sie den Browser mithilfe des Attributs srcset darüber informieren.
Beschreibung der Breite
Sie können eine durch Kommas getrennte Liste von Werten übergeben. Jeder Wert sollte aus der URL eines Bildes bestehen, gefolgt von einem Leerzeichen, gefolgt von Metadaten zum Bild. Diese Metadaten werden als Deskriptoren bezeichnet.
In diesem Beispiel beschreiben die Metadaten die Breite der einzelnen Bilder mithilfe der Einheit w. Ein w entspricht einem Pixel.
<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 ersetzt nicht das Attribut src. Stattdessen ergänzt das Attribut srcset das Attribut src. Sie benötigen noch ein gültiges src-Attribut, aber der Browser kann seinen Wert jetzt durch eine der im srcset-Attribut aufgeführten Optionen ersetzen.
Der Browser lädt die größeren Bilder nur herunter, wenn sie benötigt werden. Das spart Bandbreite.
Größen
Wenn Sie den Deskriptor für die Breite verwenden, müssen Sie auch das Attribut sizes verwenden, um dem Browser weitere Informationen bereitzustellen. Dadurch wird dem Browser mitgeteilt, welche Größe das Bild unter verschiedenen Bedingungen erwartungsgemäß angezeigt wird. Diese Bedingungen werden in einer Medienabfrage angegeben.
Für das Attribut sizes wird eine durch Kommas getrennte Liste mit Medienabfragen und Bildbreiten angegeben.
<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 über der Breite des Darstellungsbereichs von 66em nicht breiter als ein Drittel des Bildschirms angezeigt werden soll (z. B. in einem dreispaltigen Layout).
Bei einer Breite des Darstellungsbereichs zwischen 44em und 66em wird das Bild auf halber Bildschirmbreite angezeigt (zweispaltiges Layout).
Für alle Elemente unter 44em wird das Bild in der volle Breite des Bildschirms angezeigt.
Das bedeutet, dass nicht unbedingt das größte Bild für den breitesten Bildschirm verwendet wird. In einem breiten Browserfenster, das ein mehrspaltiges Layout anzeigen 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.
Pixeldichtedeskriptor
Es gibt eine andere Situation, in der Sie möglicherweise mehrere Versionen desselben Bildes bereitstellen möchten.
Einige Geräte haben HD-Displays. Auf einem Display mit doppelter Dichte können Sie Informationen aus zwei Pixeln auf ein Pixel verpacken. Dadurch sehen die Bilder auf solchen Displays gestochen scharf aus.
Verwenden Sie den Dichtedeskriptor, um die Pixeldichte des Bildes in Relation zum Bild im Attribut src zu beschreiben. Der Dichtedeskriptor ist eine Zahl, gefolgt vom Buchstaben x: 1x, 2x usw.
<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 x 200 Pixel groß und medium-image.png 600 x 400 Pixel groß ist, kann für medium-image.png in der srcset-Liste 2x angegeben werden.
Sie müssen keine ganzen Zahlen verwenden. Wenn eine andere Version des Bildes 450 x 300 Pixel groß ist, können Sie sie mit 1.5x beschreiben.
Präsentationsbilder
Bilder in HTML sind Inhalte. Deshalb geben Sie für Screenreader und Suchmaschinen immer ein alt-Attribut mit einer Bildbeschreibung an.
Wenn Sie ein rein optisches Bild ohne aussagekräftigen Inhalt einbetten möchten, verwenden Sie ein leeres alt-Attribut.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
Das Attribut alt muss weiterhin angegeben werden. Ein fehlendes alt-Attribut ist nicht dasselbe wie ein leeres alt-Attribut. Ein leeres alt-Attribut vermittelt einem Screenreader, dass dieses Bild ein Präsentationsbild ist.
Idealerweise sollten sich Ihre Präsentations- oder dekorativen Bilder überhaupt nicht in Ihrem HTML-Code befinden. HTML steht für Struktur. CSS dient der Präsentation.
Hintergrundbilder
Verwenden Sie die Eigenschaft background-image in CSS, um Bilder von Präsentationen zu laden.
element {
background-image: url(flourish.png);
}
Mit der Funktion image-set für background-image können Sie mehrere mögliche Bilder angeben.
Die Funktion image-set in CSS funktioniert ähnlich wie das Attribut srcset in HTML. Stellen Sie eine Liste von Bildern mit einer Beschreibung für die Pixeldichte bereit.
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
Der Browser wählt das am besten geeignete Bild für die Pixeldichte des Geräts aus.
Beim Hinzufügen von Bildern zu Ihrer Website müssen viele Faktoren berücksichtigt werden:
Sie reservieren den richtigen Platz für jedes Bild. Ermitteln, wie viele Größen Sie benötigen Entscheiden, ob das Bild inhaltlich oder dekorativ ist
Es lohnt sich, Zeit für die richtigen Bilder zu investieren. Schlechte Bildstrategien sind für Frustration und Ärgernis bei den Nutzenden verantwortlich. Eine gute Bildstrategie sorgt dafür, dass Ihre Website knackig und scharf ist, unabhängig von Gerät oder Netzwerkverbindung des Nutzers.
Ihr Toolkit enthält ein weiteres HTML-Element, mit dem Sie mehr Kontrolle über Ihre Bilder haben können: das picture-Element.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Bilder
Damit Bilder in den Darstellungsbereich passen, müssen Stile hinzugefügt werden.
Mit welchen Stilen können Sie die Darstellung des Bildes an diese Proportionen anpassen, wenn Höhe und Breite eines Bildes in ein unnatürliches Seitenverhältnis umgewandelt wurden?
object-fitcontain und cover an, wie das Bild passt.image-fitfit-imageaspect-ratioWenn Sie height und width in Ihre Bilder einfügen, kann das CSS den Stil der Bilder nicht ändern.
Das srcset-Attribut _______ das src-Attribut nicht, sondern _______ es.
srcset ersetzt definitiv nicht das Attribut src.Ein fehlendes alt-Element in einem Bild entspricht einem leeren alt-Element.
alt-Attribut vermittelt einem Screenreader, dass es sich um ein Präsentationsbild handelt.alt-Signale.