Pixel, Auflösung und Bildformate verständlich erklärt

Der Name dieser Website verrät es: Hier geht es um Pixel. Bilder sind auf fast jeder Website die größten Dateien und damit der wichtigste Hebel für Qualität und Ladezeit. Wer versteht, wie Pixel, Auflösung und Bildformate zusammenhängen, liefert schärfere Bilder in kleineren Dateien aus. Dieser Ratgeber erklärt die Grundlagen von der Theorie bis zur Exporteinstellung.

Was ist ein Pixel?

Ein Pixel, kurz für “picture element”, ist der kleinste Bildpunkt eines Rasterbildes. Ein Foto mit 1.200 × 800 Pixeln besteht aus 960.000 einzelnen Punkten, von denen jeder genau eine Farbe hat. Vergrößert man ein Rasterbild stark, werden die Pixel als Treppenstufen sichtbar.

Pixel, ppi und dpi

Die Begriffe werden oft verwechselt:

• Pixelmaße (zum Beispiel 1.600 × 900) beschreiben, wie viele Bildpunkte ein Bild hat. Nur das zählt am Bildschirm.
• ppi (pixels per inch) beschreibt die Pixeldichte eines Displays oder wie dicht die Pixel eines Bildes beim Druck verteilt werden.
• dpi (dots per inch) stammt aus dem Druck und beschreibt, wie viele Druckpunkte ein Drucker pro Zoll setzt. Im Alltag wird dpi oft gleichbedeutend mit ppi verwendet.

Ein Bild mit 1.600 Pixeln Breite sieht im Browser gleich aus, egal ob in der Datei 72 oder 300 dpi eingetragen sind. Die alte Regel “fürs Web 72 dpi” ist deshalb ein Mythos. Wichtig wird die Dichte erst im Druck: Bei der verbreiteten Faustregel von 300 dpi braucht ein Foto für 10 Zentimeter Druckbreite rund 1.180 Pixel. Mehr dazu im Ratgeber Grafikdesign für Print.

Hochauflösende Bildschirme

Moderne Smartphones und viele Laptops haben Displays, bei denen ein Pixel im CSS-Layout aus zwei, drei oder mehr physischen Bildpunkten besteht. Ein Bild, das im Layout 400 Pixel breit ist, wirkt dort nur gestochen scharf, wenn es 800 oder mehr Pixel hat. Statt immer das größte Bild zu laden, beschreibt man im HTML mit den Attributen srcset und sizes mehrere Größen. Der Browser wählt dann die passende Datei für Bildschirm und Layout.

Die Bildformate im Vergleich

Faustregeln für den Alltag:

• Fotos: WebP oder AVIF, als Rückfall JPG.
• Logos, Icons, einfache Illustrationen: SVG.
• Screenshots mit Text, Grafiken mit wenigen Farben: PNG oder verlustfreies WebP.
• Animationen: statt großer GIFs lieber ein kurzes Video oder animiertes WebP.

Komprimierung: kleiner ohne sichtbaren Verlust

Verlustbehaftete Formate werfen Bildinformationen weg, die das Auge kaum vermisst. Ein Qualitätswert um 75 bis 85 Prozent sieht bei den meisten Fotos genauso aus wie 100 Prozent, ist aber oft nur einen Bruchteil so groß. Verlustfreie Kompression verkleinert ohne Qualitätsverlust, aber weniger stark. Prüfen Sie das Ergebnis immer bei 100 Prozent Ansicht, besonders an Kanten, Haut und Verläufen.

Zusätzlich lohnt es sich, Metadaten wie Kamerainformationen beim Export zu entfernen. Sie vergrößern die Datei und können persönliche Daten wie den Aufnahmeort enthalten.

Bilder richtig einbinden

1. In der passenden Größe exportieren: kein 6.000 Pixel breites Kamerafoto in eine 800 Pixel breite Spalte.
2. Breite und Höhe im HTML angeben, damit der Browser Platz reserviert und das Layout beim Laden nicht springt.
3. Bilder unterhalb des ersten Bildschirms verzögert laden mit loading="lazy", das wichtigste Bild oben dagegen sofort.
4. Alternativtexte schreiben, die beschreiben, was das Bild zeigt und warum es da ist. Rein dekorative Bilder bekommen ein leeres alt-Attribut.
5. Dateinamen sprechend wählen, etwa farbkreis-komplementaerfarben.webp statt IMG_4711.jpg.

Bildrechte nicht vergessen

Technik ist nur die halbe Miete. Jedes Bild auf einer Website braucht eine Nutzungserlaubnis. Auch bei kostenlosen Bilddatenbanken gelten Lizenzbedingungen, und Personen auf Fotos haben ein Recht am eigenen Bild. Im Zweifel helfen eigene Fotos, selbst erstellte Grafiken oder Bilder mit klarer Lizenz.

Weiter im Thema

Welche Bildmaße soziale Netzwerke erwarten, steht im Ratgeber Social-Media-Profil gestalten. Wie Bilder das Gesamtbild einer Seite prägen, zeigen die Tipps für ansprechendes Webdesign.