Responsive Bilder: die passende Größe für Smartphone und Computer

Beginne im Website-Editor

Prüfe in WordPress oder einem Website-Baukasten zuerst, was der vorhandene Bildblock macht. Deine Website erstellt möglicherweise bereits kleinere Versionen aus einem einzigen Upload.

1. Lade eine scharfe Vorlage hoch, die genug Details für die größte benötigte Ansicht enthält.
2. Wähle im Block eine passende Bildauflösung, falls diese Einstellung verfügbar ist. Ein schmalerer Block bedeutet nicht automatisch eine kleinere heruntergeladene Datei.
3. Sieh dir die Seite auf einem Telefon und einem Computer an. Prüfe den Ausschnitt, kleine Schrift und die Bildschärfe.

Die Person, die deine Website betreut, kann prüfen, ob passende Bildgrößen ausgeliefert werden. Wenn du HTML selbst bearbeitest, zeigen die Beispiele unten, wie du deine exportierten Dateien einbindest.

Was sind responsive Bilder?

Ein responsives Layout passt die Seite dem Bildschirm an. Responsive Bildauslieferung verändert die angeforderte Datei. Ein Bild mit CSS kleiner darzustellen reduziert nicht automatisch die heruntergeladene Datenmenge.

Auch in einer kleinen Karte kann ein 3000 Pixel breites Foto vollständig geladen werden, wenn Alternativen fehlen. Responsive Bilder bieten passende Varianten für den verfügbaren Platz und können Daten sparen, ohne wichtige Bilder unscharf zu machen.

Es gibt zwei Entscheidungen: Auflösungswechsel bieten dieselbe Komposition mit verschiedenen Pixelmaßen. Art Direction verändert Ausschnitt oder Komposition, wenn ein breites Bild im schmalen Layout nicht funktioniert. Der MDN-Ratgeber zu responsiven Bildern erklärt den Unterschied.

Bildschirmbreite, Darstellungsbreite und Bildpixel

Entscheidend ist zunächst der tatsächliche Bildplatz in CSS-Pixeln. Bei einem 390 Pixel breiten Smartphone und je 16 Pixel Seitenrand bleiben 358 CSS-Pixel für das Bild. Eine Karte in drei Desktop-Spalten kann dagegen nur 320 CSS-Pixel breit sein.

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.

Berücksichtige anschließend die Pixeldichte. Als Planungshilfe multiplizierst du die Darstellungsbreite mit dem Geräte-Pixelverhältnis. Für 358 CSS-Pixel bei 2× ergeben sich etwa 716 Bildpixel. Das hilft bei der Vorbereitung, garantiert aber nicht die konkrete Browserauswahl.

Ein Desktop benötigt nicht automatisch die größte Datei. Umgekehrt können sehr kleine Dateien auf hochauflösenden Smartphones weich aussehen. Prüfe den tatsächlichen Platz und das sichtbare Ergebnis.

Sinnvolle Bildgrößen erstellen

1. Größte vorgesehene Darstellungsbreite ermitteln. Prüfe Inhaltsspalte oder Karte statt den gesamten Bildschirm.
2. Passende Breiten auswählen. Für ein auf 800 CSS-Pixel begrenztes Artikelbild sind etwa 400, 800, 1200 und 1600 Pixel ein erster Test. Das ist ein Beispiel, keine allgemeine Pflicht.
3. Jede Variante aus derselben Quelle erstellen. Nutze Pixilos Größenänderung und behalte beim Auflösungswechsel das Seitenverhältnis. Bewahre das Original auf.
4. Format und Qualität vergleichen. Teste WebP oder JPG → AVIF / PNG → AVIF / WebP → AVIF, wenn deine Veröffentlichung sie unterstützt. Achte darauf, dass Einsparungen nicht aus unlesbarem Text oder fehlenden Details entstehen.
5. Dateien veröffentlichen und einbinden. Pixilo erzeugt Bilddateien, konfiguriert jedoch weder Website-HTML noch CMS oder CDN.
6. Die veröffentlichte Seite prüfen. Kontrolliere angeforderte Datei, Maße und Darstellung bei mehreren Fensterbreiten.

Vergrößere kein kleines Original nur für eine Zielzahl. Hochskalieren stellt keine echten Details wieder her. Nutze eine kleinere Darstellung oder eine bessere Quelle. Bildgröße ohne Verzerrung ändern erklärt die Proportionen.

WordPress und andere CMS prüfen

Dein CMS erzeugt möglicherweise bereits mehrere Größen und responsive HTML. Prüfe die fertige Seite vor einem parallelen manuellen Aufbau. Passen die Größen zu den Bildplätzen des Themes, und unterstützt die gesamte Verarbeitung das gewählte Format?

Plugins oder CDNs können Bilder auf Anfrage umwandeln. Kontrolliere die tatsächlich empfangene Datei statt nur den Uploadnamen. Nach einem Austausch kann der Cache ältere Varianten liefern. Bestätige die neue Auslieferung vor der Bewertung.

Für konkrete WordPress-Schritte lies WordPress-Bilder optimieren. Ziel ist eine nachvollziehbare Auslieferung mit klaren Aufgaben für jede Komponente.

Optional: srcset und sizes in HTML verwenden

Das Beispiel beschreibt ein Artikelbild, das die Fensterbreite abzüglich 32 Pixel Gesamtrand füllt, höchstens jedoch 800 CSS-Pixel. Die Namen sind Beispiele: Lade eigene Varianten hoch und verwende tatsächliche Pfade und Maße.

