Bilder fürs Web richtig skalieren und komprimieren

Du hast neue Fotos vom Betrieb gemacht, direkt vom Handy auf die Website geladen, und seitdem lädt die Seite zäh. Das ist kein Zufall. Ein aktuelles Handyfoto ist schnell 4000 Pixel breit und mehrere Megabyte schwer. Auf der Website brauchst du davon einen Bruchteil.

Das Ärgerliche ist, dass du es selbst kaum merkst. Im Büro am schnellen Anschluss wirkt alles normal. Der Kunde, der auf dem Parkplatz in Mudau mit zwei Balken Empfang nach deinen Leistungen sucht, sieht dagegen viel zu lange ein leeres Feld und tippt zurück.

Bilder fürs Web aufzubereiten ist eine der wenigen Aufgaben, die du einmal richtig lernst und danach immer gleich abarbeitest. Hier stehen die Größen, Formate und Handgriffe dafür.

Bilder für Website optimieren heißt: kleiner, aber nicht schlechter

Beim Optimieren passieren zwei getrennte Dinge, und die werden oft verwechselt.

• Skalieren heißt, die Pixelmaße zu verkleinern. Aus 4032 Pixel Breite werden zum Beispiel 1600. Das spart am meisten und kostet nichts an Schärfe, solange das Bild nirgends größer dargestellt wird.
• Komprimieren heißt, die Datei bei gleicher Pixelzahl sparsamer zu speichern. Hier entscheidest du, wie viel Qualität du opferst.

Die Reihenfolge ist wichtig: erst skalieren, dann komprimieren. Wer nur komprimiert und ein 4000 Pixel breites Bild auf der Seite lässt, verschenkt den größten Teil der Ersparnis und handelt sich am Ende trotzdem matschige Kanten ein.

Feste Pixelbreiten, die du dir merken kannst

Du musst nicht für jedes Bild neu nachdenken. Vier Werte reichen für fast jeden Betrieb.

• Bühnenbild ganz oben, über die volle Breite: 1920 Pixel breit
• Bild in einem Textabschnitt oder auf halber Breite: 1200 Pixel breit
• Kachel in Galerie, Team- oder Referenzraster: 800 Pixel breit
• Logo, Icon, Partnerlogo: 400 Pixel breit, besser gleich als SVG

Faustregel: Nimm die größte Breite, in der das Bild auf einem großen Bildschirm dargestellt wird. Für scharfe Displays liefert eine ordentlich gebaute Seite passende Varianten automatisch aus, dafür musst du nichts von Hand doppelt hochladen.

Seitenverhältnis vor dem Hochladen festlegen

Wenn in einer Galerie ein Bild hochkant ist und drei quer, wirkt das Raster unruhig. Entscheide dich pro Bereich für ein Verhältnis, zum Beispiel 3:2 für Referenzfotos und 1:1 für Teamporträts, und schneide alle Bilder vorher darauf zu. Das kostet ein paar Minuten und spart später jede Menge Layout-Basteln.

Welches Format wofür

Die Formatfrage klingt technisch, ist aber schnell entschieden.

• WebP ist heute der Standard für Fotos. Gleiche Optik, deutlich kleinere Datei als JPG. Jeder aktuelle Browser kann damit umgehen.
• JPG ist die sichere Rückfalloption für Fotos und für alles, was du an Dritte weitergibst, etwa an ein Branchenportal oder die Lokalzeitung.
• PNG nur, wenn du echte Transparenz brauchst oder harte Kanten wie Screenshots zeigst. Für Fotos ist PNG fast immer viel zu schwer.
• SVG für Logos, Icons und einfache Grafiken. Bleibt in jeder Größe scharf und wiegt oft nur ein paar Kilobyte.

Was nie direkt auf die Website gehört: HEIC vom iPhone, TIFF aus der Druckvorstufe und einzelne PDF-Seiten als Bild. Exportiere vorher in ein Web-Format.

Komprimieren ohne Matsch

Bei JPG und WebP stellst du eine Qualitätsstufe ein, meist auf einer Skala von 0 bis 100. Für Fotos auf einer Website liegt der sinnvolle Bereich bei 70–80. Darunter fransen Kanten aus, darüber wird die Datei größer, ohne dass jemand den Unterschied sieht.

