Text im Web wird am Bildschirmrand automatisch umgebrochen, sodass er nicht überläuft. Bilder hingegen haben eine unveränderliche Größe. Wenn ein Bild breiter als der Bildschirm ist, läuft es über und der Nutzer muss horizontal scrollen, um das gesamte Bild zu sehen.
Glücklicherweise bietet CSS Ihnen Tools, mit denen Sie dies verhindern können.
Bilder einschränken
In Ihrem Stylesheet können Sie mit max-inline-size deklarieren, dass Bilder nie in einer Größe gerendert werden können, die breiter als das enthaltende Element ist.
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;
}
Wenn diese Regel angewendet wird, verkleinern Browser die Bilder automatisch, damit sie auf den Bildschirm passen.
Wenn Sie für block-size den Wert auto hinzufügen, behält der Browser das Seitenverhältnis der Bilder bei, wenn die Größe angepasst wird.
Manchmal werden die Abmessungen eines Bildes von einem Content-Management-System (CMS) oder einem anderen Content Delivery-System festgelegt. Falls für dein Design ein anderes Seitenverhältnis als das Standardformat des CMS erforderlich ist, kannst du die Property aspect-ratio verwenden, um das Design deiner Website beizubehalten:
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Leider bedeutet dies oft, dass der Browser das Bild zusammendrücken oder strecken muss, damit es in den vorgesehenen Platz passt.
Verwenden Sie die Eigenschaft object-fit, um ein Zusammendrücken und Dehnen zu vermeiden.
Ein object-fit-Wert von contain weist den Browser an, das Seitenverhältnis des Bildes beizubehalten und um das Bild bei Bedarf Platz 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;
}
Die Position des Bildausschnitts lässt sich mit der Property object-position ändern. Dadurch wird der Fokus des Bilds angepasst, damit 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;
}
object-position festlegen, um nur eine Seite des Bildes zuzuschneiden.Bilder bereitstellen
Diese CSS-Regeln teilen dem Browser mit, wie Bilder gerendert werden sollen. Sie können in Ihrem HTML-Code auch Hinweise darauf geben, wie der Browser diese Bilder verarbeiten sollte.
Tipps für die Größenanpassung
Wenn du die Abmessungen deines Bildes kennst, gib immer die Attribute width und height an. Auch wenn das Bild aufgrund der max-inline-size-Regel in einer anderen Größe gerendert wird, kennt der Browser das Verhältnis zwischen Breite und Höhe und kann das richtige Maß an Platz einplanen. So verhindern Sie, dass andere Inhalte beim Laden des Bildes ruckeln.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Hinweise 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. Verwende für Bilder „below the fold“ den Wert lazy. Der Browser lädt faszinierende Bilder erst, wenn der Nutzer so weit nach unten gescrollt hat, dass das Bild bald zu sehen ist. Wenn der Nutzer nicht scrollt, wird das Bild auch nicht geladen.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
Verwende loading nicht für ein Hero-Image, das ohne Scrollen sichtbar ist. Wenn auf deiner Website das Attribut loading="lazy" automatisch angewendet wird, kannst du loading in der Regel auf den Standardwert eager setzen, um zu verhindern, dass Bilder Lazy Loading sind:
<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 mithilfe der Abrufpriorität weiter priorisieren. Dazu setzen Sie 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 zu warten, bis der Browser sein Layout abgeschlossen hat, und Bilder normal abrufen würden.
Wenn Sie den Browser jedoch auffordern, eine Ressource, z. B. ein Bild, bevorzugt herunterzuladen, muss die Priorität einer anderen Ressource wie einem Skript oder einer Schriftdatei herabgestuft werden. Legen Sie fetchpriority="high" nur dann für ein Bild fest, wenn es wirklich wichtig ist.
Hinweise zum Vorabladen
Sie sollten das Vorabladen möglichst vermeiden, indem Sie alle Bilder in die ursprüngliche HTML-Datei aufnehmen. Einige Bilder sind jedoch möglicherweise nicht verfügbar, z. B. Bilder, die von JavaScript hinzugefügt wurden, oder ein CSS-Hintergrundbild.
Mithilfe der Vorabladefunktion können Sie dafür sorgen, dass der Browser diese wichtigen Bilder vorzeitig abruft. Bei wirklich wichtigen Bildern können Sie dieses Vorabladen mit dem Attribut fetchpriority kombinieren:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Verwenden Sie diese Attribute ebenfalls sparsam, damit die Priorisierungsheuristik des Browsers nicht zu oft überschrieben wird. 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">
Durch das Ausschließen des href-Fallbacks sorgen Sie dafür, dass Browser ohne srcset-Unterstützung weiterhin das richtige Bild vorab laden.
Je nach Browserunterstützung bestimmter Formate können Sie Bilder in verschiedenen Formaten nicht vorab laden. Dies kann zu zusätzlichen Downloads führen, die Nutzerdaten verschwenden.
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, damit er die Verarbeitung anderer Inhalte priorisieren 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 beeinflusst nicht, wie schnell das Bild decodiert wird. Sie wirkt sich nur darauf aus, ob der Browser auf diese Bilddecodierung wartet, bevor er andere Inhalte rendert.
In den meisten Fällen hat dies keine großen Auswirkungen, manchmal kann der Browser jedoch Ihr Bild oder andere Inhalte etwas schneller anzeigen. Wenn Sie beispielsweise bei einem großen Dokument mit vielen Elementen, deren Rendering lange Zeit in Anspruch nimmt, und bei großen Bildern, deren Decodierung viel Zeit in Anspruch nimmt, den Wert sync für wichtige Bilder festlegen, wird der Browser angewiesen, auf das Bild zu warten und beide gleichzeitig zu rendern. Alternativ können Sie async festlegen, damit der Browser Inhalte schneller anzeigen kann und ohne auf die Decodierung des Bildes warten zu müssen.
Normalerweise ist es jedoch besser, übermäßige DOM-Größen zu vermeiden und responsive Bilder zu verwenden, um die Decodierungszeit zu reduzieren, anstatt decoding zu verwenden.
Responsive Bilder mit srcset
Dank dieser max-inline-size: 100%-Deklaration können Ihre Images nicht aus ihren Containern herausbrechen. Wenn ein Nutzer jedoch einen kleinen Bildschirm und ein Netzwerk mit niedriger Bandbreite hat, werden Daten verschwendet, wenn er Bilder in derselben Größe herunterlädt wie Nutzer mit größeren Bildschirmen.
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, wann diese Größen vorhanden sind und wann sie verwendet werden sollen.
Breitenangabe
Sie können einen srcset mithilfe einer durch Kommas getrennten Liste von Werten definieren. Jeder Wert besteht aus der URL eines Bildes, gefolgt von einem Leerzeichen, gefolgt von einigen Metadaten zum Bild, die als Deskriptor bezeichnet werden.
In diesem Beispiel beschreiben die Metadaten die Breite der einzelnen Bilder mithilfe der Einheit w. Ein w ist die Breite von 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 ergänzt das Attribut src und ersetzt es nicht.
Sie benötigen noch ein gültiges src-Attribut, aber der Browser kann seinen Wert durch eine der unter srcset aufgeführten Optionen ersetzen. Um Bandbreite zu sparen, lädt der Browser das größere Bild nur bei Bedarf herunter.
Größen
Wenn Sie den Breitendeskriptor verwenden, müssen Sie auch das Attribut sizes verwenden, um dem Browser weitere Informationen bereitzustellen. So weiß der Browser, in welcher Größe das Bild unter verschiedenen Bedingungen angezeigt werden soll. Diese Bedingungen werden in einer Medienabfrage angegeben.
Für das Attribut sizes wird eine durch Kommas getrennte Liste von 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 teilen Sie dem Browser mit, dass das Bild in einem Darstellungsbereich mit einer Breite über 66em nicht breiter als ein Drittel des Bildschirms angezeigt werden soll (z. B. in einem dreispaltigen Layout).
Bei Breiten des Darstellungsbereichs zwischen 44em und 66em wird das Bild in der Hälfte der Bildschirmbreite angezeigt (wie bei einem zweispaltigen Layout).
Wenn schmaler als 44em angezeigt wird, 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. Ein breites Browserfenster, in dem ein mehrspaltiges Layout angezeigt werden kann, verwendet ein Bild, 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
Mithilfe von Deskriptoren können Sie auch eine alternative Version von Bildern für hochauflösende Displays bereitstellen, damit die Bilder mit der höheren Auflösung gestochen scharf aussehen.
Verwenden Sie den Dichtedeskriptor, um die Pixeldichte des Bildes in Bezug auf das Bild im Attribut src zu beschreiben. Der Dichtedeskriptor ist eine Zahl, auf die der Buchstabe x folgt, wie in 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 ist, kann für medium-image.png in der srcset-Liste 2x hinzugefügt werden.
Sie müssen keine ganzen Zahlen verwenden. Wenn eine andere Version des Bildes 450 × 300 Pixel groß ist, können Sie es mit 1.5x beschreiben.
Präsentationsbilder
Bilder in HTML sind Inhalte. Aus diesem Grund fügen Sie das Attribut alt in eine Bildbeschreibung für Screenreader und Suchmaschinen ein.
Wenn du ein dekoratives Bild ohne sinnvollen Inhalt einbettest, kannst du 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 zeigt einem Screenreader an, dass das Bild ein künstlerisches Bild ist. Ein fehlendes alt-Attribut liefert diese Informationen nicht.
Idealerweise werden Präsentations- oder dekorative Bilder in CSS anstelle von HTML eingefügt. HTML steht für Struktur. CSS dient der Präsentation.
Hintergrundbilder
Verwenden Sie die Eigenschaft background-image in der CSS-Eigenschaft, um Bilder der Präsentation zu laden.
element {
background-image: url(flourish.png);
}
Mit der Funktion image-set für background-image können Sie mehrere mögliche Images angeben.
Die Funktion image-set in CSS funktioniert ähnlich wie das Attribut srcset in HTML.
Stellen Sie eine Liste der Bilder mit einer Beschreibung der Pixeldichte 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 zu Ihrer Website müssen viele Faktoren berücksichtigt werden, darunter:
- Reservieren Sie den richtigen Platz für jedes Bild.
- Herausfinden, wie viele Größen Sie benötigen
- Entscheiden, ob es sich um ein inhaltsbezogenes oder dekoratives Bild handelt
Es lohnt sich, die Zeit für die richtigen Bilder zu nehmen. Schlechte Bildstrategien können Nutzende verärgern und frustrieren. Mit einer guten Bildstrategie wirkt Ihre Website knackig und gestochen scharf, unabhängig vom Gerät oder der Netzwerkverbindung des Nutzers.
Ihr Toolkit enthält ein weiteres HTML-Element, mit dem Sie mehr Kontrolle über Ihre Bilder haben: das picture-Element.
Wissen testen
Testen Sie Ihr Wissen über Bilder.
Damit die Bilder in den Darstellungsbereich passen, müssen Stile hinzugefügt werden.
Mit welchen Stilen können Sie das Bild an diese Proportionen anpassen, wenn für Höhe und Breite eines Bildes ein unnatürliches Seitenverhältnis verwendet wird?
object-fitcontain und cover übereinstimmt.image-fitfit-imageaspect-ratioWenn Sie height und width in Ihre Bilder einfügen, kann das CSS nicht anders gestaltet werden.
Das srcset-Attribut _______ das src-Attribut nicht, es _______ es.
srcset ersetzt definitiv nicht das Attribut src.Fehlendes alt in einem Bild ist dasselbe wie ein leeres alt.
alt-Attribut zeigt einem Screenreader an, dass dieses Bild präsentiert wird.alt“-Signale für einen Screenreader.