a3rev / a3-lazy-load

Speed up your site and enhance frontend user's visual experience in PC's, Tablets and mobile with a3 Lazy Load.
GNU General Public License v3.0
18 stars 11 forks source link

Blurred images as placeholders [Feature Suggestion] #10

Open ge-we opened 6 years ago

ge-we commented 6 years ago

This is a big one, probably worth a premium.

Low resolution placeholders of the actual images, inlined as data URIs and blurred via CSS or SVG.

Demos: https://jmperezperez.com/medium-image-progressive-loading-placeholder/ https://css-tricks.com/the-blur-up-technique-for-loading-background-images/

a3rev commented 6 years ago

@ge-we

Just read through the blog posts from 2015 - seems a lot of work to produce a blurred loading effect for images -' similar to what Medium or facebook' where using at that time. The thing that stands out from the first post is that they see big no noticeable improvement in loading time of the deferred image - I am not even sure that Medium is using it anymore.

I don't have the time to build a 'proof of concept' and then test across all browsers - but if you do and you are passionate about it then don't let me discourage you, have a go at it and if you get a working patch please send a PR

rafaelluz-f commented 5 years ago

@a3rev it's possible to add alpha background css? Instead of appears a white background will just appears the load icon.