Why doesn't the CDN include a .webp suffix in the URL?

The creoline® CDN delivers static resources and their associated MIME types via the HTTP response headers. Web browsers do not interpret images based on the URL suffix, but rather based on the returned Content-Type header. This gives the impression that the CDN does not generate WebP images.

Why don’t we adjust the URL?

We intentionally serve .webp images using the old URL to ensure maximum compatibility with devices that do not support WebP. Based on the visitor’s HTTP request, we can determine whether their device supports the WebP format or not. Depending on support, we serve the .webp version if it is enabled in the settings.

How can I tell if images are being served in WebP?

For technical analysis, you can navigate to the access log in the Customer Center and check the returned type for individual images. The star icon appears when automatic conversion has taken place. In this case, the type was converted from image/jpg to image/webp.

WebP compression reduced the file size by 50% (6 KB) compared to the original.

As an alternative to viewing the access log via our Customer Center, you can view the response headers for the respective URL directly. In Google Chrome, open the relevant URL, right-click on the image, and select Inspect from the menu. In the new window, select the Network tab → All. Then refresh the page so that the *.cstatic.com request can be logged.

Next, select the HTTP request and navigate to the Header tab. The actual type (Content-Type) is now displayed in the “Response Header” section.

The following cstatic URL was used for this example:

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

// Actual MIME type / Content-Type (here: WebP)
content-type: image/webp

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

// Information about live conversion
x-converted: image/jpeg to image/webp
x-original-content-type: image/jpeg
x-original-content-length: 167952
x-quality: 80

// Information about the edge location
x-edge-pop: FRANKFURT

You can also find detailed information on analyzing all response headers in the article Analyzing CDN Response Headers.