Die passenden Bildgrößen für Websites

Ermittle den Platz im eigenen Layout

Ermittle die Breite des Bildbereichs auf deiner Seite, statt die gesamte Breite des Browserfensters zu verwenden. Beginne mit den vom Theme oder Bildblock empfohlenen Maßen. Falls sie fehlen, prüfe die angezeigte Breite mit den Entwicklerwerkzeugen oder bitte die Person, die deine Website betreut, sie auf einem Telefon und einem Computer zu ermitteln. Berücksichtige auch größere Galerie- oder Zoomansichten.

Wenn ein Bild 720 Pixel breit angezeigt wird, vergleiche Versionen mit 720 und 1440 Pixeln Breite. Die größere kann auf einem Bildschirm mit hoher Pixeldichte schärfer aussehen. Prüfe aber, ob die zusätzlichen Details die größere Datei rechtfertigen. Nutze eine ausreichend große Vorlage: Das Vergrößern von 900 auf 1440 Pixel stellt fehlende Details nicht wieder her.

Ausgangswerte nach Platzierung wählen

Ein 2400-Pixel-Titelbild passt nicht automatisch für alle. Ein Telefon braucht vielleicht eine kleinere Variante oder einen anderen Ausschnitt. Ein Produktzoom benötigt dagegen eventuell eine eigene größere Datei als die normale Karte.

Pixel und Dateigröße unterscheiden

Pixelmaße beschreiben das Raster, etwa 1200 × 800. Dateigröße beschreibt Speicherung und Übertragung in Kilobytes oder Megabytes. Gleiche Maße können wegen Details, Format und Komprimierung sehr unterschiedliche Dateien ergeben.

Ein CSS-Pixel misst die sichtbare Größe im Seitenlayout. Auf einem Bildschirm mit hoher Pixeldichte kann ein CSS-Pixel mehrere physische Bildschirmpixel nutzen. Ein scharfes Bild kann daher mehr Bildpixel benötigen als seine angezeigte Breite.

Beginne beim Layout. Ein Foto mit 600 CSS-Pixeln Anzeigebreite braucht meist nicht dieselbe Quelle wie ein bildschirmfüllendes Desktopfoto. Displays mit hoher Pixeldichte können von zusätzlichen Bildpixeln profitieren. Ob sich das lohnt, hängt von Bildinhalt und zusätzlicher Dateigröße ab.

Proportionen bewusst erhalten

Lass in Pixilos Größenwerkzeug das Seitenverhältnis gesperrt und gib für ein Original mit 3000 × 2000 Pixeln eine Breite von 1200 ein. Die Höhe wird automatisch 800. Du musst nicht beide Maße berechnen und eingeben. Prüfe, dass Gesichter und Kreise ihre Form behalten.

Schneide ein breites Foto für quadratische Vorschaubilder zu, statt es zusammenzudrücken. Nutze Zuschneiden und halte das Motiv im auch mobil sichtbaren Bereich. Vergrößerung rekonstruiert keine nie aufgenommenen Details.

Passende Größen ausliefern

Responsive Bildauszeichnung lässt den Browser zwischen Dateien wählen. Breitenbasiertes srcset und sizes beschreiben verfügbare Breiten und Anzeigeflächen; sie erstellen keine Dateien. Beispiele bietet MDNs Ratgeber zu responsiven Bildern.

Prüfe, ob dein CMS bereits Varianten und Markup erzeugt. Exportiere bei statischen Seiten benötigte Dateien und referenziere sie im Code. Drei unverbundene Uploads machen die Auslieferung nicht responsiv.

Ein Ziel für die Dateigröße festlegen

Teste typische Bilder und die ganze Seite. Zwölf Produktkarten brauchen ein anderes Budget als ein Portfolio mit einem detailreichen Foto. Kein einzelner Kilobytewert garantiert schnelles Laden oder gute Qualität.

1. Prüfe das Bild in echter Anzeigegröße.
2. Vergleiche kleinere Maße und ein effizienteres Format.
3. Prüfe die Größe der heruntergeladenen Datei und die sichtbaren Details.
4. Teste mobil, bevor du die Vorgabe wiederverwendest.

Titelbilder, Produktbilder und Vorschaubilder unterscheiden

Verschwindet das Motiv eines breiten Titelbilds auf Mobilgeräten, erstelle einen eigenen Ausschnitt statt das Bild zu verzerren. Ein Produktzoom kann eine separate große Datei brauchen, die nicht jede kleine Produktkarte laden muss. Ein quadratisches Vorschaubild entsteht durch Beschneiden, nicht durch Zusammendrücken.

Notiere pro Platzierung Seitenverhältnis, maximale Anzeigebreite, mögliche Dateibreiten und notwendige Details. Prüfe diese Vorgaben nach einem Themewechsel. Lädt ein Telefon weiterhin die größte Datei, kontrolliere die responsive Bildauswahl. Eine zusätzliche kleine Datei hilft nicht, wenn die Seite sie nicht verwendet.