Bilder für die Website: Formate, Größen, Dateigröße

Warum Bildgröße zählt

Bilder sind auf fast jeder Website der mit Abstand größte Posten beim Datenvolumen. Ein einziges unbearbeitetes Foto aus einer modernen Kamera bringt schnell 5 bis 10 Megabyte auf die Waage – so viel wie eine komplette, gut gebaute Seite mit einem Dutzend optimierter Bilder.

Die Folgen spürt man sofort: Die Seite lädt zäh, besonders auf dem Handy und bei schwächerem Netz. Und Ladezeit ist kein Schönheitsthema – wer zu lange wartet, ist weg, bevor überhaupt etwas zu sehen ist. Tempo wirkt außerdem auf die Auffindbarkeit bei Google.

Die gute Nachricht: Ein für das Web aufbereitetes Bild ist optisch nicht vom Original zu unterscheiden – nur eben ein Bruchteil so groß. Aus 8 Megabyte werden 150 Kilobyte, ohne dass es jemand sieht. Es ist reine Verschwendung, das nicht zu tun.

Welches Format wann

Vier Formate decken praktisch alles ab. Die Wahl ist einfacher, als sie klingt:

JPG (JPEG) – für Fotos

Der Standard für Fotos und alle Bilder mit vielen Farbverläufen. JPG komprimiert stark und ist überall nutzbar. Der Haken: Es kann keine Transparenz, und jedes Speichern verliert etwas Qualität. Für Landschaften, Porträts, Produktfotos ist es die richtige Wahl.

PNG – für Transparenz und scharfe Kanten

PNG beherrscht durchsichtige Hintergründe und stellt harte Kanten pixelgenau dar – ideal für Logos, Symbole, Screenshots mit Text oder Grafiken mit klaren Flächen. Der Preis: Bei Fotos werden PNG-Dateien riesig. Ein Foto gehört nie als PNG gespeichert.

Kurz gesagt: PNG immer dann, wenn Sie einen transparenten Hintergrund brauchen oder Text und Linien gestochen scharf bleiben sollen.

WebP – der moderne Allrounder

WebP ist das Format der Wahl für das heutige Web. Es kann beides – Fotos wie JPG und Transparenz wie PNG – und ist dabei rund 25 bis 35 Prozent kleiner bei gleicher Qualität. Alle aktuellen Browser unterstützen es. Wo immer möglich, sollten Bilder als WebP ausgeliefert werden.

SVG – für Logos und Icons

Kein Pixel-, sondern ein Vektorformat: SVG beschreibt Formen mathematisch und bleibt deshalb bei jeder Größe gestochen scharf – vom Favicon bis zum riesigen Logo. Für Logos, Icons und einfache Grafiken unschlagbar, für Fotos ungeeignet.

Ergänzend gibt es AVIF, ein noch neueres Format, das WebP in der Kompression oft noch übertrifft. Es ist eine gute Zukunftsoption; WebP ist derzeit der sichere Standard.

Die richtigen Pixelmaße

Das Wichtigste zuerst: Was für die Anzeige zählt, sind die Pixelmaße (Breite × Höhe), nicht irgendeine DPI-Angabe (dazu gleich mehr). Ein Bild muss nur so viele Pixel haben, wie es auf dem Bildschirm einnimmt – großzügig gerechnet für hochauflösende Displays.

Als Orientierung für die häufigsten Fälle:

• Großes Kopfbild (Hero, volle Breite): etwa 1920 bis 2560 Pixel breit. Das deckt auch große Monitore ab.
• Inhaltsbild in normaler Breite (etwa halbe bis dreiviertel Seitenbreite): rund 1200 bis 1600 Pixel breit.
• Kleines Bild, das sich nicht per Klick vergrößert (Teaser, Vorschau, Icon-Bild): so breit, wie es angezeigt wird, mal zwei – meist 600 bis 900 Pixel. Mehr ist verschenkt, weil man den Unterschied nicht sieht.
• Bild in einer Galerie, das per Klick groß wird: Für die Vorschau die kleine Regel, für die Großansicht bis etwa 2000 Pixel.

