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.
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://)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Adrian, have a look at conditional webp returning. You can see browser headers for
Acceptand 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.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:
alexey.detr.us/en/posts/2018/2018-...
github.com/uhop/grunt-tight-sprite...
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://)