Pixelmaße anpassen — mit Seitenverhältnis, Prozent und Vorgaben.
Der häufigste Fehler: das Originalfoto hochladen
Eine Handykamera liefert heute Bilder mit 4000 Pixeln Breite und mehreren Megabyte. Angezeigt wird das Foto auf der Webseite aber vielleicht in einer 800 Pixel breiten Spalte. Der Browser lädt trotzdem die volle Datei und rechnet sie erst danach klein — die Ladezeit zahlt der Besucher.
Auf dem Schreibtisch mit schnellem Anschluss fällt das kaum auf. Am Handy im Zug schon, und genau dort entscheidet sich, ob jemand bleibt oder abspringt.
Die richtige Reihenfolge
- Zuschneiden: Erst den Ausschnitt festlegen, den man wirklich zeigen will. Alles, was weggeschnitten wird, muss danach nicht mehr verarbeitet werden. Dafür gibt es Bild zuschneiden.
- Skalieren: Auf die Breite bringen, in der das Bild angezeigt wird — für die meisten Layouts sind 1200 Pixel großzügig bemessen. Das erledigt Bildgröße ändern.
- Format wählen und komprimieren: Zum Schluss als WebP mit etwa 80 Prozent Qualität speichern, über JPG in WebP umwandeln.
Diese Reihenfolge ist wichtig. Wer zuerst komprimiert und danach skaliert, verliert doppelt Qualität und spart weniger.
Richtwerte für die Praxis
| Einsatz | Breite | Zielgröße |
|---|---|---|
| Bild im Textfluss | 1200 px | unter 150 KB |
| Großes Kopfbild | 1920 px | unter 300 KB |
| Vorschaubild in einer Übersicht | 600 px | unter 60 KB |
| Logo | doppelte Anzeigegröße | unter 30 KB |
| Vorschau für Social Media | 1200 × 630 px | unter 200 KB |
Für scharfe Darstellung auf hochauflösenden Bildschirmen kann man Bilder in doppelter Größe hinterlegen. Das lohnt sich vor allem bei Logos und Grafiken mit feinen Linien, bei großflächigen Fotos ist der Gewinn gering.
Was außer der Dateigröße noch zählt
Dateiname: rote-gartenbank-eiche.jpg sagt Suchmaschinen mehr als IMG_20260812.jpg. Kleinbuchstaben, Bindestriche statt Leerzeichen, keine Umlaute.
Alternativtext: Jedes inhaltlich relevante Bild braucht eine kurze Beschreibung. Sie wird von Screenreadern vorgelesen und erscheint, wenn das Bild nicht lädt. Sie soll beschreiben, was zu sehen ist — nicht Schlagwörter aneinanderreihen.
Maße im Quelltext: Wenn Breite und Höhe angegeben sind, kann der Browser den Platz reservieren, bevor das Bild geladen ist. Das verhindert das Springen des Layouts, das Google als Layoutverschiebung bewertet.
Verzögertes Laden: Bilder unterhalb des sichtbaren Bereichs lassen sich mit loading="lazy" nachladen. Das erste große Bild der Seite sollte davon ausgenommen bleiben, sonst verzögert sich der Bildaufbau.
EXIF-Daten: ein Nebeneffekt, der oft übersehen wird
Fotos vom Handy enthalten Aufnahmedatum, Kameramodell und häufig GPS-Koordinaten. Wer ein Bild aus dem eigenen Garten hochlädt, veröffentlicht damit unter Umständen seine Adresse. Beim Verarbeiten im Browser werden diese Daten entfernt, weil das Bild neu berechnet wird — ein willkommener Nebeneffekt.