search

grow / airkit2

Airkit is a collection of JavaScript and SASS components designed to make life easier for the modern frontend developer.
https://grow.github.io/airkit2/
MIT License
0 stars 2 forks source link

Progressive image loading #3

Open stevenle opened 5 years ago

stevenle commented 5 years ago

Within the lazyimage component, we should have an option to specify a tiny placeholder image that eventually gets replaced with the lazily-loaded image.

Example about how Medium does it: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

jeremydw commented 5 years ago

It could be cool to use this with an integration with the Google Cloud Images service and use "JPG quality zero" images as the placeholders, since they'd be very small and decode easily.

stevenle commented 5 years ago

Yeah, that's the idea, but it should be agnostic of Google Cloud Images so you could provide any URL that has a degraded version of the image you're loading.

lazyimage already supports a {width} placeholder in URLs that's already useful with Google Cloud Images URLs. Devs would just need to provide the placeholder image with some static params to fetch a tiny version of the normal image.