From d44b0e7d44cda3fd8bd81b72270382f4492140bd Mon Sep 17 00:00:00 2001 From: Ben Dichter Date: Fri, 9 Oct 2026 13:11:26 -0400 Subject: [PATCH] Convert the hero background images to WebP Most pages use aboutBg.png as the background of the title banner. It is a 2.6 MB PNG that sits under a gradient at 90% opacity, and it accounted for most of the image weight of a typical page. The six section backgrounds are now WebP files at the same pixel dimensions, 0.99 MB in total instead of 11.3 MB, and the templates and stylesheet point at the new files. The News pages referenced newsPageBg.png, but the file was named newspageBg.png, so on the case-sensitive production host the image returned 404 and those banners showed only the gradient. The converted file is named to match the reference. Co-Authored-By: Claude Opus 5.5 (1M context) --- assets/css/style.css | 8 ++++---- layouts/archives/list.html | 2 +- layouts/community/educators.html | 2 +- layouts/community/gallery.html | 2 +- layouts/community/list.html | 2 +- layouts/contact-us/list.html | 2 +- layouts/convert/list.html | 2 +- layouts/enhancement-proposals/list.html | 2 +- layouts/event-cards/list.html | 2 +- layouts/faq/list.html | 2 +- layouts/faq/single.html | 2 +- layouts/grants-and-projects/list.html | 2 +- layouts/news/list.html | 2 +- layouts/news/single.html | 2 +- layouts/online-resources/list.html | 2 +- layouts/policies/list.html | 2 +- layouts/publications/list.html | 2 +- layouts/team/list.html | 2 +- layouts/tools/list.html | 2 +- layouts/tools/single.html | 2 +- layouts/working-groups/list.html | 2 +- static/images/essentials/aboutBg.png | Bin 2556142 -> 0 bytes static/images/essentials/aboutBg.webp | Bin 0 -> 165378 bytes static/images/essentials/ctaBg.png | Bin 444894 -> 0 bytes static/images/essentials/ctaBg.webp | Bin 0 -> 173676 bytes static/images/essentials/eventsBg.png | Bin 1165784 -> 0 bytes static/images/essentials/eventsBg.webp | Bin 0 -> 98956 bytes static/images/essentials/newsBg.png | Bin 3680287 -> 0 bytes static/images/essentials/newsBg.webp | Bin 0 -> 324954 bytes static/images/essentials/newsPageBg.webp | Bin 0 -> 66026 bytes static/images/essentials/newspageBg.png | Bin 893095 -> 0 bytes static/images/essentials/softwareBg.png | Bin 2556142 -> 0 bytes static/images/essentials/softwareBg.webp | Bin 0 -> 165378 bytes 33 files changed, 24 insertions(+), 24 deletions(-) delete mode 100644 static/images/essentials/aboutBg.png create mode 100644 static/images/essentials/aboutBg.webp delete mode 100644 static/images/essentials/ctaBg.png create mode 100644 static/images/essentials/ctaBg.webp delete mode 100644 static/images/essentials/eventsBg.png create mode 100644 static/images/essentials/eventsBg.webp delete mode 100644 static/images/essentials/newsBg.png create mode 100644 static/images/essentials/newsBg.webp create mode 100644 static/images/essentials/newsPageBg.webp delete mode 100644 static/images/essentials/newspageBg.png delete mode 100644 static/images/essentials/softwareBg.png create mode 100644 static/images/essentials/softwareBg.webp diff --git a/assets/css/style.css b/assets/css/style.css index 9708038..969b307 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -739,7 +739,7 @@ header { .newsSect { display: table; background: linear-gradient(#05223ae5, #072742, #052037e5), - url("/images/essentials/newsBg.png"); + url("/images/essentials/newsBg.webp"); background-position: center top; background-size: cover; } @@ -795,7 +795,7 @@ header { /* CTA */ .ctaSect { display: table; - background: url("/images/essentials/ctaBg.png"), #114b7c; + background: url("/images/essentials/ctaBg.webp"), #114b7c; background-position: center center; background-size: cover; } @@ -813,7 +813,7 @@ header { /* About */ .aboutSect { background: radial-gradient(#063053e5, #062e52e5), - url("/images/essentials/aboutBg.png"); + url("/images/essentials/aboutBg.webp"); background-position: center center; background-size: cover; background-repeat: no-repeat; @@ -837,7 +837,7 @@ header { /* Hero */ .softwareSect { background: radial-gradient(#063053e5, #062e52e5), - url("/images/essentials/softwareBg.png"); + url("/images/essentials/softwareBg.webp"); background-position: center center; background-size: cover; background-repeat: no-repeat; diff --git a/layouts/archives/list.html b/layouts/archives/list.html index 521f899..76decab 100644 --- a/layouts/archives/list.html +++ b/layouts/archives/list.html @@ -1,7 +1,7 @@ {{ define "main" }} {{/* Hero Section */}}
+ style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.webp');">

{{ .Title | markdownify }}

diff --git a/layouts/community/educators.html b/layouts/community/educators.html index 539b1e6..738b59e 100644 --- a/layouts/community/educators.html +++ b/layouts/community/educators.html @@ -2,7 +2,7 @@
{{/* Hero Section */}}
+ style="background: radial-gradient(#063053e5, #062e52e5), url('/images/essentials/aboutBg.webp');">

{{ .Title | markdownify }}

diff --git a/layouts/community/gallery.html b/layouts/community/gallery.html index e44ca85..6d67976 100644 --- a/layouts/community/gallery.html +++ b/layouts/community/gallery.html @@ -2,7 +2,7 @@