<img
  src="/images/coast-800.webp"
  srcset="/images/coast-400.webp 400w,
          /images/coast-800.webp 800w,
          /images/coast-1200.webp 1200w,
          /images/coast-1600.webp 1600w"
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600" height="1067"
  alt="Felsküste an ruhigem blauem Meer">

Die w-Angaben müssen den echten Pixelbreiten entsprechen. sizes beschreibt die erwartete Darstellungsbreite für die Auswahl, setzt aber nicht die sichtbare Breite. Dein CSS muss zum beschriebenen Layout passen.

Hier passen ein maximal 800 Pixel breiter Container und display: block; width: 100%; height: auto; für das Bild. Kopiere diese sizes-Angabe nicht in ein anders aufgebautes Kartenraster. Eine kleine Desktop-Karte als 100vw zu beschreiben kann unnötig große Downloads verursachen.

Der Browser kann Dichte und weitere Bedingungen berücksichtigen; erwarte eine geeignete Variante statt eines garantierten Namens. Mische Breitenangaben nicht mit Dichteangaben wie 2x in derselben Liste. Die srcset-Referenz von MDN erläutert die Regeln.

Wann Smartphones einen anderen Ausschnitt brauchen

Ein breites Banner kann auf dem Smartphone so flach werden, dass sein Motiv winzig bleibt. Mehr Pixel lösen das Kompositionsproblem nicht. Erstelle einen engeren Ausschnitt und wähle ihn mit einer Medienbedingung in picture.

Bereite ihn gezielt mit Bild zuschneiden vor. Behalte genug Kontext und kontrolliere darüberliegenden Text. Ein allein ansprechender Ausschnitt kann das Motiv unter einer Überschrift oder Schaltfläche platzieren.

Verschiedene Kompositionen erhöhen den Pflegeaufwand. Nutze sie, wenn das schmale Layout sie braucht, nicht für jedes Bild automatisch. Bei unterschiedlichen Seitenverhältnissen muss das Layout an jedem Übergang passenden Platz reservieren. Die picture-Referenz erklärt die Auswahl.

Abmessungen, Lazy Loading und das Hauptbild

Gib korrekte width- und height-Attribute an, damit das Seitenverhältnis vor dem Download bekannt ist. Zusammen mit proportionaler CSS-Skalierung lässt sich Platz reservieren. Bei festen CSS-Maßen oder anderen Ausschnitten prüfe, ob der reservierte Bereich weiterhin stimmt.

Weit unterhalb der ersten Ansicht liegende Bilder eignen sich für loading="lazy". Ein wichtiges sofort sichtbares Bild sollte normalerweise ohne Lazy Loading starten. Ein verspätetes Hauptbild schadet auch bei kleiner Datei. Siehe web.devs Anleitung zum Bildladen.

Zeigt eine Messung ein bestimmtes Bild als Largest-Contentful-Paint-Element, erwäge gezielt fetchpriority="high". Gib nicht jedem Bild hohe Priorität. Responsive Größen lösen weder langsame Serverantworten noch ein spät entdecktes Hauptbild.

Responsive Bilder testen

1. Öffne die veröffentlichte Seite bei Smartphone-, Tablet- und Desktop-Breiten.
2. Prüfe Darstellungsbreite und gewählte URL. Die Eigenschaft currentSrc zeigt die ausgewählte Ressource.
3. Kontrolliere die übertragene Größe im Netzwerkrequest. Deaktiviere nötigenfalls den Cache für einen frischen Test.
4. Beurteile Text, Kanten und Ausschnitt in normaler Darstellungsgröße.
5. Lade die Seite bei jeder Breite neu. Das Verkleinern einer bereits geladenen Seite bildet einen neuen Besuch nicht zuverlässig nach.
6. Miss das Ladeverhalten vor und nach der Änderung unter vergleichbaren Bedingungen.

Lädt das Smartphone weiterhin eine riesige Datei, prüfe vorhandenes srcset, echte Breitenangaben und zutreffendes sizes. Bei Unschärfe kontrolliere zuerst die Quelldimensionen. Bei Verzerrung korrigiere das Seitenverhältnis statt eine größere Datei hinzuzufügen.

Responsive Bilder und SEO

Responsive Auslieferung vermeidet unnötige Bilddaten, garantiert aber keine Rankings. Nutze relevante Bilder und hilfreichen Alternativtext. Behalte bei picture ein img mit gültigem src. Googles Bild-SEO-Dokumentation behandelt Auffindbarkeit und responsives HTML.

Zu Laden, Layoutverschiebungen und Seitenerlebnis lies Bilder und Core Web Vitals. Miss die echte Seite, statt aus einer kleineren Datei eine Verbesserung sämtlicher Kennzahlen abzuleiten.

Häufige Fragen

Reicht width: 100% für responsive Bilder?

Es kann die sichtbare Größe an den Container anpassen. Kleinere Downloadvarianten entstehen dadurch nicht. Dafür brauchst du passende Dateien und responsives HTML.

Brauche ich für jedes Smartphone ein eigenes Bild?

Nein. Biete eine überschaubare Auswahl passender Größen an. Der Browser wählt; einzelne Gerätemodelle musst du nicht erkennen.

Muss jedes Bild doppelt so breit wie seine Darstellung sein?

Nein. Eine 2×-Variante ist für manche Displays hilfreich, keine allgemeine Pflicht. Wäge Schärfe und Dateigröße ab und halte kleinere Varianten bereit.

Kann Pixilo srcset in meine Website einfügen?

Pixilo erstellt angepasste Bilddateien. Website, Template, CMS oder Bilddienst müssen sie veröffentlichen und responsiv einbinden.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)