Bildgrössen auf Websites: Formate, Masse und schnelle Ladezeiten

Bilder werten deine Website auf, vermitteln Stimmung und ergänzen deine Texte. Damit die Seite trotzdem schnell lädt, kommt es auf die richtige Bildgrösse und das richtige Format an. Zu grosse Bilddateien bremsen die Ladezeit und können Besucherinnen und Besucher kosten. Diesen Beitrag haben wir überarbeitet: neu mit WebP und AVIF, responsiven Bildern, Lazy Loading und Alt-Texten.

Warum die Bildgrösse so wichtig ist

1. Schnellere Ladezeiten

Google misst die Ladegeschwindigkeit unter anderem mit dem Largest Contentful Paint (LCP): dem Zeitpunkt, an dem das grösste sichtbare Element erscheint – zum Beispiel das grosse Bild im Kopfbereich. Gut ist ein LCP von höchstens 2,5 Sekunden, gemessen an 75 Prozent der Seitenaufrufe. Je kleiner die Bilddatei, desto schneller ist das Bild da, besonders auf dem Handy.

2. Bessere Nutzererfahrung

Richtig dimensionierte, scharfe Bilder wirken professionell. Unscharfe, verpixelte oder verzerrte Bilder senken dagegen den Eindruck von Qualität – egal wie gut dein Angebot ist.

3. Bessere Auffindbarkeit

Ladezeit ist Teil dessen, was Google «Page Experience» nennt. Google betont, dass es dafür kein einzelnes Signal gibt und gute Werte allein keine Spitzenplätze garantieren. Schnelle Seiten zahlen aber auf das ein, was die Ranking-Systeme belohnen sollen. Dazu kommen Alt-Texte und Dateinamen, mit denen Google versteht, was auf deinen Bildern zu sehen ist.

Pixel zählen, nicht ppi

Ein hartnäckiger Mythos lautet, Bilder fürs Web müssten «72 ppi» haben. Für die Darstellung am Bildschirm spielt dieser Wert keine Rolle: Ein Bild mit 1000 × 1000 Pixeln sieht mit 72 ppi genau gleich aus wie mit 300 ppi. Entscheidend sind die Pixelmasse und die Dateigrösse.

Dazu kommt: Viele Bildschirme haben eine höhere Pixeldichte. Der Browser rechnet die Breite, in der ein Bild im Layout erscheint, mit diesem Faktor hoch. Auf einem Bildschirm mit doppelter Dichte braucht ein 800 Pixel breiter Bildbereich also ein rund 1600 Pixel breites Bild, damit es gestochen scharf wirkt.

Richtwerte für gängige Einsatzbereiche

Diese Masse beschreiben, wie gross ein Bild auf dem Bildschirm erscheint. Lade das Original grösser hoch und lass dein System kleinere Varianten erzeugen (mehr dazu unten).

• Inhaltsbilder, Blogartikel, Galerien: 800 × 600 px, Seitenverhältnis 4:3
• Allgemeine Inhalte, kleinere Header: 1024 × 768 px, 4:3
• Slider, grosse Teaserbilder: 1280 × 720 px, 16:9
• Vollbild-Header, Hero-Bilder: 1920 × 1080 px, 16:9

Unsere Faustregel für Bilder in Artikeln: 1600 bis 2400 Pixel breit und höchstens rund 500 KB.

Das richtige Format wählen

• AVIF: komprimiert Fotos besonders stark – verlustbehaftete AVIF-Dateien sind laut MDN rund 50 Prozent kleiner als vergleichbare JPEGs. Alle wichtigen Browser unterstützen AVIF seit Januar 2024. Gib trotzdem ein zweites Format als Rückfalloption mit.
• WebP: laut MDN im Schnitt 25 bis 35 Prozent kleiner als JPEG bei ähnlicher Qualität und breit unterstützt. Kann auch Transparenz, ist also oft eine Alternative zu PNG.
• JPEG: für Fotos weiterhin solide, vor allem als Rückfalloption.
• PNG: wenn ein Bild verlustfrei und exakt wiedergegeben werden muss.
• SVG: für Logos, Icons und Illustrationen. Vektorgrafiken bleiben in jeder Grösse scharf.
• GIF: für Animationen nicht mehr empfehlenswert. Ein kurzes Video ist meist viel kleiner: Im Beispiel von web.dev schrumpft ein GIF von 3,7 MB als MP4 auf 551 KB und als WebM auf 341 KB.

Google Search kann übrigens alle diese Formate verarbeiten, auch WebP, SVG und AVIF.

