Wieso liefert das CDN keinen .webp Suffix in der URL aus?

Das creoline® CDN liefert statische Ressourcen und deren zugehörigen MIME-Typen über die HTTP Response Header aus. Webbrowser interpretieren Bilder nicht anhand des URL-Suffixes, sondern anhand des zurückgelieferten Content-Type Headers. Dadurch wird der Eindruck erweckt, dass das CDN keine WebP-Grafiken generieren würde.

Warum passen wir die URL nicht an?

Wir liefern bewusst .webp-Grafiken auf Basis der alten URL aus, um eine maximale Kompatibilität zu Geräten ohne WebP-Unterstützung zu bieten. Anhand der HTTP-Anfrage des Besuchers können wir identiifizeren, ob dieser das WebP-Format unterstützt oder nicht. Je nach Unterstützung liefern wir, sofern in den Einstellungen aktiviert, die .webp-Variante aus.

Wie kann ich nachvollziehen, ob Bilder in WebP ausgeliefert werden?

Für die technische Analyse können Sie zum Access-Log im Kundencenter navigieren und einzelne Grafiken auf den zurückgelieferten Typ prüfen. Das Stern-Symbol wird dargestellt, wenn eine automatische Konvertierung stattgefunden hat. In diesem Fall wurde vom Typ image/jpg zu image/webp konvertiert.

Durch die WebP-Komprimierung konnten 50% (6 KB) der ursprünglichen Dateigröße eingespart werden.

Alternativ zum Access Log über unser Kundencenter können Sie die Response Header der jeweiligen URL direkt darstellen. In Google Chrome können Sie die entsprechende URL aufrufen und mit einem Rechtsklick auf die Grafik den Menüpunkt Untersuchen auswählen. Wählen Sie in dem neuen Fenster die Registerkarte Network (Netzwerk) → All (Alle) aus. Aktualisieren Sie anschließend die Seite, damit der *.cstatic.com Aufruf protokolliert werden kann.

Wählen Sie anschließend die HTTP-Anfrage aus und navigieren Sie zur Registerkarte Header. In dem Bereich "Response Header" wird nun der tatsächliche Typ (Content-Type) dargestellt.

Für das Beispiel wurde folgende cstatic-URL verwendet:

https://creoline-demo.cstatic.io/thumbnail/a8/56/1c/1638973501/hq_1280x1280_1920x1920.jpg

Response:

server: creoline
cache-control: max-age=36000, public
content-length: 140660

// Tatsächlicher MIME-Type / Content-Type (hier: WebP)
content-type: image/webp

date: Sat, 16 Jul 2022 12:17:07 GMT
etag: 8fc60884cf1d1f02956eb92cd991e48d
expires: Tue, 12 Jul 2022 01:53:35 GMT
last-modified: Wed, 08 Dec 2021 14:25:09 GMT
link: <https://shopware.creoline-demo.com/thumbnail/a8/56/1c/1638973501/hq_1280x1280_1920x1920.jpg>; rel="canonical"

// Informationen zur Live-Konvertierung
x-converted: image/jpeg to image/webp
x-original-content-type: image/jpeg
x-original-content-length: 167952
x-quality: 80

// Informationen zur Edge-Location
x-edge-pop: FRANKFURT

Detaillierte Informationen zur Analyse aller Response Header finden Sie auch in dem Artikel CDN Response Header analysieren.