/    Sign up×
Bounties /Pin to ProfileBookmark

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??

to post a answer
Back-endPHPWeb 3

1 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.

Was this helpful?

×

Success!

Help @hebrerillo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 2.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,

tipper: @neststayhome,
tipped: article
amount: 1000 SATS,
)...