Große Bilder sind der Grund Nummer eins, warum Seiten langsam laden. Die Lösung sind fast immer zwei Schritte: das Bild in die richtigen Abmessungen bringen, dann komprimieren, was übrig bleibt. Tun Sie beides, und aus einem 4-MB-Foto wird ein 150-KB-Foto, das auf dem Bildschirm identisch aussieht.
Setzen wir echte Zahlen darauf.
Zielgrößen, die Sie anstreben sollten
Sie müssen nicht raten. Hier sind praktische Gewichtsbudgets, die Seiten schnell halten:
- Hero / vollbreites Banner: unter 200 KB, idealerweise ~100–150 KB.
- Foto im Artikel: je 80–150 KB.
- Thumbnail / Avatar: 10–30 KB.
- Logo oder Icon (PNG/SVG): unter 30 KB; oft weit weniger.
Und Abmessungen:
- Vollbreites Hero: 1600–2000 px Breite sind reichlich für die meisten Layouts (verdoppeln Sie nur, wenn Sie Retina anpeilen und sich die Bytes leisten können).
- Foto in der Spalte: an Ihre Inhaltsbreite anpassen – oft 800–1200 px.
- Thumbnail: die Größe, in der es tatsächlich angezeigt wird, z. B. 300–400 px.
Wenn ein einzelnes Bild auf einer Seite über ~300 KB liegt, ist das meist ein behebenswerter Fehler.
Schritt 1: Auf die echte Anzeigebreite verkleinern
Das ist der Schritt, den Leute überspringen, und es ist der größte Hebel. Ein Foto direkt vom Handy ist oft 4000+ Pixel breit. Wenn es in einer 800-Pixel-Spalte angezeigt wird, liefern Sie 25-mal mehr Pixel aus, als der Bildschirm zeigt – und die Pixelanzahl treibt die Dateigröße mehr als alles andere.
Nutzen Sie den Bild-Resizer, um das Bild auf die Breite zu bringen, in der es tatsächlich erscheint. Skalieren Sie nach Pixeln oder Prozent, halten Sie das Seitenverhältnis gesperrt und lassen Sie den hochwertigen Verkleinerer die Kanten sauber halten.
Allein die richtige Dimensionierung schneidet die Dateigröße oft um 80–90 %, bevor Sie ein einziges Byte komprimiert haben.
Schritt 2: Komprimieren, was übrig bleibt
Schrumpfen Sie nun die Daten innerhalb dieser korrekten Abmessungen.
- Fotos (JPG/WebP): Stellen Sie den Qualitätsregler auf 75–85. Das ist für die meisten Bilder visuell verlustfrei und schneidet die Größe hart.
- PNGs (Screenshots, Grafiken): Der Bild-Kompressor reduziert sie auf eine 256-Farben-Palette, spart typischerweise 60–80 % ohne sichtbare Änderung und behält die Transparenz.
Der Kompressor begrenzt die Ausgabe außerdem auf die Originalgröße – er gibt nie etwas Größeres zurück – und hat eine optionale Breitenbegrenzung, sodass Sie beide Schritte tatsächlich in einem Durchgang machen können: Setzen Sie die Begrenzung auf Ihre Zielbreite und komprimieren Sie gleich. Verarbeiten Sie einen ganzen Ordner im Stapel und laden Sie ihn als ZIP herunter.
Wählen Sie dabei gleich das richtige Format
Wenn Ihre Bilder an moderne Browser ausgeliefert werden, schlägt die Konvertierung von Fotos zu WebP JPEG typischerweise um weitere 25–35 % bei gleicher Qualität. Flache Grafiken bleiben PNG (oder WebP). Speichern Sie Fotos nicht als PNG – das ist der klassische Aufblähfehler, leicht ein 5–10-facher Aufschlag.
Ein realistischer Arbeitsablauf
Für einen Blogbeitrag mit fünf Fotos:
- Verkleinern Sie jedes auf Ihre Spaltenbreite (etwa 1200 px).
- Komprimieren Sie mit Qualität 80 oder konvertieren Sie zu WebP.
- Bestätigen Sie, dass jedes unter ~150 KB landet.
- Prüfen Sie einen 100%-Ausschnitt eines Bildes, um sicherzugehen, dass die Qualität hielt.
Fünf Fotos, die zusammen mit 20 MB begannen, landen bei etwa 600 KB – eine Seite, die im Nu lädt statt zu stocken.
Privat und offline
Alles oben läuft vollständig in Ihrem Browser mit Canvas und WebAssembly. Kein Bild wird auf einen Server hochgeladen, und nach Ihrem ersten Besuch sind die Tools zwischengespeichert und funktionieren offline. Sie können die Bilder eines ganzen Beitrags ohne Verbindung optimieren, ohne dass etwas Ihren Rechner verlässt.