Use a PNG for the background gradient for better performance

[sandhose]

I had the issue in another project with this exact same background. The SVG is really expensive to render, as it's a gaussian blur of 200px. This is noticeable on loading, but especially when resizing the window. This is quite bad on safari, but especially on firefox.

Here's a recording before/after on safari:

ec-bg.mp4

[toger5]

Thanks @sandhose. This looks way better indeed. It does look very different to the svg version so this needs a design review to see if the png version is desired.

[sandhose]

Is it really that different? It's closer to the Figma designs, and on safari the rendering differences are negligible. I think the biggest difference is in Firefox, but I would say that the SVG version in Firefox is the one currently most far off the designs?

[toger5]

Yes I was testing on FF.
The PNG also seems a bit grainy. Is that intentional?

[sandhose]

The PNG also seems a bit grainy. Is that intentional?

It is very low res; I can probably double the resolution if it's too noticeable

[bmarty]

My 2 cents: I prefer SVG as it's a vector format. Would it be possible, to mitigate the white stripes when increasing the browser window size to apply another plain dark color background? Or maybe render the background to 120% (for instance) of the window size and centered so that we have room to increase the browser size without viewing the white stripes?

[toger5]

I am wondering what we do with this.
I like the perf benefit. But I think the rendering only happens on resize so its not that big of a deal from a resource consumption point of view. (its not happening all the time)

I think what would have a bigger impact on how it feels is making the background behind the picture also black?
The png is also larger (1kb vs 60kb) so both very small...