Using WebP images and alternative jpg/png for Safari browser

[Esther_ISM]

Hi,

Our website relies heavily on the huge of real pictures. Since real pictures contain a lot of information, it's hard to keep them sharp and below e.g. 80 kb (even with compression tools). 

For page speed it helps to use images in WebP format. However, browser Safari does not support this format. So my solution would be to offer visitors images in WebP, except when they use Safari. I've read on the internet that there are several ways to achieve this in other CMS. For example, I've been reading about an easy workaround by using the tag <picture>. However, I get feedback from developers that this is not possible in HubSpot CMS. 

Since I'm a stubborn person, I was wondering if anyone else has experienced  the same issues and if they have implemented a working solution? 

[ALeonard]

Hi Esther, thanks for asking this question. I would like to change most of our images to WebP format as well. Do you or @jonchim know if Safari now supports this format?

[jonchim · Accepted solution]

Hi @Esther_ISM ,

In the blog environment you can handcode the <picture> tag, so the image can be viewed on safari with the jpeg fallback. It's a bit tedious to do it that way, but i'm not sure there's an easier way to do it?

Also this was recently submitted in the ideas board, could be useful functionality for the HubSpot CMS in the futre for supporting webp format.

https://community.hubspot.com/t5/HubSpot-Ideas/Automatic-Resizing-for-webp-Images/idc-p/356504?profi...

[lpez]

I also would like to know more about the possibility of using new file formats, like jpeg2000 (this is mostly for apple users) and webp (everyone else).

I code static websites too, and I use webpacker to do all the transformations every time I upload to the server. Here the implementation would not be as easy I imagine since it would have to be done by a library on the backend (HubSpot's side).

Also template would probably need to be updated to support this feature.

But I want to know if this is implemented.

[psdtohubspot]

Hi @Esther_ISM 

Let me know if it's still not resolved.

[sharonlicari]

Hey @Esther_ISM 

Could you please share the URL? with this information, I could ask for collaboration from our experts 🙂

Thanks and Stay Safe

Sharon

[Esther_ISM]

Hi,

Sorry for my very late reply. I was on maternity leave. It's not resolved yet. 

During my leave most of the images on our site have been replaced with .jpg again...however, I found an old blog on which it's still an issue: 

https://www.ism.nl/kennisbank/blogs/em/5-tips-voor-optimaal-gebruik-van-je-e-maildatabase-voor-perso...

The first image is a gif, but second one, beneath the title "2. Stuur een welkomstbericht" is a webp. 

[sharonlicari]

Hey @Esther_ISM 

Thank you for getting back to me, I'll tag a few experts that can share their thoughts with you 

Hey @Kevin-C @Chris-M @jonchim any advice you could give to @Esther_ISM? 

Thanks

Sharon