Skip to content

feat(images): add AVIF output to optimize script and OptimizedImage#306

Draft
JonathanMatthey wants to merge 3 commits into
stagingfrom
jm/web-161-optimized-image-to-support-avif
Draft

feat(images): add AVIF output to optimize script and OptimizedImage#306
JonathanMatthey wants to merge 3 commits into
stagingfrom
jm/web-161-optimized-image-to-support-avif

Conversation

@JonathanMatthey
Copy link
Copy Markdown
Collaborator

Summary

  • optimize-images.ts now generates .avif variants (q75, 4:4:4) alongside .webp for every width and full-size output
  • getOptimizedImage returns avifVariants + avifFullSrc
  • OptimizedImage renders <source type="image/avif"> before the WebP source — browsers that support AVIF pick it automatically

Related Issue

Fixes WEB-161

Manual Test

Run pnpm optimize-images and confirm .avif files appear in public/img/optimized/. Check DevTools network tab — AVIF should be served to Chrome/Firefox, WebP to Safari < 16.

Checks

  • pnpm run format
  • pnpm run lint

PR Checklist

  • PR title follows Conventional Commits (e.g. feat: ..., fix: ...)
  • Linked issue included
  • Scope is focused (target ~10-20 files when possible)
  • Screenshots for UI changes (if applicable)

@JonathanMatthey JonathanMatthey self-assigned this May 21, 2026
@netlify
Copy link
Copy Markdown

netlify Bot commented May 21, 2026

Deploy Preview for interledger-org-v5 ready!

Name Link
🔨 Latest commit 2297015
🔍 Latest deploy log https://app.netlify.com/projects/interledger-org-v5/deploys/6a0ee1bf57f31500080a46b6
😎 Deploy Preview https://deploy-preview-306--interledger-org-v5.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.

hasResponsive ? (
<picture class={pictureClassName}>
<source type="image/webp" srcset={srcset} sizes={sizes} media={media} />
{avifSrcset && (
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{avifVariants.length > 0 && (...)} is more explicit and consistent with how hasResponsive is computed two lines above.

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