Skip to content

Convert the hero background images to WebP - #194

Closed
bendichter wants to merge 1 commit into
mainfrom
compress-hero-backgrounds
Closed

bendichter wants to merge 1 commit into
mainfrom
compress-hero-backgrounds

Conversation

@bendichter

Copy link
Copy Markdown
Contributor

Most pages use aboutBg.png as the background of the title banner. It is a 2.6 MB PNG under a gradient at 90% opacity, and it is most of the image weight of a typical page. This converts the six section backgrounds to WebP at the same pixel dimensions (11.3 MB to 1.0 MB in total) and updates the 24 references in the templates and stylesheet. The PNG originals are removed. The median image weight of a page drops from 2.8 MB to 0.6 MB.

The News pages reference newsPageBg.png, but the file is named newspageBg.png, so on nwb.org the image returns 404 and those banners show only the gradient. The converted file is named to match the reference, so the News banners will show the background like the other pages do.

🤖 Generated with Claude Code

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) <noreply@anthropic.com>
@netlify

netlify Bot commented Oct 9, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for nwborg ready!

Name Link
🔨 Latest commit d44b0e7
🔍 Latest deploy log https://app.netlify.com/projects/nwborg/deploys/6ac922e9d365540008b1df39
😎 Deploy Preview https://deploy-preview-194--nwborg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@bendichter

Copy link
Copy Markdown
Contributor Author

Superseded by #207, which combines this with the related PRs. The commits here are included there unchanged.

@bendichter bendichter closed this Oct 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant