Use modern image formats (WebP, AVIF)
SkillMediamodern-format is a skill for AI agents that reviews image assets, markup, and CDN or build transforms related to using modern image formats (WebP, AVIF). It checks encoded size, rendered size, loading strategy, and above-the-fold impact together, then reports findings with file paths and line numbers and describes fixes.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that can load skills, and a codebase containing image assets or markup to review.
Then ask your AI: use the Use modern image formats (WebP, AVIF) skill
What your AI can do with it
- Scan all <img> elements and CSS background-image declarations for JPEG or PNG usage
- Identify <picture> elements missing <source type="image/webp"> or <source type="image/avif
- Report each finding with file path and line number
- Convert images to WebP at 80% quality and optionally AVIF at 60% quality using Squoosh or
- Wrap <img> elements in <picture> with AVIF and WebP sources, keeping the original as fallb
- Flag files where format choice, sizing, or loading violates the rule and explain how to co
Getting started
- Have an agent that can load skills, and a codebase containing image assets or markup to review.
- Add the modern-format skill to the agent's available skills.
- Ask the agent to review image assets, markup, and CDN or build transforms for modern image format usage.
- Review the reported findings with file paths and line numbers, then apply the suggested fixes.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/modern-format/SKILL.md and read by ahel’s review.
Images are typically 50%+ of page weight. Switching from JPEG to WebP alone reduces transfer sizes by 25-35% with no visible quality change, directly improving Largest Contentful Paint (LCP) and saving bandwidth for users on mobile data plans. These savings compound across every visitor and every image on the site.
Quick Reference
- WebP is ~25-35% smaller than JPEG at equivalent quality (per web.dev)
- AVIF is ~40-50% smaller than JPEG at equivalent quality (per web.dev)
- Use
<picture>with<source type="image/avif">and<source type="image/webp">plus an<img>fallback - WebP has 97%+ global browser support; AVIF is supported in all modern browsers as of 2023
Check
Scan all elements and CSS background-image declarations in this codebase. Identify: 1) Any pointing to .jpg, .jpeg, or .png files (not served via a CDN that auto-negotiates format). 2) Any elements that lack or entries. 3) Any CSS background images using JPEG or PNG when a WebP equivalent could be used. Report each finding with file path and line number.
Fix
For each image not using modern formats: 1) Convert to WebP at 80% quality using Squoosh or Sharp. 2) Optionally also generate AVIF at 60% quality for browsers that support it. 3) Wrap the original in a element and add and entries with the new files. 4) Keep the original JPEG/PNG as the fallback. For CSS background images, use a @supports (background-image: url('.webp')) { } query to serve WebP to supporting browsers.
Explain
Explain the compression advantages of WebP and AVIF over JPEG and PNG. According to web.dev, WebP lossless images are 26% smaller than PNG and WebP lossy images are 25-35% smaller than JPEG at equivalent visual quality. AVIF offers further improvements: roughly 40-50% smaller than equivalent JPEG. Explain browser support: WebP has 97%+ global browser support as of 2024. AVIF is supported in Chrome 85+, Firefox 93+, and Safari 16.4+. The element with fallbacks means there is no risk in adopting these formats today.
Code Review
Review image assets, markup, and delivery configuration related to Use modern image formats (WebP, AVIF). Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/images/modern-format
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What does the skill check?
- It scans <img> elements and CSS background-image declarations for JPEG or PNG files, checks <picture> elements for missing WebP or AVIF sources, and reports each finding with file path and line number.
- How much smaller are WebP and AVIF than JPEG?
- Per web.dev, WebP is about 25-35% smaller than JPEG at equivalent quality, and AVIF is about 40-50% smaller. WebP lossless images are 26% smaller than PNG.
Advanced
- Item type
- skill
- Key
modern-format- Source
- github.com/thedaviddias/front-end-checklist