Responsive Bilder: srcset und sizes

Ein Handy braucht kein Bild in voller Desktop-Breite. Mit den HTML-Attributen srcset und sizes bietest du dem Browser mehrere Breiten desselben Bildes an, zum Beispiel 640, 1280 und 1920 Pixel. Mit sizes sagst du ihm, wie breit das Bild im Layout erscheint. Der Browser wählt dann selbst die passende Datei, inklusive Pixeldichte des Geräts.

Mit dem Element picture kannst du zusätzlich mehrere Formate anbieten: zuerst AVIF, dann WebP, als Rückfalloption JPEG. Ein gutes CMS erzeugt diese Varianten beim Hochladen automatisch. Frag nach, ob deines das tut.

Lazy Loading – aber richtig

Mit loading="lazy" lädt der Browser Bilder erst, wenn jemand in ihre Nähe scrollt. Das spart Daten und entlastet die Leitung. Aber Vorsicht:

• Nicht für Bilder im ersten sichtbaren Bereich, vor allem nicht für das LCP-Bild. Sonst lädt gerade das wichtigste Bild später. web.dev empfiehlt, oben sichtbare Bilder normal zu laden und nur den Rest verzögert.
• Das Headerbild priorisieren: Mit fetchpriority="high" sagst du dem Browser, dass dieses Bild wichtig ist. Setz das sparsam ein, nur für wirklich zentrale Bilder.
• Breite und Höhe angeben: Fehlen width und height, reserviert der Browser keinen Platz, und der Text springt beim Laden nach unten. Das verschlechtert den Cumulative Layout Shift (CLS) und nervt beim Lesen.

Alt-Texte: Bilder für alle verständlich machen

Der Alt-Text beschreibt ein Bild für Menschen, die es nicht sehen, und laut Google ist er auch für die Bildersuche das wichtigste Attribut. Die Web Accessibility Initiative (WAI) des W3C unterscheidet:

• Informative Bilder: kurz beschreiben, was für das Verständnis wichtig ist.
• Dekorative Bilder: leerer Alt-Text (alt=""), damit Screenreader sie überspringen.
• Bilder als Link oder Button: die Funktion beschreiben, nicht das Aussehen, etwa «Drucken» statt «Druckersymbol».

Vermeide Keyword-Aufzählungen im Alt-Text: Laut Google kann das dazu führen, dass deine Website als Spam eingestuft wird. Gib Bildern ausserdem sprechende Dateinamen: «vereinshaus-eingang-rampe.jpg» statt «IMG_0234.jpg».

Häufige Fehler – und wie du sie vermeidest

• Bild in Originalgrösse eingebunden: Das Handyfoto mit 4000 Pixeln wird auf 800 Pixel verkleinert angezeigt, aber voll geladen. Lösung: feste Bildgrössen im CMS und srcset.
• Zu grosse Dateien: Nutze WebP oder AVIF für Fotos und SVG für Logos. Komprimiere vor dem Hochladen, zum Beispiel mit Squoosh, TinyPNG oder ImageOptim.
• Unscharfe Bilder: Nicht der ppi-Wert ist schuld, sondern zu wenige Pixel oder zu starke Kompression. Greif auf ein grösseres Original zurück und komprimiere behutsam.
• Headerbild mit Lazy Loading: Das bremst den LCP. Oben sichtbare Bilder immer normal laden.
• Fehlender oder nichtssagender Alt-Text: «Bild» oder «Foto1» hilft niemandem.
• Bild wird nicht angezeigt: Prüfe Pfad und Dateinamen. Beides muss exakt mit dem Speicherort übereinstimmen, inklusive Endung wie .jpg oder .webp.

Checkliste für deine Bilder

• Teste deine wichtigsten Seiten mit Google PageSpeed Insights. Das Tool zeigt, welche Bilder zu gross sind oder besser verzögert geladen würden.
• Fotos als WebP oder AVIF, Logos und Icons als SVG.
• Mehrere Bildgrössen per srcset, passend zum Layout.
• Lazy Loading nur unterhalb des ersten sichtbaren Bereichs.
• Breite und Höhe bei jedem Bild angegeben.
• Jedes informative Bild hat einen passenden Alt-Text, dekorative Bilder einen leeren.

Schnelle Bilder von Anfang an

Du planst eine neue Website oder willst wissen, ob deine Bilder deine Seite ausbremsen? Wir beraten dich gern. Mehr zu unserem Angebot findest du unter Webdesign.