Description
WebP is an image format currently developed by Google, based on technology acquired with the purchase of On2 Technologies. When saving images hosted on sites users may find that images are downloading as WEBP extensions instead of JPEG or PNG. It is likely that the content is being served optimized by the Cloudflare CDN because a function called Polish available for optimization is enabled by default. Chrome is unique because it supports WEBP as a format and will be served that due to the user agent field showing it is supported as well.
When an image is loaded to the CDN, it will investigate if it can save in file size by converting the image to WEBP. If it can, subsequent requests to the image done by browsers that support WEBP will get the file delivered as WEBP. The file name will still be the same, for instance woman.jpg, but the type of the file will be changed in the header of the response. This means that this can be turned on without making any changes whatsoever to the application. Turning this on is as simple as checking a checkbox if you have access to the Cloudflare admin UI. This does not create different image versions for different sizes, but can reduce the size of images. By default, Episerver will configure the quality
Steps
By default, Episerver will configure the quality setting for image optimization to 85. This can be changed by opening a ticket with Episerver’s hosting teams. If you want to read more about Polish, you can do so here.
https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/
Before disabling Polish you should open a ticket with the Service Desk team to see what impact on performance that might have on the site.
Another option is to have custom code that manipulates the header to trick the browser to "not being Webp" supported and it could fetch the fallback. There is not a sample available from Episerver at this time, but the following links go into some discussions on options.
Why does Google Chrome save a JPG image to WEBP instead?
There may be a way to use a 3rd party package like ImageProcessor to tweak how images are served.
For some EPI discussion on WebP processing see ImageProcessor.Web.Episerver: new versions!
There are some extensions at the client level as well. These would be less useful as a global policy, but the options listed in the following article may allow for editors to save the images as PNG files without directly impacting the experience of site visitors. Our engineering team does not officially endorse third party add-ons, so third party add-ons should always be reviewed on a case by case basis and an individual organization's needs.
Please sign in to leave a comment.