Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyAs of Safari 14, Apple has added support for the WebP image format. However, if you want to ensure compatibility with older versions of Safari, you can use the Accept request header to specify the image formats that your server is willing to accept.
When a browser sends a request to a server, it includes an Accept header that specifies the media types that the browser is willing to accept in the response. For example, a browser that supports WebP might include "image/webp" in its Accept header.
Here's an example of what the Accept header might look like for a browser that supports WebP:
In this example, the browser is saying that it prefers WebP and APNG images, but it will accept any image format if WebP and APNG are not available. The "q=0.8" parameter is a quality factor that specifies the browser's relative degree of preference for that media type.
On the server side, you can check the Accept header to determine whether the browser supports WebP. Here's an example of how you might do this in Node.js:
In this example, the server checks whether the Accept header includes "image/webp". If it does, the server sends a WebP image. Otherwise, it sends an image in a different format.
Safari webp support in the accept headers request
I developed a server side script to check if the browser supports webp format images by checking the “image/webp” string in the accept request headers. The problem is that recent versions of Safari, even though they support Webp, they do not send the string “image/webp” in the headers. Why??
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyAs of Safari 14, Apple has added support for the WebP image format. However, if you want to ensure compatibility with older versions of Safari, you can use the Accept request header to specify the image formats that your server is willing to accept.When a browser sends a request to a server, it includes an Accept header that specifies the media types that the browser is willing to accept in the response. For example, a browser that supports WebP might include "image/webp" in its Accept header.
Here's an example of what the Accept header might look like for a browser that supports WebP:
Accept: image/webp,image/apng,image/*,*/*;q=0.8
In this example, the browser is saying that it prefers WebP and APNG images, but it will accept any image format if WebP and APNG are not available. The "q=0.8" parameter is a quality factor that specifies the browser's relative degree of preference for that media type.
On the server side, you can check the Accept header to determine whether the browser supports WebP. Here's an example of how you might do this in Node.js:
app.get('/image', (req, res) => {
const acceptHeader = req.headers.accept || '';
if (acceptHeader.includes('image/webp')) {
// Send a WebP image
} else {
// Send a different image format
}
});
In this example, the server checks whether the Accept header includes "image/webp". If it does, the server sends a WebP image. Otherwise, it sends an image in a different format.