No serverside webP conversion in fact

Develop, Build & Integrate CMS Development
1

As stated in docs, JPGs were turned into webP on the server side. I’m afraid, this doesn’t work for me.

Displaying an article in my browser I download a JPG image and expect, it should be a webP, or a webP with JPG file ending. What I in fact download, is a file with JPG ending.

I convert this file to webP with random online convertor. After conversion to webP the size of the result file is 40% lower as the original file. This says to me, I downloaded a real JPG and the supposed serverside turn from JPG to webP doesn’t work.
If I’m wrong - how can I prove, the turn JPG→webP works?

2

Hey, @EOrlov :waving_hand: Thank you for the great question. Let’s be curious together and see where we end up.

Question — Do you have a link that the community can test with? To reproduce your results?

Based on my understanding — HubSpot may convert uploaded JPEG and PNG files to WebP, and this conversion is done for display purposes in browsers that support WebP. The original files are still kept in their original format, and are served to browsers that don’t support WebP. So, when you download the file, you may receive the original JPEG, but be served the WebP version in your browser.

As far as I can find, there isn’t a guide we can use to “prove” this. But here are my thoughts on how you can check if the conversion to WebP is working:

  • Open your site in Google Chrome, which supports WebP.
  • Right-click on the image and choose ‘Inspect’. This will open the browser’s developer tools with the image element selected.
  • Look for the ‘src’ attribute of the image tag. If the image is being served in WebP format, the URL will end in ‘.webp’.
  • Additionally, find the request for the image in question in the “Network” tab, and check the “content-type” of the response header. If it says, “image/webp”, then the server has indeed served a WebP version of the image to your browser.

Thanks for the additional information. I don’t love not having the answer, and I appreciate the chance to learn a bit more together.

Best,

Jaycee

3

@Jaycee_Lewis I don’t believe the Elements tab of the inspect tool will ever show webp since, as the docs mention, the images will still show as their original format on the front-end. The Network tab, as you mentioned, though is definitely the place to look. I just looked on our own website and our images show as jpg/png in the code and download as jpg/png, but in the Network tab are shown as being served as webp.

Also, saw an ideas forum post recently about webp formatting not working with the resize_image_url function, so if you’re using that you’re images won’t be converted.

Another important note is, if you upload pretty large images you’ll still likely get the “Serve images in next-gen formats” message from Pagespeed Insights because it does not serve that message based on the file format provided. It takes the image, even if it’s already webp, converts and compresses it, and compares the size to the original. So even with images being served as webp, you’ll still need to ensure you’re uploading images at a decent file size.

4

All images have content type “image/jpeg”