Als Zielgrößen pro Datei kannst du dich daran halten:

• Bühnenbild über die volle Breite: unter 250 Kilobyte
• Bild im Text: unter 150 Kilobyte
• Galeriekachel: unter 80 Kilobyte

Prüf danach zwei Stellen besonders genau: gleichmäßige Flächen wie Himmel oder eine weiße Wand, und feine Übergänge an Haaren oder Metallkanten. Wenn dort Flecken oder Treppenstufen auftauchen, gehst du eine Qualitätsstufe hoch und exportierst neu.

Werkzeuge, für die du nichts können musst

Zum Zuschneiden und Verkleinern reicht die Fotos-App auf dem Rechner. Zum Komprimieren gibt es kostenlose Werkzeuge im Browser, bei denen du Bilder ins Fenster ziehst und fertige Dateien zurückbekommst. Wichtig ist nur, dass du danach die Dateigröße kontrollierst, statt dem Werkzeug blind zu vertrauen.

Dateiname und Alternativtext gleich mitmachen

Wenn du das Bild ohnehin in der Hand hast, kosten diese zwei Schritte Sekunden. Ein Name wie „IMG_4821.jpg“ sagt niemandem etwas, „badsanierung-mosbach-fliesen.webp“ dagegen schon. Dazu ein kurzer Alternativtext, der beschreibt, was zu sehen ist. Das hilft Menschen, die einen Screenreader nutzen, und es hilft in der Bildersuche. Wie du beides sauber formulierst, steht in Bilder SEO, Dateinamen und Alternativtexte richtig nutzen.

Ein Ablauf, den du jedes Mal gleich machst

1. Fotos auf den Rechner ziehen und auswählen, lieber sechs gute als dreißig mittelmäßige.
2. Auf das Seitenverhältnis des jeweiligen Bereichs zuschneiden.
3. Auf die passende Pixelbreite verkleinern.
4. Als WebP mit Qualität um 75 exportieren.
5. Sprechenden Dateinamen vergeben.
6. Hochladen und den Alternativtext eintragen.
7. Die Seite auf dem eigenen Handy im Mobilfunknetz aufrufen, nicht im WLAN.

Der letzte Punkt ist der ehrlichste Test. Wie du das Tempo systematisch misst, steht in Ladezeit der Website messen und wirklich verbessern. Worauf du bei der Darstellung am Telefon sonst noch achtest, findest du in Handy Ansicht prüfen, die häufigsten Fehler am Telefon.

Häufige Fragen

Verliere ich Qualität, wenn ich das Bild verkleinere?

Sichtbar nicht, solange das Bild größer bleibt als die Fläche, in der es angezeigt wird. Problematisch ist der umgekehrte Weg: ein kleines Bild künstlich hochziehen. Das wird unscharf und lässt sich nicht reparieren. Bewahre die Originale deshalb außerhalb der Website auf, falls du später eine größere Variante brauchst.

Muss ich alle alten Bilder nachträglich austauschen?

Nicht auf einen Schlag. Fang bei den Seiten an, die am meisten aufgerufen werden, meist Startseite, Leistungen und Kontakt. Dort sitzen ohnehin die großen Bühnenbilder. Alte Galerien tauschst du aus, wenn du sie sowieso aktualisierst.

Kann ich Bilder direkt aus Instagram herunterladen und verwenden?

Technisch geht es, sinnvoll ist es nicht. Die Bilder sind bereits einmal komprimiert, oft quadratisch beschnitten und in der Auflösung begrenzt. Nimm lieber das Original aus deiner Handygalerie. Wie du solche Aufnahmen selbst brauchbar hinbekommst, steht in Fotos vom eigenen Betrieb, Anleitung für das Handy.

Nimm dir als Nächstes deine Startseite vor, lade die drei größten Bilder herunter und schau dir ihre Dateigröße an. Alles über 500 Kilobyte ist ein Kandidat für eine Runde Skalieren und Komprimieren.

Schreib uns, was du vorhast, wir melden uns mit einer ehrlichen Einschätzung.