search

JanDW / wildpeaches

Mind-sized STEM ideas and experiments blog, beyond the textbook.
https://wildpeaches.xyz
0 stars 0 forks source link

Optimize hero image blurry background #116

Closed JanDW closed 3 years ago

JanDW commented 3 years ago

in f40d014 I added a blurry background to the hero image. It's a nice enough effect, but the blur filter (that for some reason doesn't kick in unless I apply it on both elements), has a performance cost. When I scroll the page, it's noticeably more janky, and the looking at the frame-rate when I profile in the devtools confirms the issue.

I could mitigate the performa could create a low-res blurred image during the build instead. I could probably use jimp to create this image.

I came across this library in this article

Likely not worth encoding blurry background image as base64 and inlining it, but maybe?

JanDW commented 3 years ago

Changed the hero unit, uses background-fit: cover; obviating the need for this.