From b1c29e9a41848020fcf75c3622af456234e02e91 Mon Sep 17 00:00:00 2001 From: Robin Date: Tue, 18 Aug 2026 16:54:07 +0200 Subject: [PATCH] Performance: Use PNGs for the background gradients It turns out that for a blurry gradient background, low-res raster images look very convincing when scaled up and interpolated. That means that we can rasterize our gradient SVGs for improved paint performance when resizing the window, while still keeping them quite lightweight (just a couple of kilobytes each). --- src/graphics/desktop-gradient.png | Bin 0 -> 2651 bytes src/graphics/desktop-gradient.svg | 16 ------ src/graphics/mobile-gradient.png | Bin 0 -> 1690 bytes src/graphics/mobile-gradient.svg | 86 ------------------------------ src/index.css | 15 +++--- 5 files changed, 9 insertions(+), 108 deletions(-) create mode 100644 src/graphics/desktop-gradient.png delete mode 100644 src/graphics/desktop-gradient.svg create mode 100644 src/graphics/mobile-gradient.png delete mode 100644 src/graphics/mobile-gradient.svg diff --git a/src/graphics/desktop-gradient.png b/src/graphics/desktop-gradient.png new file mode 100644 index 0000000000000000000000000000000000000000..84b414cfc6e489df43d966d69420b1cbc2040801 GIT binary patch literal 2651 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 - - - - - - - - - - - - - - - diff --git a/src/graphics/mobile-gradient.png b/src/graphics/mobile-gradient.png new file mode 100644 index 0000000000000000000000000000000000000000..ab6d1ae432d4713c7360a3325ba9de064ce3b245 GIT binary patch literal 1690 zcmV;L24(q)P)z@;j|==^1poj5AY({UO#lFTCIA3{ga82g0001h=l}q9FaQARU;qF* zm;eA5aGbhPJOBU&7)eAyR7l6Q*4=Jf#}UBs|IF?=B=zCQX<48^3j_hu0?uU~AbJTu zkE7?&OX#|QZw=HJK|g}FmfQw0Bavr!K6-IzOLFYgX;T7=-9vyohd<2BuJH4G1QK%p zbap22WL`fy7kCWME@b}V6#n*9K4{nHUnE@2>-A~EIeh+jALR_bdXjIwM*a+c z3-BfI{CJM>_m%L^KMS9I2LJkIANP~{JO1gdhZnz@cRy1bz#LFN9aa9P_%)^Ub#czl4_n zFJbv`-hA_mgcq<{C*OL)U*YQ4$;y(WmOsGxd=Kyy{}YV-R}g1s!jmU60*_&RAv`~x z5spUT#W%v?LRgK$UpC5e5U#6mQ-wtlc4dw`?dR|AM0o{_o_x2TuOB31BpXi_p6nh5 zOHZ!s7U%12a=gj+XU&Jh$WP7)5YEqq$B*ISLO4DaRx9BTm-+@_yHVOo8LRMetBfBD zzEvg_rXn;Ix(aP8a4_$B!|mKMsgX>pWVc_N1vj1?90uQCB}d0`4`+Q7Gt3vsnmaH* zEn|KhB=>#dZdPzET&!;)E-#hELf9NCyNzAf&5l(0e{6|7*#%FYX3lxBsUDYg{Sl$3WPL;6N|8{liM&;!GJ5VrJ=t z7$F^3qe#cxaP5d0CLO7UG^11_CMQ;o-#DA=;A9}jaiz4V zSXMkMOarm3bQ_VyKxe>x#D@WAe(nrq$3QO?mpw)nnkZcqL+EAh9}{4ixCTvw5T~c( z;dC{U?x9BaPS!?9C#B)mDcZ5#Dbne>$C(Trjcp6o51j9JKZbG#0dkm$C&=mT5aNqyx=O<~E$tNNXhX2x$b3QaY`4m<$;W+d0z%=j1Jv^JjUd(Wbn0 z&k#5lo_?xt%H*Th7!N9OGY~p}jZjBKN31OHSP*4VLKpN{V7kBS?R#_ zG_tHCEthyM(OlM$RYqBotT10eS*FPn-)D-;h{?#L1D=(p6;ox(eN)x>*4mJ{TqJ2a zCx4f~axNQJqvzaEP3MwGCW1+l9g#ayw`6YJ*`d0{`wpo)XcM`ZaBb9WM@OR`8k;`` kzdLoFUnHle@%oPPZ-Xm;P0z+m%>V!Z07*qoM6N<$g3_c3r~m)} literal 0 HcmV?d00001 diff --git a/src/graphics/mobile-gradient.svg b/src/graphics/mobile-gradient.svg deleted file mode 100644 index e401846ed..000000000 --- a/src/graphics/mobile-gradient.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/index.css b/src/index.css index d32f1fcfa..93614e29a 100644 --- a/src/index.css +++ b/src/index.css @@ -74,20 +74,23 @@ body { -webkit-tap-highlight-color: transparent; } -@media (min-height: 330px) { +@media (min-height: 33px) { body[data-background="gradient"]::before { content: ""; position: fixed; - inset: 0; - background-image: url("graphics/mobile-gradient.svg"); - background-size: auto; + /* Chromium abruptly fades our images to fully transparent at the edge of + the element. If we just make the element a little bigger than the viewport, + this is no longer visible. */ + inset: -20px; + background-image: url("graphics/mobile-gradient.png"); + background-size: 1400px 305px; background-position: bottom; background-repeat: no-repeat; } body[data-background="gradient"][data-platform="desktop"]::before { - background-image: url("graphics/desktop-gradient.svg"); - background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh)); + background-image: url("graphics/desktop-gradient.png"); + background-size: max(1440px, 100vw) max(1440px, 100vh); background-position: center; } }