Using WebP images and alternative jpg/png for Safari browser

SOLVE
Esther_ISM
Participant

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? 

1 Accepted solution

Accepted Solutions
jonchim
Solution
Guide | Diamond Partner

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






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

6 Replies 6
sharonlicari
Community Manager

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


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes
Esther_ISM
Participant

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. 

0 Upvotes
sharonlicari
Community Manager

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 


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes
psdtohubspot
Key Advisor

Hi @Esther_ISM 

 

Let me know if it's still not resolved.

0 Upvotes
lpez
Participant

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.

0 Upvotes
jonchim
Solution
Guide | Diamond Partner

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






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post