6.1 Verwendung des Attributs srcset und sizes
Bildschirme mit hoher Pixeldichte, wie die Retina-Displays von Apple, sind heute Standard für viele moderne Geräte. Diese Displays haben eine viel höhere Anzahl an Pixeln pro Zoll (PPI), was ein schärferes und detaillierteres Bild ermöglicht. Für Webentwickler ist es wichtig, die Grafiken für solche Bildschirme zu optimieren, um den Nutzern ein erstklassiges Erlebnis zu bieten. Schauen wir uns an, wie das geht.
Probleme mit Bildschirmen hoher Dichte
Auf Bildschirmen mit hoher Dichte können Standardbilder unscharf oder verpixelt wirken, da ein Bildpixel über mehrere Bildschirmpixel gestreckt wird. Um dieses Problem zu lösen, müssen Bilder mit höherer Auflösung verwendet werden, die dann vom Browser für die Darstellung auf einem Bildschirm mit hoher Dichte skaliert werden können.
Die Attribute srcset und sizes ermöglichen es, verschiedene Bildversionen für unterschiedliche Pixeldichten anzugeben. Dies hilft dem Browser, das geeignetste Bild für das jeweilige Gerät auszuwählen.
Beispiel für die Verwendung von srcset und sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimierung für Retina-Displays</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Beispielbild für Retina-Displays">
</body>
</html>
Code-Erklärung:
srcset: gibt drei Bildversionen für unterschiedliche Pixeldichten an (1x,2x,3x)-
sizes: definiert die Bildbreite für unterschiedliche Anzeigeumgebungen:- Bis
600px— das Bild nimmt100%der Viewport-Breite ein - Bis
1200px— das Bild nimmt50%der Viewport-Breite ein - In allen anderen Fällen — das Bild nimmt
33%der Viewport-Breite ein
- Bis
6.2 Verwendung von Vektorgrafiken (SVG)
Vektorgrafiken (SVG) sind eine ausgezeichnete Lösung für Bildschirme mit hoher Dichte, da SVG-Dateien ohne Qualitätsverlust skaliert werden können. Sie sind ideal für Logos, Icons und andere UI-Elemente.
Beispiel für die Verwendung von SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verwendung von SVG für Retina-Displays</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Code-Erklärung:
src="images/logo.svg": gibt den Pfad zur SVG-Datei an, die auf jede Größe skaliert werden kann, ohne an Qualität zu verlieren
6.3 Verwendung von CSS
Für Hintergrundbilder kann man Media Queries und CSS-Eigenschaften verwenden, um je nach Pixeldichte des Geräts unterschiedliche Bildversionen zu laden.
Beispiel für die Verwendung von CSS für Hintergrundbilder:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
Code-Erklärung:
.background: definiert das Standard-Hintergrundbild@media only screen and (min-resolution: 2dppx): ersetzt das Hintergrundbild durch eine Version für Bildschirme mit2xDichte@media only screen and (min-resolution: 3dppx): ersetzt das Hintergrundbild durch eine Version für Bildschirme mit3xDichte
6.4 Das picture-Element
Der <picture>-Tag erlaubt es, mehrere Bildquellen mit unterschiedlichen Anzeigebedingungen anzugeben. Das ist nützlich bei komplexeren Fällen der Bildanpassung.
Beispiel für die Verwendung von <picture>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verwendung von <picture> für Retina-Displays</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Beispielbild für Retina-Displays">
</picture>
</body>
</html>
Code-Erklärung:
<source>: gibt verschiedene Bildquellen mit Anzeigebedingungen an<img>: legt das Standardbild für Geräte fest, die<picture>nicht unterstützen
6.5 Beispiele zur Bildoptimierung
Beispiel 1: Adaptives Bild mit hoher Auflösung
Erstellen wir ein Beispiel, bei dem das Bild für Bildschirme hoher Dichte mit den Attributen srcset und sizes optimiert ist:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptives Bild für Retina-Displays</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Beispielbild für Retina-Displays">
</body>
</html>
Code-Erklärung:
srcset: definiert drei Bildversionen für unterschiedliche Pixeldichten (1x,2x,3x)-
sizes: definiert die Bildbreite für unterschiedliche Anzeigeumgebungen:- Bis
600px— das Bild nimmt100%der Viewport-Breite ein - Bis
1200px— das Bild nimmt50%der Viewport-Breite ein - In allen anderen Fällen — das Bild nimmt
33%der Viewport-Breite ein
- Bis
Beispiel 2: Verwendung von SVG für skalierbare Bilder
Erstellen wir ein Beispiel, in dem SVG verwendet wird, um eine hochwertige Darstellung auf jedem Gerät zu gewährleisten:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verwendung von SVG für Retina-Displays</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Code-Erklärung:
src="images/logo.svg": gibt den Pfad zur SVG-Datei an, die auf jede Größe skaliert werden kann, ohne an Qualität zu verlieren
GO TO FULL VERSION