Bildoptimierung 101: Kleinere Dateien, schärfere Seiten
Öffnen Sie auf fast jeder Website den Netzwerk-Tab Ihres Browsers und Sie werden das Gleiche sehen: Bilder machen den Großteil der Seitengröße aus. Sie sind auch der einfachste Gewinn in Sachen Web-Performance. Sie müssen Ihre Codebasis nicht umgestalten – Sie müssen lediglich aufhören, Bilder bereitzustellen, die größer als nötig sind.
Pagespeed ist keine Eitelkeit. Es handelt sich um einen durch Core Web Vitals bestätigten Google-Ranking-Faktor, und das größte Bild auf dem Bildschirm bestimmt in der Regel Ihren Largest Contentful Paint (LCP)-Score. Hier erfahren Sie, wie Sie Bilder der Reihe nach richtig korrigieren.
Schritt 1: Ändern Sie die Größe vor dem Hochladen
Der häufigste Fehler besteht darin, ein 4000-Pixel-Foto direkt von einer Telefonkamera in einen 800-Pixel-Slot zu übertragen. Der Browser lädt alle verschwendeten Pixel herunter und verkleinert sie dann. Ändern Sie die Größe des Bildes auf die größte Größe, die es tatsächlich zuerst anzeigt – verwenden Sie unseren kostenlosen Bild-Resizer. Dieser eine Schritt reduziert die Dateigröße oft um 80 % oder mehr.
Schritt 2: Ohne sichtbaren Verlust komprimieren
Nach der Größenänderung komprimieren. Bei den meisten Fotos kann die Größe ohne wahrnehmbaren Qualitätsverlust um 40–70 % sinken, da JPEG und WebP Details verwerfen, die das Auge kaum wahrnimmt. Mit unserem Bildkompressor können Sie den Kompromiss zwischen Qualität und Größe eingehen und das Ergebnis vor dem Herunterladen in der Vorschau anzeigen.
Schritt 3: Moderne Formate verwenden
WebP bietet die gleiche visuelle Qualität wie JPEG und PNG bei einem Bruchteil der Größe und wird von jedem modernen Browser unterstützt. Googles eigene WebP-Dokumentation meldet 25–35 % Einsparungen gegenüber vergleichbaren JPEGs. Konvertieren Sie Ihre Dateien mit JPG in WebP oder PNG in WebP. Wenn Sie jemals zurückgehen müssen, übernimmt WebP zu JPG auch das.
Schritt 4: Wählen Sie das richtige Format für den Job
- Fotos: WebP oder JPEG – tolle Komprimierung für komplexe Bilder.
- Logos, Symbole, Strichzeichnungen: SVG oder PNG – scharfe Kanten, Transparenz, klein für einfache Grafiken.
- Alles mit Text: Vermeiden Sie JPEG, das scharfe Kanten verwischt; Verwenden Sie PNG oder WebP.
Schritt 5: Sorgen Sie dafür, dass der Browser intelligent lädt
Fügen Sie die Attribute width und height hinzu, damit der Browser Platz reserviert und Layoutverschiebungen (die CLS-Metrik) vermeidet. Verwenden Sie loading="lazy" für „Below-the-Fold“-Bilder, damit diese nur bei Bedarf geladen werden, und sorgen Sie dafür, dass Ihr wichtigstes „Above-the-Fold“-Bild schnell geladen wird. Googles Best Practices für Bilder legen auch Wert auf beschreibenden Alt-Text – gut für die Barrierefreiheit und für das Ranking in Google Bilder.
Schritt 6: Responsive Größen bereitstellen
Ein Telefon und ein 27-Zoll-Monitor sollten nicht dasselbe Bild herunterladen. Mit dem Attribut srcset kann der Browser für jeden Bildschirm die am besten geeignete Größe auswählen, sodass mobile Benutzer nicht mit Dateien in Desktop-Größe bestraft werden. Selbst ein einfaches srcset mit zwei oder drei Größen kann die Datenmenge auf den Geräten dort, wo es am wichtigsten ist, drastisch reduzieren. Wenn Ihr CMS oder Framework responsive Bilder bietet, aktivieren Sie die Funktion – es ist eine der wirkungsvollsten verfügbaren Optionen.
Schritt 7: Messen Sie den Gewinn
Ratten Sie nicht – überprüfen Sie es. Führen Sie Ihre Seite vorher und nachher durch den Page-Speed-Checker, um die tatsächliche Verbesserung der Ladezeit und der Core Web Vitals zu sehen. Achten Sie besonders auf Largest Contentful Paint (LCP): Wenn Ihr Heldenbild der Engpass war, werden Sie feststellen, dass es sofort abfällt.
Ein schneller Vorher-Nachher-Workflow
- Ändern Sie die Größe des Bildes auf seine tatsächliche Anzeigegröße.
- Komprimieren Sie es und prüfen Sie die Qualität.
- In WebP konvertieren.
- Breite, Höhe, Alt und Lazy-Loading hinzufügen.
- Testen Sie die Seite erneut und bestätigen Sie die LCP-Verbesserung.
Führen Sie diese Schleife für Ihre drei oder vier umfangreichsten Bilder aus, und Sie werden die überwiegende Mehrheit der verfügbaren Geschwindigkeitsgewinne einfangen.
Vergessen Sie nicht die Bild-SEO
Optimierte Bilder werden nicht nur schneller geladen, sie können auch eigenen Traffic generieren. Beschreibende Dateinamen („blue-running-shoes.webp“ statt „IMG_4821.webp“) und aussagekräftiger Alternativtext helfen Ihnen bei der Platzierung in Google Bilder und machen Ihre Website für Benutzer von Screenreadern zugänglich. Auch hier kommt es auf die Wahl des richtigen Formats an; In unserem Leitfaden zu JPG vs. PNG vs. WebP vs. SVG erfahren Sie genau, wann Sie die einzelnen Formate verwenden sollten.
Fazit
Größe ändern, komprimieren, in WebP konvertieren, Abmessungen festlegen, Lazy Load durchführen und reaktionsfähige Größen bereitstellen. Wenn Sie diese Dinge tun, werden die meisten Websites mit dem geringsten Aufwand den größten Leistungszuwachs verzeichnen – schnellere Seiten, zufriedenere Besucher, bessere Zugänglichkeit und eine messbare Verbesserung des Rankings.
