Testing correct smart serving of JPG PNG and WEBP image types
Checking that you are serving the correct type of JPG, PNG or WEBP images can be confusing. These images will look the same if done correctly but can you check. This is how to test your image delivery system is working correctly.
If you have implemented delivery of jpg and png images to be delivered as webP images to browswers that can display webP images, then the following can be used to test the correct delivery to the browser that you are viewing this on.
My browser/OS can display webP images
If your browser CAN display webP image, then you will see a message above and a second image below that displays the text I am a webP image. You will see the same image in both instances.
My browser/OS cannot display webP images
If your browser CANNOT display webP image, then you will see a message above that displays the text I am a jpg imageand a second image below that displays the text I am a png image. You will see a jpg image and also a different png image.
How does this work.
There are 3 different images used here, each optimised in Squoosh and saved as 3 jpg, png and webP versions. The same main image is used but the jpg version has the word jpg, the png version has the word png and the webP version has the word webP*. The text used is just to show the image type.
The image above has been loaded to the server using the jpg version as a background image and the image below loaded to the server using the png version as a normal image.
You can test your image delivery, by visiting this page with different browsers. E.g. macOS Catalina Safari 15.4 or older iOS versions, will not display webP images.
