1. Die richtigen Abmessungen ausliefern
Laden Sie kein Bild hoch, das viel größer ist als der Platz, den es ausfüllt. Ein Handyfoto kann 4000 Pixel breit sein, aber wenn Ihr Layout es in einer Spalte mit 800 Pixeln zeigt, lädt der Browser trotzdem jedes überschüssige Pixel herunter und wirft die meisten dann weg.
Verkleinern Sie zuerst, komprimieren Sie danach. Zeigt ein Layout ein Bild mit 800 Pixeln Breite an, ist es oft sinnvoll, mit etwa 1600 Pixeln Breite zu exportieren, damit es auf Bildschirmen mit hoher Pixeldichte scharf bleibt, aber selten mehr.
2. Ein effizientes Format wählen
Verwenden Sie WebP oder JPG für Fotos und PNG oder WebP für Grafiken mit Transparenz. Verwenden Sie SVG für einfache Logos und Icons, denn es skaliert aus einer kleinen Datei auf jede Größe.
WebP-Dateien sind bei ähnlicher visueller Qualität oft spürbar kleiner als JPG oder PNG, und aktuelle Browser unterstützen es in der Regel. PNG bleibt am besten scharfen Grafiken, Screenshots und Bildern vorbehalten, die exakte Farben brauchen.
3. Komprimieren
Verwenden Sie für Fotos eine Qualität von etwa 75 bis 85 Prozent. Vergleichen Sie das Ergebnis in voller Größe mit dem Original, um sicherzustellen, dass es noch gut aussieht, und achten Sie auf weiche Verläufe, Himmel und Hauttöne, wo Artefakte zuerst auftreten.
Niedrigere Qualität spart mehr Platz, aber irgendwann tritt Blockbildung auf. Hören Sie kurz davor auf. Sind Sie unsicher, wählen Sie die höhere Qualität für das Hauptbild und eine niedrigere für kleine Vorschaubilder, wo Mängel schwerer auffallen.
4. Nur laden, was gebraucht wird, und Platz reservieren
Fügen Sie Bildern unterhalb des sichtbaren Bereichs das Attribut loading="lazy" hinzu, damit sie geladen werden, wenn der Besucher in ihre Nähe scrollt. Laden Sie das Hauptbild oben auf der Seite nicht verzögert, denn das würde den am besten sichtbaren Inhalt verzögern.
Geben Sie jedem Bild die Attribute width und height, damit der Browser Platz reservieren kann, bevor die Datei eintrifft. Das verhindert, dass die Seite beim Laden der Bilder springt, was lästig ist, wenn jemand lesen oder auf eine Schaltfläche tippen will. Dieselben Attribute helfen dem Browser auch, die richtigen Proportionen zu ermitteln, wenn CSS das Bild flexibel macht.
Ein Beispiel aus der Praxis (veranschaulichend)
Stellen Sie sich einen Blogbeitrag mit einem Hero-Foto direkt aus der Kamera vor: 4000 mal 3000 Pixel, ein JPG von mehreren Megabyte. Die Seite zeigt es mit 900 Pixeln Breite.
Eine Verkleinerung auf 1800 Pixel Breite würde die Datei meist auf einen kleinen Bruchteil ihrer Größe senken. Komprimieren mit etwa 80 Prozent und die Umwandlung in WebP verkleinern sie oft weiter. Das Ergebnis könnten einige hundert Kilobyte statt mehrerer Megabyte sein, ohne sichtbaren Unterschied in der angezeigten Größe. Die genauen Zahlen unterscheiden sich von Foto zu Foto, prüfen Sie also immer Ihre eigene Datei.
Schritt für Schritt
- Ermitteln Sie die größte angezeigte Größe des Bildes auf Ihrer Seite.
- Verkleinern Sie das Original auf etwa die doppelte Breite, oder nur auf die angezeigte Breite für kleine Bildschirme.
- Wandeln Sie in WebP oder JPG um und komprimieren Sie mit etwa 75 bis 85 Prozent.
- Vergleichen Sie mit dem Original und senken Sie die Qualität nur, solange es noch gleich aussieht.
- Ergänzen Sie in Ihrer Seite width, height und, unterhalb des sichtbaren Bereichs, loading="lazy".
- Laden Sie die Seite neu und prüfen Sie, dass nichts unscharf aussieht oder sich verschiebt.
Testen Sie Ihre Seiten vorher und nachher mit einem Tool wie PageSpeed Insights und sehen Sie sich zuerst das größte Bild auf der Seite an. Kleine Änderungen an diesem einen Bild bringen oft den größten Unterschied.
Häufige Fehler
- Ein bereits stark komprimiertes JPG immer wieder komprimieren, was jedes Mal sichtbaren Schaden hinzufügt. Gehen Sie immer vom Original aus.
- Jedes Bild verzögert laden, auch das ganz oben.
- PNG für Fotos verwenden, was meist sehr große Dateien erzeugt.
- Bilder nur per CSS verkleinern, sodass der Browser trotzdem die volle Datei herunterlädt.
- width und height weglassen, was Layoutsprünge verursacht.
Kurze Checkliste
- Passende Abmessungen für das Layout
- WebP oder JPG für Fotos, SVG für einfache Logos
- Qualität um 75 bis 85 Prozent, nach Augenmaß geprüft
- Verzögertes Laden nur unterhalb des sichtbaren Bereichs
- width und height bei jedem Bild gesetzt
- Seiten vorher und nachher getestet
Mit DoneImg im Browser erledigen
Öffnen Sie das Tool zum Verkleinern, legen Sie die benötigte Breite fest und laden Sie das Ergebnis herunter. Öffnen Sie dann das Komprimierungs-Tool, wählen Sie WebP oder JPG und passen Sie den Qualitätsregler an, während Sie die Dateigröße beobachten. Brauchen Sie ein anderes Format, übernehmen die Konvertierungs-Tools JPG, PNG und WebP.
Alles läuft in Ihrem Browser, Ihre Bilder werden also auf Ihrem eigenen Gerät verarbeitet und nichts wird auf einen Server hochgeladen. So bereiten Sie unveröffentlichte Produktfotos oder Kundenbilder sicher vor. Sie können dieselben Schritte für jedes Bild einer Seite wiederholen und die Originale in einem separaten Ordner behalten, falls Sie sie später in einer anderen Größe erneut exportieren müssen.