Skip to content

Commit 833448d

Browse files
aclark4lifeCopilot
andcommitted
Pre-bake hero background blur/saturation, drop CSS filter
Per Copilot's performance suggestion, replace the runtime CSS `filter: blur(1px) saturate(1.3)` on the full-viewport .hero::before layer with a pre-processed JPEG (blurred/saturated at build time via Pillow), avoiding the GPU compositing cost of filtering a large layer on every paint. Visual result is unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent cd04fd8 commit 833448d

3 files changed

Lines changed: 8 additions & 5 deletions

File tree

assets/css/pillow.css

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
- Coral/terracotta and magenta are pulled directly from the flowers in
66
the Pillow logo photo.
77
- Sky blue is pulled from the desert/sky photo in the same logo.
8-
- All three also appear in assets/images/psychedelic-glow.png, the
8+
- All three also appear in assets/images/psychedelic-glow.jpg, the
99
psychedelic rainbow texture from the original PIL-era site (art by
1010
Jeremy Kun), which we reuse as a subtle glow behind the hero logo for
11-
a bit of the site's history and visual uniqueness.
11+
a bit of the site's history and visual uniqueness. Pre-blurred and
12+
pre-saturated at build time (rather than via CSS `filter`) to avoid
13+
the runtime GPU cost of filtering a full-viewport layer.
1214
- Ink (near-black) and warm paper (off-white) anchor everything so the
1315
brighter accent colors stay legible and don't overwhelm the page.
1416
========================================================================== */
@@ -239,14 +241,15 @@ img {
239241
}
240242

241243
.hero::before {
242-
/* Psychedelic art by Jeremy Kun, from the original PIL-era site */
244+
/* Psychedelic art by Jeremy Kun, from the original PIL-era site.
245+
Blur/saturation are pre-baked into the image itself (see the
246+
palette rationale note above), so no CSS filter is needed here. */
243247
content: "";
244248
position: absolute;
245249
inset: 0;
246-
background-image: url(../images/psychedelic-glow.png);
250+
background-image: url(../images/psychedelic-glow.jpg);
247251
background-size: cover;
248252
background-position: center;
249-
filter: blur(1px) saturate(1.3);
250253
opacity: .45;
251254
mix-blend-mode: screen;
252255
z-index: -2;

assets/images/psychedelic-glow.jpg

114 KB
Loading

assets/images/psychedelic-glow.png

-73.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)