Bilder SEO: WebP aus Photoshop exportieren – so geht’s.

Vorteile von WebP

1. Kleinere Dateigrössen: WebP kann Bilder mit signifikant kleineren Dateigrössen im Vergleich zu JPEG und PNG erstellen, was zu schnelleren Ladezeiten von Webseiten führt.
2. Unterstützung für Transparenz: Anders als JPEG unterstützt WebP auch den Alphakanal für transparente Hintergründe, ähnlich wie PNG.
3. Animation: WebP ermöglicht auch die Speicherung von Animationen, was es zu einer vielseitigen Option für Webgrafiken macht.

Verwendungszwecke von WebP

• Webseitenoptimierung: Durch die Verwendung von WebP können Webentwickler die Ladezeiten ihrer Seiten erheblich verbessern, was besonders wichtig ist, um die Benutzererfahrung zu optimieren.
• Responsive Bilder: WebP eignet sich besonders gut für responsive Webdesigns, da es hochwertige Bilder bei kleineren Dateigrössen bietet.
• Animationen im Web: Die Fähigkeit, Animationen zu unterstützen, macht WebP zu einer idealen Wahl für interaktive und dynamische Webinhalte.

Was bringt WebP für die Suchmaschinenoptimierung (SEO)?

Die in die Jahre gekommenen Formate JPEG und PNG hatten ihr Vorteile. JPG bot eine gute Bildqualität im Web bei passabler Bildgrösse (sofern richtig zugeschnitten und komprimiert) und PNG lieferte die Transparenz-Unterstützung. WebP vereint die praktischen Vorteile von JPG und PNG und kann sogar, ähnlich zu GIF, Animationen zeigen. Google gibt an, dass WebP-Bilder bis zu 25-34 % kleiner ausfallen als JPG- oder PNG-Dateien. Und hier müssten SEO-Experten die Lauscher grösser werden: Geringere Dateigrössen = schnellere Ladezeit = bessere PageSpeed-Bewertung von Google = bessere Positionierung = mehr Conversions = höhere Relevanz = …

Natürlich könnte ein von Google ins Leben gerufenes neues Dateiformat, das gegenüber allen anderen Formaten ein besseres Ergebnis auf Google erzielt, einen fahlen Geschmack hinterlassen. Nach mehreren Jahren im Einsatz können wir aber bestätigen, dass Webseiten, die mit WebP ausgestattet sind, einfach besser performen – nicht nur auf Google. Immerhin ist WebP ein Open-Source-Format und kann so frei von Dritten weiterentwickelt werden. Es könnte also die Zukunft sein.

Nachteile von WebP

Adobe schreibt, dass WebP nur für den Onlineeinsatz konzipiert sei und ältere Browser, wie der Internet Explorer, WebP nicht unterstützen. Dazu können wir nur sagen: #wayneinteressierts. WebP wurde für ein performanteres Web entwickelt und ist damit nur für den Onlineeinsatz bzw. die Suchmaschinenoptimierung gedacht. Und zum Internet Explorer möchten wir uns gar nicht mehr äussern.

Wie erstelle oder exportiere ich ein Bild in WebP mit Photoshop?

Allerdings scheint WebP im Jahr 2024 bei vielen noch nicht so richtig angekommen zu sein. Das äussert sich dadurch, dass selbst Adobe Photoshop den webp-Export etwas zu verstecken scheint. Weder über die Exportfunktion, noch über «Für Web speichern (Legacy)» kann ein WebP generiert werden. Eine Erweiterung benötigst du ab Photoshop 23.2 aber glücklicherweise nicht mehr. Um ein WebP zu erstellen, gehe über Datei > Kopie speichern.

Schritt 1:

Schritt 2:

Es öffnet sich im Anschluss das WebP Optionen-Dialogfeld. Du kannst nun wählen, ob du verlustfrei oder verlustreich speichern möchtest. Probiere hier aus, mit welcher Einstellung du noch eine gute Bildqualität erzielst und trotzdem die Dateigrösse reduzieren kannst. Eine «richtige» Einstellung gibt es hier nicht, hier kommt es auf deine Anforderungen die Website an, bei der du Qualität und Performance abwägen musst. Für einen ersten Test exportiere dein Bild mit 70-80 % und vergleiche den Export mit einem optimieren JPG- oder PNG-Export im gleichen Format - der Gewinn in der Dateigrösse sollte deutlich sein.

Du kannst keinen WebP-Eintrag in den möglichen Speicherformaten finden?

Stelle zuerst sicher, dass du mindestens Photoshop 23.2 im Einsatz hast. Ältere Versionen benötigen eine Erweiterung. Die Links hierzu findest du bei Adobe. In einigen nachfolgenden Photoshop-Versionen bis zu 25.x muss das Bild mit 8-Bit-Modus erstellt sein – nur dann kannst du den WebP-Eintrag unter «Kopie speichern» finden. Neuere Photoshop-Versionen lassen auch höhere Bitraten zu.

Bilder-SEO: der ultimative Leifaden

Du möchtest mehr darüber erfahren, wie du mit der richtigen Bildformatierung dein SEO voran bringst? Alle Infos dazu findest du in unserem Beitrag «Bilder-SEO: Der ultimative Sichtbarkeits-Boost für Webseiten».