Bilder optimieren fur Web
und SEO

Das Format, das Sie wahlen, hat den grossten Einfluss auf Dateigrosse und Qualitat. Moderne Formate liefern dramatisch kleinere Dateien bei gleicher visueller Qualitat im Vergleich zu alteren Standards. Hier erfahren Sie, was Sie wann verwenden sollten.

Der ideale Ansatz ist, mehrere Formate uber das HTML-Element <picture> bereitzustellen. Bieten Sie AVIF zuerst an, WebP als Fallback und JPEG als letzten Fallback. Der Browser wahlt automatisch das beste Format, das er unterstutzt.

Komprimierung reduziert die Dateigrosse, indem Daten entfernt werden, die das menschliche Auge nicht leicht wahrnehmen kann. Der Schlussel liegt darin, den optimalen Punkt zu finden, an dem die Dateigrosse deutlich sinkt, aber die Qualitat visuell identisch zum Original bleibt.

Es gibt zwei Arten der Komprimierung. Verlustbehaftete Komprimierung (JPEG, WebP, AVIF) entfernt Daten dauerhaft, um kleinere Dateien zu erzielen - das ist fur Fotografien im Web erwunscht. Verlustfreie Komprimierung (PNG, WebP verlustfrei) bewahrt jedes Pixel, erzielt aber geringere Einsparungen - besser fur Grafiken und Screenshots.

Tools wie Squoosh, ImageOptim oder Sharp (Node.js) ermoglichen Ihnen, den Qualitatsunterschied vor der Festlegung zu prufen. Vergleichen Sie die komprimierte Version immer in voller Grosse mit dem Original, bevor Sie sie einsetzen.

Alt-Text (das alt-Attribut bei <img>-Tags) erfullt zwei Zwecke: Er beschreibt das Bild fur Screenreader und sehbehinderte Nutzer, und er teilt Suchmaschinen mit, was das Bild enthalt. Google verwendet Alt-Text als primares Signal fur Bildsuch-Rankings.

Guter Alt-Text ist beschreibend, pragnant und enthalt relevante Keywords auf naturliche Weise, ohne sie zu stopfen. Statt "foto.jpg" oder "bild1" schreiben Sie etwas wie "Golden Retriever lauft durch Herbstlaub in einem Park". Beschreiben Sie, was im Bild zu sehen ist, nicht was es ist (vermeiden Sie "Bild von" oder "Foto von" am Anfang).

Fur dekorative Bilder, die keinen informativen Wert haben (Rahmen, Abstandhalter, Hintergrundmuster), verwenden Sie ein leeres Alt-Attribut (alt=""), damit Screenreader sie komplett uberspringen.

Lazy Loading verzogert das Laden von Bildern, bis sie kurz davor sind, in den sichtbaren Bereich zu scrollen. Das bedeutet, eine Seite mit 50 Bildern ladt nicht alle 50 beim initialen Laden - nur die auf dem Bildschirm sichtbaren. Der Rest ladt, wahrend der Nutzer scrollt. Dies reduziert die initiale Ladezeit und den Bandbreitenverbrauch drastisch.

In modernem HTML ist Lazy Loading so einfach wie das Hinzufugen von loading="lazy" zu Ihren <img>-Tags. Verwenden Sie Lazy Loading nicht fur Bilder, die uber dem Fold sichtbar sind (der erste Bildschirm) - diese sollten sofort laden, um Layoutverschiebungen und schlechte Largest Contentful Paint (LCP)-Werte zu vermeiden.

Responsive Bilder passen sich an verschiedene Bildschirmgrossen an, damit mobile Nutzer kein 4000px breites Bild herunterladen, wenn ihr Bildschirm nur 400px breit ist. Verwenden Sie die Attribute srcset und sizes, um mehrere Auflosungen bereitzustellen. Der Browser wahlt die kleinste Version, die zum Bildschirm des Nutzers passt, und spart so Bandbreite und verbessert die Ladezeit.

Geben Sie immer width- und height-Attribute fur jedes Bild an, um Cumulative Layout Shift (CLS) zu verhindern - eine Core-Web-Vitals-Metrik, die Seiten bestraft, bei denen Inhalte wahrend des Ladens springen.

Bilddateinamen sind ein weiteres SEO-Signal, das viele ubersehen. Suchmaschinen lesen Dateinamen, um den Bildinhalt zu verstehen. Eine Datei namens sonnenuntergang-uber-dem-genfersee.webp sagt Google weit mehr als IMG_4829.webp.

Fur fortgeschrittene SEO fugen Sie strukturierte Daten (schema.org ImageObject) zu Ihren Seiten hinzu. Dieses Markup teilt Suchmaschinen die Bildunterschrift, den Ersteller, die Lizenz und die Inhalts-URL mit. Seiten mit strukturierten Daten erscheinen eher in Googles Bildersuche mit Rich Snippets.

Wenn Sie Ihre Bilder vor der Veroffentlichung mit Wasserzeichen versehen, wird das Wasserzeichen selbst Teil der Datei. Fur Hinweise zum Wasserzeichensetzen ohne Beeintrachtigung der Bildqualitat lesen Sie unseren Wasserzeichen-Best-Practices-Leitfaden.

Fotografen und Kreative stehen vor einer einzigartigen Herausforderung: Sie wollen Bilder, die im Web beeindruckend aussehen, fur SEO schnell laden und vor Diebstahl geschutzt bleiben. Diese Ziele konnen widerspruchlich erscheinen, sind es aber nicht - Sie brauchen nur einen klaren Workflow.

Bewahren Sie Ihre hochauflosenden Originaldateien sicher offline auf - dies sind Ihre Masterdateien und Ihr Nachweis der Urheberschaft. Fur das Web exportieren Sie verkleinerte Versionen (typischerweise 1200-2000px an der langsten Kante) im WebP-Format bei Qualitat 80. Das ergibt ausgezeichnete visuelle Qualitat bei einem Bruchteil der ursprunglichen Dateigrosse.

Fugen Sie vor dem Hochladen ein Wasserzeichen zu Ihren Web-Versionen hinzu. Ein halbtransparentes Wasserzeichen bei 30-40 % Deckkraft beeinflusst Dateigrosse oder Ladegeschwindigkeit nicht merklich, bietet aber visuellen Schutz, der gelegentlichen Diebstahl abschreckt. Lassen Sie das Bild nach dem Wasserzeichensetzen durch ein Komprimierungstool fur eine abschliessende Grossenreduzierung laufen.

Fur den vollstandigen Leitfaden zur Absicherung Ihrer Bilder jenseits der Optimierung lesen Sie unseren Artikel zum Schutz von Fotos vor Online-Diebstahl und unsere Wasserzeichen-Anleitung.