Serve resized featured images through srcset - #130
Merged
Merged
Conversation
Every homepage and section card loaded the full-size original as its image: camera JPEGs up to 6000px and 5MB, drawn about 400px wide. The homepage alone downloaded ~32MB of images. triangle-cms now renders 480/960/1600/2400px WebP copies of library images and lists them as `featured_image_variants`. The cards, the long list cards, the infinite-scroll cards, the related-article row and the article lead figure now pass these as a srcset, with `sizes` worked out from the grid they sit in. The original stays as `src`, so an image the CMS hasn't rendered yet, or a CMS without the sidecar, behaves exactly as before. Measured on the live homepage, total image bytes go from 32.2MB to 1.4MB on a 1440px desktop, 3.5MB on a 2x laptop and 4.5MB on a 3x phone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019EcFyy8aqNnUd75CDPY6Bx
This was referenced Oct 1, 2026
This was referenced Oct 1, 2026
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
1 participant
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.
Why
Every card on the homepage and the section pages loads the full-size original as its image. Those are often camera JPEGs (6000×4000, 4–5 MB) drawn at about 400px. The live homepage downloads 32.2 MB of images.
triangle-cms now makes resized WebP copies and returns them as
featured_image_variants(DrexelTriangle/triangle-cms#239, deployed 2026-10-01).Change
ImageVarianttype, and an optionalfeatured_image_variantsonArticleSummary,RelatedArticle,ArticleandSectionCardArticle.imageSrcset()inutils/data.jsturns variants into asrcsetstring, orundefinedwhen there are none, so Astro drops the attribute.srcset+sizeson:PhotoArticle: grid cards and the related-article rowPhotoArticleLong: list cardsScroll.astro, using an inline copy of the helper because that script isis:inline<figure>Section-*component passesvariants={article.featured_image_variants}.sizesvalues come from the grid each image sits in: a 1200px container (900px at lg, 90vw below), the 8fr main column, and the section splits inside it. They lean slightly large, because guessing too small makes images blurry.srcis still the original. A not-yet-rendered image, a placeholder, or a CMS without the sidecar renders exactly as before.Verified
Ran
astro devlocally against the public CMS API:srcset./news: 15srcsets./api/sections/news?page=2: passesfeatured_image_variantsthrough to the scroll script.Homepage image bytes, picking the way browsers do (the smallest candidate ≥ slot width × DPR):
eslintis clean.astro checkshows 0 errors, 0 warnings, and the same 8 hints asmain.Not covered: article bodies
Article pages still load originals. CMS-authored articles put the lead photo inline in the body, not in
featured_image; that holds for all 30 of the latest.stripDimensionsdeliberately removes every bodysrcset, because the WordPress ones point at legacy derivatives. Fixing this needs the CMS to return the variants for each inline image, and this page to add them back after stripping. That's a follow-up across both repos.🤖 Generated with Claude Code
https://claude.ai/code/session_019EcFyy8aqNnUd75CDPY6Bx