topic Re: Using WebP images and alternative jpg/png for Safari browser in CMS Development

Using WebP images and alternative jpg/png for Safari browser

Esther_ISM — Tue, 10 Mar 2020 07:54:36 GMT

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?

Re: Using WebP images and alternative jpg/png for Safari browser

sharonlicari — Fri, 20 Mar 2020 11:37:39 GMT

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

Re: Using WebP images and alternative jpg/png for Safari browser

psdtohubspot — Wed, 15 Apr 2020 21:02:22 GMT

Hi @Esther_ISM

Let me know if it's still not resolved.

Re: Using WebP images and alternative jpg/png for Safari browser

lpez — Fri, 24 Apr 2020 18:10:59 GMT

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.

Re: Using WebP images and alternative jpg/png for Safari browser

Esther_ISM — Tue, 08 Sep 2020 12:42:24 GMT

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-personalisatie

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

Re: Using WebP images and alternative jpg/png for Safari browser

sharonlicari — Wed, 09 Sep 2020 10:45:06 GMT

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

Re: Using WebP images and alternative jpg/png for Safari browser

jonchim — Wed, 09 Sep 2020 12:17:13 GMT

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?profile.language=en

Re: Using WebP images and alternative jpg/png for Safari browser

ALeonard — Wed, 23 Mar 2022 16:24:35 GMT

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?