Serve images from a CDN

SkillMedia

image-cdn is a skill for reviewing image assets, markup, and CDN or build transforms related to Serve images from a CDN. It checks encoded size, rendered size, loading strategy, and above-the-fold impact together, so image delivery decisions are made with the full picture in view.

Available today. Use it from your connected AI after setup.

Have the image assets, markup, or CDN and build transforms you want reviewed available.

Then ask your AI: use the Serve images from a CDN skill

What your AI can do with it

  • Review image assets, markup, and CDN or build transforms
  • Check encoded size of images
  • Check rendered size of images
  • Evaluate loading strategy for images
  • Assess above-the-fold impact of image delivery

Getting started

  1. Have the image assets, markup, or CDN and build transforms you want reviewed available.
  2. Add the image-cdn skill to the agent's available skills.
  3. Ask the agent to review the image delivery setup, and it will check sizes, loading strategy, and above-the-fold impact together.

What this skill tells your AI

The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/image-cdn/SKILL.md and read by ahel’s review.

Image CDNs automatically optimize, resize, and convert images on-the-fly—delivering the smallest file in the best format without manual processing.

Quick Reference

  • Use image CDN for automatic format conversion (WebP, AVIF)
  • Generate responsive sizes on-the-fly via URL parameters
  • CDN edge caching delivers images from nearest location
  • Popular options: Cloudinary, Imgix, Cloudflare Images, Vercel

Check

Verify if images are served from a CDN or image optimization service.

Fix

Configure an image CDN like Cloudinary, Imgix, or Cloudflare Images for automatic optimization.

Explain

Explain how image CDNs provide on-the-fly optimization, resizing, and format conversion.

Code Review

Review image assets, markup, and delivery configuration related to Serve images from a CDN. 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/image-cdn

Signals

GitHub stars
74k
Forks
7k
Last commit
Aug 2026

Questions

When should this skill be used?
Use it when reviewing image assets, markup, and CDN or build transforms related to serving images from a CDN.
What does it check?
It checks encoded size, rendered size, loading strategy, and above-the-fold impact together rather than looking at each in isolation.
Advanced
Item type
skill
Key
image-cdn
Source
github.com/thedaviddias/front-end-checklist