Bilder richtig optimieren für moderne Websites: Scharf, aber schlank

Wissen Sie, was der häufigste Grund für lahme Websites ist? Es sind nicht komplexe Skripte, es sind meistens Bilder. Wenn Sie Ihre Bilder richtig optimieren, können Sie oft 50% bis 70% an Datenvolumen einsparen – und das merken Ihre Besucher sofort. Ein klassisches Szenario: Der Fotograf liefert traumhafte Bilder in Druckauflösung (10 MB pro Bild). Der Redakteur lädt sie direkt ins CMS hoch. Das Ergebnis? Eine Website, die sich anfühlt, als würde man sie durch einen Strohhalm ziehen.

Für Google und Ihre Nutzer zählt heute jedes Kilobyte. Ein Bild muss auf dem Handy anders geladen werden als auf einem 4K-Monitor. In diesem Guide zeigen wir Ihnen die Technologien, mit denen Sie Bilder richtig optimieren, ohne dass die visuelle Qualität leidet.

1. Vergessen Sie JPG: Die Ära von WebP und AVIF

Jahrelang war JPG der Standard für Fotos und PNG für Grafiken. Diese Zeiten sind vorbei. Moderne Formate bieten die gleiche Qualität bei einem Bruchteil der Dateigröße.

• WebP (Der neue Standard): Von Google entwickelt, wird es mittlerweile von fast allen Browsern unterstützt. Es ist oft 30% kleiner als ein vergleichbares JPG und unterstützt sogar Transparenz (wie PNG).

• AVIF (Der Herausforderer): Noch neuer, noch effizienter. AVIF liefert oft noch bessere Ergebnisse als WebP, besonders bei Farbverläufen. Der einzige Nachteil: Ältere Browser tun sich hier noch schwer.

Die Strategie: Nutzen Sie das <picture>-Element in HTML. Damit bieten Sie dem Browser AVIF an, falls er es kann. Wenn nicht, bekommt er WebP. Und als allerletzten Fallback das alte JPG.

2. One Size Fits None: Responsive Images

Ein riesiges 4K-Headerbild auf ein iPhone zu laden, ist reine Datenverschwendung. Das Handy muss das riesige Bild herunterladen, nur um es dann winzig klein anzuzeigen. Das kostet Datenvolumen und CPU-Power.

Wenn wir Bilder richtig optimieren wollen, müssen wir dem Browser Alternativen anbieten. Das Zauberwort heißt srcset. Mit dem srcset-Attribut geben wir dem Browser eine Liste von Bildgrößen (z.B. 400px, 800px, 1200px breit). Der Browser entscheidet dann selbstständig: "Ich bin ein Smartphone mit Retina-Display, ich nehme die 800px Version." Das Ergebnis: Der Laptop bekommt das scharfe große Bild, das Handy das schnelle kleine Bild. Beide sind glücklich.

3. Lazy Loading: Nur laden, was man sieht

Warum soll der Browser Bilder im Footer laden, wenn der Nutzer noch ganz oben im Header ist? Das verstopft nur die Leitung. Lazy Loading (Faules Laden) bedeutet: Bilder werden erst geladen, kurz bevor sie in den sichtbaren Bereich gescrollt werden.

Früher brauchte man dafür JavaScript. Heute können moderne Browser das von Haus aus. Fügen Sie einfach das Attribut loading="lazy" zu Ihren <img>-Tags hinzu. Wichtig: Nutzen Sie Lazy Loading niemals für das oberste Bild (LCP/Hero Image). Das muss sofort da sein (loading="eager"). Das ist einer der häufigsten Fehler, den wir sehen, wenn Kunden ihre Bilder richtig optimieren wollen.

Profi-Tools für die Komprimierung: Sie müssen kein Photoshop-Profi sein. Nutzen Sie Tools wie Squoosh.app (kostenlos von Google) oder Plugins wie ShortPixel (WordPress), um die Dateigröße drastisch zu reduzieren, bevor das Bild überhaupt auf den Server kommt.

Fazit: Visuelle Pracht ohne Ladezeit-Frust

Bilder sind Emotionsträger. Sie sind essenziell für das Design. Aber sie müssen technisch sauber ausgeliefert werden. Wenn Sie moderne Formate nutzen, verschiedene Größen (srcset) bereitstellen und Lazy Loading klug einsetzen, haben Sie den größten Schritt getan. Das Ziel beim Projekt "Bilder richtig optimieren" ist nicht, pixeligen Matsch zu erzeugen, sondern unnötigen Ballast abzuwerfen.

Wir haben nun die Diagnose gestellt, die Vitalwerte verstanden, den Code aufgeräumt und die Bilder geschrumpft. Doch was ist, wenn die Seite immer noch langsam ist? Dann liegt das Problem vielleicht tiefer – in der Architektur.