Responsive-Bilder-Rechner
srcset und sizes berechnen: aus Bildbreite, Layout und Breakpoints sinnvolle Bildgrößen und fertigen img-Code erzeugen.
Der Responsive-Bilder-Rechner erzeugt srcset und sizes für responsive Bilder. Du gibst die Originalgröße, die Anzeigebreite je Breakpoint (in vw oder px) und die gewünschten Pixeldichten an. Das Tool berechnet sinnvolle Bildbreiten, setzt sie zu einem fertigen img- oder picture-Tag zusammen und begrenzt sie auf die Originalgröße.
Anzeigebreite je Breakpoint
Benötigte Bildbreiten
| Datei | Breite | Höhe |
|---|---|---|
| /bilder/hero-520.jpg | 520px | 347px |
| /bilder/hero-640.jpg | 640px | 427px |
| /bilder/hero-1030.jpg | 1030px | 687px |
| /bilder/hero-1280.jpg | 1280px | 853px |
Seitenverhältnis 1.5 : 1. Exportiere dein Bild in diesen Breiten.
<img
src="/bilder/hero-1280.jpg"
srcset="/bilder/hero-520.jpg 520w,
/bilder/hero-640.jpg 640w,
/bilder/hero-1030.jpg 1030w,
/bilder/hero-1280.jpg 1280w"
sizes="(min-width: 1024px) 480px, (min-width: 640px) 50vw, 100vw"
width="2400"
height="1600"
alt="Beschreibung des Bildes"
loading="lazy"
decoding="async"
/>Responsive Bilder mit srcset und sizes
Ein einziges großes Bild für alle Geräte verschwendet Datenvolumen und verlangsamt die Seite.
Mit srcset bietest du mehrere Breiten an, mit sizes beschreibst du die
Anzeigebreite. Der Browser wählt selbstständig die passende Datei, abhängig von Fensterbreite und
Pixeldichte.
Die Bausteine
| Attribut | Aufgabe |
|---|---|
srcset | Liste der Bilddateien mit Breitenangabe (480w) |
sizes | Anzeigebreite je Bedingung, etwa 50vw |
width/height | Reserviert Platz und verhindert Layoutsprünge |
loading="lazy" | Lädt Bilder erst kurz vor dem Sichtbereich |
<picture> | Bietet moderne Formate wie AVIF und WebP an |
So gehst du vor
- Originalgröße und Layout-Breiten eintragen.
- Bilder in den angezeigten Breiten exportieren. Formate wandelt der Bildformat-Konverter um, die Größe verkleinert der Bilder-Komprimierer.
- Tag kopieren und ins Template einsetzen. Das Seitenverhältnis rechnest du im Seitenverhältnis-Rechner.
Beispiel
Ein Bild ist mobil vollbreit, ab 640 px halbe Breite und ab 1024 px 480 px breit. Der Rechner
erzeugt sizes="(min-width: 1024px) 480px, (min-width: 640px) 50vw, 100vw" und die Breiten
für 1x und 2x. Ein 2400-px-Original deckt dabei alle Fälle ab.
Häufige Fragen
Wozu dienen srcset und sizes?
srcset listet dieselbe Datei in verschiedenen Breiten. sizes sagt dem Browser, wie breit das Bild im Layout dargestellt wird. Daraus wählt er die kleinste passende Datei und spart Datenvolumen, vor allem auf Smartphones.
Wie lese ich den sizes-Wert?
Von links nach rechts gilt die erste passende Bedingung. „(min-width: 1024px) 480px, (min-width: 640px) 50vw, 100vw“ bedeutet: ab 1024 px Viewport ist das Bild 480 px breit, ab 640 px halb so breit wie das Fenster, sonst vollbreit.
Warum brauche ich 2x-Bilder?
Displays mit doppelter Pixeldichte (Retina) zeigen ein 480 px breites Bild scharf, wenn 960 Bildpixel vorliegen. Der Rechner berücksichtigt das über die gewählten Pixeldichten.
Warum werden Breiten auf das Original begrenzt?
Hochskalieren macht ein Bild nicht schärfer, sondern nur größer. Breiten über der Originalgröße wären wertlos und werden deshalb auf das Original gekappt.
Was bringen width und height im img-Tag?
Sie verraten dem Browser das Seitenverhältnis, bevor das Bild geladen ist. Der Platz wird reserviert, das Layout springt nicht (Cumulative Layout Shift).
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.