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 Use modern image formats (WebP, AVIF). It checks encoded size, rendered size, loading strategy, and above-the-fold impact together, so image format decisions are judged in context.
Use Use modern image formats (WebP, AVIF) in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Use modern image formats (WebP, AVIF) and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Use modern image formats (WebP, AVIF) skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
No other account needed.
Have an AI agent that can load skills.
What your AI can do with it
- Review image assets for modern formats like WebP and AVIF
- Check markup related to image format usage
- Inspect CDN or build transforms applied to images
- Measure encoded size and rendered size of images
- Evaluate loading strategy for images
- Assess above-the-fold impact of image choices
Getting started
- Have an AI agent that can load skills.
- Add the modern-format skill to the agent's available skills.
- Ask the agent to review image assets, markup, or CDN or build transforms when format choices are in question.
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
- Oct 2026
Questions
- When should this skill be used?
- Use it when reviewing image assets, markup, and CDN or build transforms related to using modern image formats like WebP or AVIF.
- What does it check?
- It checks encoded size, rendered size, loading strategy, and above-the-fold impact together rather than in isolation.
- Which image formats does it cover?
- It focuses on modern image formats such as WebP and AVIF.
Advanced
- Item type
- skill
- Key
modern-format- Source
- github.com/thedaviddias/front-end-checklist
github.com/thedaviddias/front-end-checklist