Repository navigation
Serve resized WebP images and lazy-load them - #193
Closed
bendichter wants to merge 1 commit into
Closed
bendichter wants to merge 1 commit into
bendichter wants to merge 1 commit 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>
✅ Deploy Preview for nwborg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Author
|
Superseded by #207, which combines this with the related PRs. The commits here are included there unchanged. |
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.
Images are served at the size they were uploaded. The news cards on the home page load about 6 MB of banners for 300 px slots, the Team page loads a 9.8 MB headshot, and no image on the site is lazy-loaded.
This mounts
static/imagesasassets/imagesso templates can use Hugo's image processing without moving any files. A new partial,img-src.html, takes an image path and a maximum width and returns the URL of a WebP version scaled down to that width. It returns the original URL for anything it cannot improve: remote URLs, SVG, GIF, files under 20 KB, and cases where the WebP would be larger. The 60 template images whose source comes from front matter now use it with a width chosen for each slot, and a render hook applies it to Markdown images. All of them are lazy-loaded except the banner at the top of event and news pages. Source images are untouched, so adding an image works as before.The 186 images it converts go from 90 MB to 8 MB. Counting the images each page loads, the home page goes from 7.2 MB to 0.9 MB and the Team page from 20.7 MB to 3.4 MB.
To check that nothing moves, I rendered all 155 pages at 1280 px and 400 px wide before and after and compared the rendered size of every image, 2,750 in total. They match except for 1 px of rounding on four images. The site builds on Hugo 0.128.0 and 0.152.2, and the processing adds about 4 seconds to a build.
Two CSS selectors matched images by file name including
.png. They now match without the extension so they still apply to the converted files.This does not cover images written as raw
<img>HTML in Markdown (25 of them), CSS background images, or GIFs.🤖 Generated with Claude Code