Share Your Work

stefen
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

Progressive Image Loading with HubSpot

progressive-image.gif

Have you seen how images load in popular apps such as WhatsApp, Instagram, or on Medium's website? This technique is called "progressive image loading" or "the blur up technique" and it's actually not hard to accomplish on HubSpot's COS thanks to it's auto image resizing capabilities.

I wrote a blog post on how to do it, but in short, all you have to do is add a URL parameter to the end of an IMG's src attribute "?width=20" and then you can fade it out once the full size image loads with some javascript. For more details on how to implement this with full width background images, read my blog post.

 

I'd love to see other ways this can be used or if anyone has tried anything like this in HubSpot.

Stefen Phelps, Community Champion, Kelp Web Developer
6 Respostas 6
FabianP
Participante

Progressive Image Loading with HubSpot

Hi Stefen,

 

unfortunately the blog article is no longer availabe at the provided link.

Can I find it elsewhere?

 

Thanks a lot!

Fabian

0 Avaliação positiva
stefen
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

Progressive Image Loading with HubSpot

Sorry about that, @FabianP. I've updated the link to a working version.

Stefen Phelps, Community Champion, Kelp Web Developer
FabianP
Participante

Progressive Image Loading with HubSpot

Hey stefen,

 

thanks a lot for that! Smiley muito feliz

0 Avaliação positiva
NiallByrne
HubSpot Employee
HubSpot Employee

Progressive Image Loading with HubSpot

Great tip @stefen

0 Avaliação positiva
vishnu
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Progressive Image Loading with HubSpot

Sweet tip @stefen. Thanks for sharing! Definitely bookmarking this for my next project.

Vishnu M.
Product Manager, Mobile
stefen
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

Progressive Image Loading with HubSpot

Thanks @vishnu! You could try and take it a step further and write a script that works with content images rather than just on backgrounds 😉

Stefen Phelps, Community Champion, Kelp Web Developer
0 Avaliação positiva