Faustregel: Ein Bild sollte nie deutlich mehr Pixel haben, als es auf dem Bildschirm belegt. Ein 6000 Pixel breites Foto in einer 800 Pixel breiten Spalte lädt fünfmal so viele Daten, wie je zu sehen sind.

Ein Hinweis zu modernen Websites: Ein gut gebautes System erzeugt aus einem Bild automatisch mehrere Größen und liefert jedem Gerät die passende aus. Das ersetzt aber nicht die Vorarbeit – wenn das Ausgangsbild 8 Megabyte hat, sollte es trotzdem zuerst auf ein vernünftiges Maß gebracht werden.

JPG-Qualität und Kompression

Beim Speichern als JPG oder WebP wählt man eine Qualitätsstufe, meist auf einer Skala von 0 bis 100. Hier liegt der größte Hebel – und ein weit verbreiteter Irrtum: 100 Prozent ist nicht nötig und meist Verschwendung.

• 75 bis 80 Prozent ist für die allermeisten Bilder der ideale Bereich. Optisch nicht vom Original zu unterscheiden, aber deutlich kleiner.
• Unter 60 Prozent werden Artefakte sichtbar – körnige Flächen, Ränder um Kanten.
• 90 Prozent und mehr lohnt nur bei Bildern, bei denen es auf feinste Details ankommt – und kostet viel Dateigröße für einen kaum sichtbaren Gewinn.

Am besten probiert man es aus: Die meisten Werkzeuge zeigen die Dateigröße und eine Vorschau, während man die Qualität verschiebt. Man dreht herunter, bis man den ersten Unterschied bemerkt, und geht dann eine Stufe zurück.

Der 72-DPI-Mythos

Kaum ein Bildthema hält sich so hartnäckig wie die Regel „Webbilder müssen 72 DPI haben". Die Wahrheit ist: Für die Anzeige am Bildschirm spielt die DPI-Angabe keine Rolle.

DPI (genauer: PPI) beschreibt, wie viele Bildpunkte auf einen Zoll gedruckt werden. Für den Druck ist das wichtig. Ein Browser dagegen interessiert sich ausschließlich für die Pixelmaße – die DPI-Angabe in der Datei wird schlicht ignoriert. Ein Bild mit 1600 Pixeln Breite sieht am Bildschirm exakt gleich aus, egal ob in der Datei „72 DPI" oder „300 DPI" steht, und ist auch praktisch gleich groß.

Was Sie sich merken können: Vergessen Sie DPI für das Web. Kümmern Sie sich um zwei Dinge – die richtigen Pixelmaße und eine vernünftige Kompression. Das „auf 72 DPI stellen" ist nicht falsch, es bringt nur nichts.

Wie groß darf eine Datei sein

Ein guter Zielwert, an dem man sich festhalten kann – nach der Optimierung, nicht vorher:

• Großes Kopfbild: möglichst unter 200 bis 300 Kilobyte.
• Normales Inhaltsbild: unter etwa 150 Kilobyte.
• Kleines Bild oder Teaser: unter 60 bis 80 Kilobyte.

Das sind Richtwerte, keine Gesetze – ein besonders detailreiches Foto darf auch mal darüber liegen. Aber wenn ein einzelnes Bild mehrere Megabyte hat, ist etwas schiefgelaufen, und es lohnt sich immer, das zu korrigieren.

Wie Sie ein zu großes Bild konkret verkleinern und in WebP umwandeln – mit kostenlosen Werkzeugen für Windows, Mac und im Browser –, zeigt unsere Anleitung Bilder fürs Web optimieren.

Häufige Fehler

• Das Original hochladen. Direkt von Kamera oder Handy, mehrere Megabyte – der häufigste und folgenreichste Fehler.
• Ein Foto als PNG speichern. Bläht die Datei unnötig auf. PNG nur für Transparenz und scharfe Kanten.
• Qualität auf 100 Prozent. Kostet viel Größe für keinen sichtbaren Gewinn.
• Riesige Pixelmaße für kleine Anzeigeflächen. Ein 6000-Pixel-Bild in einer schmalen Spalte lädt Daten, die niemand sieht.
• Am Alternativtext sparen. Jedes inhaltstragende Bild braucht eine Beschreibung – wichtig für Barrierefreiheit nach WCAG 2.2 und für Suchmaschinen.