Ein Foto für die Startseite, direkt aus der Spiegelreflex: 8 MB, 6000 Pixel breit, im Browser drei Sekunden Wartezeit. Im fertigen Layout ist das Bild später nur 1200 Pixel breit zu sehen.
Aus diesen 8 MB lassen sich 150 KB machen, ohne dass jemand den Unterschied erkennt. Es braucht drei Handgriffe: die Auflösung anpassen, sinnvoll verkleinern, ein modernes Format wählen. Dafür musst Du weder Bildbearbeitungs-Profi sein noch teure Software kaufen.
Die Theorie hinter den Formaten findest Du bei den Formaten im Überblick. Hier folgt die Praxis für den Upload-Alltag.
Warum große Bilder Deine Seite ausbremsen
Ein zu schweres Bild kostet Ladezeit. Wer auf dem Handy mit knappem Empfang Deine Seite öffnet und zwei oder drei Sekunden auf das erste Bild wartet, springt oft schon wieder ab, bevor der Inhalt überhaupt da ist.
Google misst diese Wartezeit und nimmt sie als Ranking-Signal. Eine langsame Seite rutscht in den Suchergebnissen nach unten, eine schnelle wird belohnt. Ein einziges 8-MB-Bild auf der Startseite kann diesen Wert spürbar verschlechtern. Wie die Ladezeit konkret ins Ranking einfließt, beschreiben die Core Web Vitals.
Ob Deine Seite zu langsam lädt, musst Du nicht raten. Der kostenlose PageSpeed-Test von Google nimmt jede Adresse entgegen und zeigt Dir eine Note plus die größten Bremsklötze. Tauchen dort Bilder als Problem auf, weißt Du, wo Du ansetzen musst.
Worauf es bei der Quelldatei ankommt
Die erste Stellschraube ist die Auflösung. Ein Bild aus einer aktuellen Kamera oder einem modernen Smartphone hat oft 4000 bis 6000 Pixel Breite. Für die Webseite ist das mindestens das Dreifache dessen, was angezeigt wird. Jedes überflüssige Pixel kostet Ladezeit.
Faustregeln für die Zielbreite, gemessen am Bild, wie es im Layout erscheint:
- Hero- oder Bühnenbild: 1600 bis 2000 Pixel breit. Reicht auch für hochauflösende Displays.
- Inhaltsbild im Fließtext: 800 bis 1200 Pixel breit. Mehr sieht im Layout niemand.
- Thumbnail oder Vorschau: 400 Pixel breit. Genug für eine ruhige Übersichtsseite.
Bevor Du das Original hochlädst, skalierst Du es also einmal auf eine vernünftige Breite herunter. Lade nicht das 6000-Pixel-Handyfoto direkt hoch. Kamera-Daten wie GPS-Koordinaten und Gerätemodell brauchst Du im Web ebenfalls nicht. Sie blähen die Datei auf und verraten manchmal mehr, als Du öffentlich teilen willst. Bevor ein fremdes Foto auf Deine Seite kommt, klärst Du außerdem, ob Du es überhaupt nutzen darfst. Worauf es bei Bildrechten und Lizenzen ankommt, liest Du im eigenen Beitrag dazu.
Verkleinern, ohne dass es weh tut
Beim Speichern eines JPEGs gibst Du eine Qualitätsstufe an, meist zwischen 0 und 100. Niedrigere Werte erzeugen kleinere Dateien. Ab einer bestimmten Schwelle wirst Du das aber sehen: weiche Kanten, Farbtreppen, blockige Flächen in Himmel oder Hauttönen.
Der praktische Sweet Spot liegt zwischen 75 und 85. Darüber wird die Datei kaum besser, darunter werden die Fehler sichtbar. Wer es genau wissen will, speichert dasselbe Bild zweimal, einmal mit 90, einmal mit 75, und legt die Versionen nebeneinander. In neun von zehn Fällen siehst Du keinen Unterschied, sparst aber rund 40 Prozent Dateigröße.
Werkzeuge dafür gibt es kostenlos. TinyPNG verkleinert Fotos direkt im Browser, ohne dass Du etwas installierst. Squoosh von Google zeigt Dir den Vorher-Nachher-Vergleich live, während Du am Regler drehst. Wer regelmäßig viele Bilder hat, nutzt ein einfaches Bild-Programm, das einen ganzen Ordner auf einmal schrumpft.
Modernes Format wählen — WebP statt riesigem JPG
JPG und PNG sind seit Jahrzehnten der Standard. Daneben hat sich ein jüngeres Format durchgesetzt: WebP. Es verkleinert Fotos bei gleicher sichtbarer Qualität rund 25 bis 35 Prozent stärker als JPG. Alle gängigen Browser zeigen es seit Jahren zuverlässig an.
Wenn Du heute eine Wahl triffst, ist WebP für Fotos die richtige. PNG bleibt sinnvoll für Logos und Grafiken mit durchsichtigem Hintergrund. Für Icons und Symbole ist SVG das passende Format. Welches Format zu welchem Bildtyp gehört, ist Sache der Format-Theorie.
Viele Verkleinerungs-Werkzeuge bieten WebP direkt als Speicher-Option an. Du wählst beim Export einfach WebP statt JPG und hast bei gleicher Bildqualität eine spürbar leichtere Datei. Mehr Aufwand ist das nicht.
Was Dein CMS Dir abnimmt
Moderne Baukästen wie TYPO3 oder WordPress übernehmen einen Großteil der Arbeit von selbst. Beim Upload erzeugen sie automatisch mehrere Größen und liefern dem kleinen Handy eine andere Variante aus als dem großen Desktop. Du musst diese Größen nicht von Hand anlegen.
Dazu kommt das verzögerte Laden, oft Lazy Loading genannt: Bilder weiter unten auf der Seite werden erst geholt, wenn der Besucher dort hinunterscrollt. Das beschleunigt den ersten Aufruf merklich. Auch das macht das CMS im Hintergrund, ohne dass Du etwas einstellst.
Was Du trotzdem tust: Du lädst eine vernünftig dimensionierte Quelldatei hoch. Ein 6000-Pixel-Original zwingt das System, alle Varianten daraus zu rechnen. Das schafft es, kostet aber Speicher und Wartung. Eine 2000 Pixel breite, sauber verkleinerte Datei ist die ehrlichere Grundlage. Verwaschene Aufnahmen werden durch kein System wieder scharf, eine zu kleine Quelle wird auf großen Bildschirmen pixelig.
Zwei Felder bleiben Deine Aufgabe: Alt-Text und Dateiname. Beide tragen Bedeutung für Suchmaschinen, beide kosten Dich je eine halbe Minute. Wie Du sie richtig setzt und wo Lazy-Loading sonst noch hilft, steht im Beitrag zu Bildern und SEO.
Fazit — drei Handgriffe, messbare Wirkung
Die Praxis-Kette ist überschaubar. Die Auflösung an den tatsächlichen Anzeigeort anpassen. Mit Qualität um die 80 verkleinern. WebP für Fotos wählen, PNG und SVG für ihre jeweiligen Aufgaben behalten.
Drei Handgriffe, die mehr bringen als jede spätere Reparatur. Wer Bilder schon vor dem Upload ordentlich vorbereitet, spart sich nachträgliches Flicken und liefert seinen Besuchern eine Webseite, die spürbar leichter lädt. Den Rest erledigt das CMS im Hintergrund.