Skip to content

Add responsive image tooling for post banners - #592

Merged
mdo merged 3 commits into
mainfrom
mdo/optimize-alpha-banner-images
Oct 26, 2026
Merged

mdo merged 3 commits into
mainfrom
mdo/optimize-alpha-banner-images

Conversation

@mdo

@mdo mdo commented Oct 22, 2026

Copy link
Copy Markdown
Member

Summary

  • replace the compressed Bootstrap 6 Alpha banner with fresh 1x and 2x exports
  • add a reusable converter for AVIF images with near-lossless WebP fallbacks
  • serve density-aware post banners through picture and srcset
  • document the image export and conversion workflow

The preferred 2x AVIF is 138 KiB, down from the 1.31 MiB near-lossless
WebP fallback, while preserving the banner's fine mesh detail.

Builds on and supersedes #587.

Testing

  • npm test

julien-deramond and others added 3 commits October 21, 2026 19:49
Resize the banner to 1200px wide WebP (338 KB to 66 KB), give the eager
hero image width, height and fetchpriority=high, and remove the unused
2x PNG.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Post authors can now export matching 1x and 2x PNGs and convert them
into AVIF images with near-lossless WebP fallbacks. Post media selects
the right density and prefers the much smaller AVIF source.

Use the new pipeline for the Bootstrap 6 Alpha banner so its fine mesh
stays crisp without making retina visitors download the original PNG.
@github-actions

Copy link
Copy Markdown
Contributor

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 81%, saving 1.3 MB.

Filename Before After Improvement Visual comparison
public/assets/img/2026/09/bootstrap-v6-alpha1@2x.webp 1.3 MB 247.3 KB 81.1% View diff
public/assets/img/2026/09/bootstrap-v6-alpha1.webp 352.5 KB 67.9 KB 80.7% View diff

2 images did not require optimisation.

@mdo
mdo merged commit 1688893 into main Oct 26, 2026
10 checks passed
@mdo
mdo deleted the mdo/optimize-alpha-banner-images branch October 26, 2026 16:02
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.

2 participants