Repository navigation
Serve smaller images and replace GIF demos with video - #207
Open
bendichter wants to merge 6 commits into
Open
bendichter wants to merge 6 commits into
bendichter wants to merge 6 commits into
Conversation
Images are stored at their original size in static/images and were served that way, so the news cards on the home page loaded about 6 MB of banners for 300 px slots and the Team page loaded a 9.8 MB headshot. No image on the site was lazy-loaded. static/images is now also mounted as assets/images, which lets templates run images through Hugo's image processing. A new partial, img-src.html, returns a WebP version of a PNG or JPEG, scaled down to the width the slot needs, and falls back to the original URL for anything it cannot improve (remote URLs, SVG, GIF, small files, or a WebP that would be larger). The 60 template images that take their source from front matter use it with a width chosen for each slot, and a render hook applies it to Markdown images. All of them except the banner at the top of event and news pages are lazy-loaded. Two CSS selectors matched images by file name including the .png extension. They now match on the name without the extension so they keep applying to the converted files. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
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>
Six tool pages embedded screen recordings as animated GIFs, which totalled 51 MB. The NWB Widgets page alone loaded a 22 MB GIF and the Suite2p page a 17 MB one. They are now H.264 MP4 files (5.4 MB in total) played with a muted, looping, inline video element, which behaves the same way as the GIF did. The Suite2p recording is scaled from 1920 to 1600 pixels wide and the others keep their size. The DeepLabCut and SLEAP cards on the Community Tools page used the same GIFs as their card image. Those are now animated WebP files, since the card template takes an image. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…image-optimization
… image-optimization
✅ Deploy Preview for nwborg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This was referenced Oct 11, 2026
Contributor
Author
Before and after"Before" is the production site and "after" is this PR's Netlify deploy preview, both at 1440 px wide. News banner: the background photo now loads
The "before" here is from nwb.org. Netlify serves filenames case-insensitively, so the missing background only shows on the GitHub Pages site. NWB Widgets demo: looks the same as a video (the two captures are at different frames)
The demo goes from a 22 MB GIF to a 0.35 MB MP4. Images downloaded on first load, without scrolling:
🤖 Generated with Claude Code |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Combines three PRs that cut image and media weight. The built site drops from 218 MB to 173 MB. Each one is a separate merge commit, so they can be reviewed one at a time.
newsPageBg.pngwhile the file was namednewspageBg.pngand so returned 404 on nwb.org.static/imagesasassets/imagesand adds animg-src.htmlpartial that returns a WebP scaled to the width of the slot it is shown in. Images below the fold are lazy-loaded.<video>elements. The DeepLabCut and SLEAP card images become animated WebP.The combined branch builds with Hugo 0.152.2 and produces the same 165 pages as
main.pr_link_checkfailed on #195, so it may fail here too.This conflicts with the draft #205 in
hugo.yamlandlayouts/shortcodes/tool-grid.html. Whichever merges second will need a rebase.Supersedes #193, #194 and #195.
🤖 Generated with Claude Code