I want my bacgkround-image, which is fairly large, to slowly buffer (not sure if this is the correct use of the word), like first being bad quality then better and then best. IMHO the 'normal' loading mode of displaying a few lines until it has loaded looks ugly. Is there a way to do this?
Asked
Active
Viewed 527 times
1 Answers
3
If you have access to Photoshop or similar, you could look at saving your background image as a progressive jpeg - further information on the link below.
https://www.smashingmagazine.com/2018/02/progressive-image-loading-user-perceived-performance/
This should achieve the effect you’re looking for, I.e loading progressively higher resolution versions of the full image, until download is complete, rather than loading in rows.
Update
It seems that progressive background images may only be supported by Chrome. As an alternative, I think the CSS3 suggestion (Workaround 3) here looks like the approach I’d use, in combination with progressive download on the full res version.
background-image: url('extremely_compressed.jpg'),url('high_quality.jpg');
Matt Saunders
- 3,538
- 2
- 22
- 30