DEV Community

Discussion on: Optimizing images for the web - an in-depth guide

gtb3nw profile image

Hey Adrian, have a look at conditional webp returning. You can see browser headers for Accept and if webp appears there when the request for an image is made, you can conditionally return the webp to the client. Browsers will render the webp instead of a jpeg for example. No code changes required, just pipeline changes to create a webp alongside your jpegs, then add the condition to your webserver.

adrianbdesigns profile image
Adrian Bece Author • Edited on

I had no idea it can be implemented server-side as well. Thank you very much for your suggestion.

I found this guide, looks simple and straightforward:

eionrobb profile image
Eion Robb

This can cause issues when saving images offline (eg for building offline-capable PWA's) unless you're careful to change the filename extension when you store it offline, eg storing a .jpg file with webp contents can trigger security checks since the mime-type of the contents of the file doesn't match with the mime-type of the file extension (extension sniffing has to be used since there's no mime-type headers for file://)