How do I install the Canon Images skill?

Run npx skillmds@latest add dragoon0x/canon-images in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Canon Images safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Canon Images?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Canon Images free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Canon Images?

dragoon0x (@dragoon0x) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Canon Images by dragoon0x — Agent Skill

Name: Canon Images
Author: dragoon0x

Canon Images

Use when optimizing images for the web — format selection (AVIF, WebP, PNG, SVG), responsive images with srcset, lazy loading, aspect ratio preservation, LCP image optimization, and image CDN usage. Trigger when the user mentions image optimization, srcset, lazy loading images, AVIF, WebP, image format, or responsive images.

dragoon0x Updated Sep 17, 2026

File contents

CANON · Images

Images are the largest payload on most pages. Format, size, and loading strategy make or break performance.

Format decision tree

Is it a photo or complex gradient?
  ├─ Yes → AVIF (best compression), WebP fallback, JPEG last resort
  └─ No →
     Is it an icon, logo, or simple shape?
       ├─ Yes → SVG (infinitely scalable, tiny file)
       └─ No →
          Does it need transparency?
            ├─ Yes → WebP or PNG (WebP preferred, smaller)
            └─ No → AVIF/WebP/JPEG

Responsive images — srcset

Serve the right size for the viewport. Don't send a 2400px image to a 375px phone.

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Product showcase"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

LCP image — the critical one

The Largest Contentful Paint image needs special treatment:

No loading="lazy" — it must load eagerly.
fetchpriority="high" — tells the browser to prioritize.
Preload — <link rel="preload" as="image" href="hero.webp">.
Serve at rendered size — don't serve 3000px for a 600px container.

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" alt="..." width="1200" height="800" fetchpriority="high">

Always declare width and height

<img src="photo.webp" alt="..." width="800" height="600">

This reserves layout space before the image loads, preventing Cumulative Layout Shift (CLS). The browser calculates aspect ratio from these attributes. CSS can still make the image responsive:

img { max-width: 100%; height: auto; }

Lazy loading

All images below the fold should use loading="lazy". Native browser lazy loading works without JavaScript.

Exception: the LCP image (above the fold) must NOT be lazy loaded.

Image CDNs

Services like Cloudinary, imgix, Cloudflare Images serve optimized formats and sizes automatically:

https://cdn.example.com/photo.jpg?w=800&format=auto&quality=75

Quality 70–80 is visually lossless for photos. Below 60, artifacts appear.

Anti-patterns

Anti-pattern	Why it fails
Serving PNG for photos	5–10× larger than WebP/AVIF
No srcset (one giant image for all screens)	Wasted bandwidth on mobile
Lazy loading the LCP image	Delays the most important metric
No width/height attributes	Layout shift (CLS)
Using JPEG 2000 or JPEG XR	Poor browser support
Base64-inlining large images	Inflates HTML, blocks parser
Screenshots as PNG when WebP would work	Unnecessary size

Audit checklist

Photos use AVIF/WebP, not PNG/JPEG
Icons and logos use SVG
LCP image has fetchpriority="high", no lazy, preloaded
All images have width and height attributes
Below-fold images use loading="lazy"
srcset + sizes on responsive images
Image quality 70–80 for photos
No base64-inlined images > 2KB

Sources

web.dev · "Serve images in modern formats", "Optimize LCP"
canon-performance for Core Web Vitals targets
Cloudinary · image optimization best practices

---name: canon-imagesdescription: Use when optimizing images for the web — format selection (AVIF, WebP, PNG, SVG), responsive images with srcset, lazy loading, aspect ratio preservation, LCP image optimization, and image CDN usage. Trigger when the user mentions image optimization, srcset, lazy loading images, AVIF, WebP, image format, or responsive images.---# CANON · ImagesImages are the largest payload on most pages. Format, size, and loading strategy make or break performance.## Format decision tree```Is it a photo or complex gradient? ├─ Yes → AVIF (best compression), WebP fallback, JPEG last resort └─ No → Is it an icon, logo, or simple shape? ├─ Yes → SVG (infinitely scalable, tiny file) └─ No → Does it need transparency? ├─ Yes → WebP or PNG (WebP preferred, smaller) └─ No → AVIF/WebP/JPEG```## Responsive images — srcsetServe the right size for the viewport. Don't send a 2400px image to a 375px phone.```html<img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w" sizes="(max-width: 768px) 100vw, 50vw" alt="Product showcase" width="1200" height="800" loading="lazy" decoding="async">```## LCP image — the critical oneThe Largest Contentful Paint image needs special treatment:- **No `loading="lazy"`** — it must load eagerly.- **`fetchpriority="high"`** — tells the browser to prioritize.- **Preload** — `<link rel="preload" as="image" href="hero.webp">`.- **Serve at rendered size** — don't serve 3000px for a 600px container.```html<link rel="preload" as="image" href="hero.webp" fetchpriority="high"><img src="hero.webp" alt="..." width="1200" height="800" fetchpriority="high">```## Always declare width and height```html<img src="photo.webp" alt="..." width="800" height="600">```This reserves layout space before the image loads, preventing Cumulative Layout Shift (CLS). The browser calculates aspect ratio from these attributes. CSS can still make the image responsive:```cssimg { max-width: 100%; height: auto; }```## Lazy loadingAll images below the fold should use `loading="lazy"`. Native browser lazy loading works without JavaScript.Exception: the LCP image (above the fold) must NOT be lazy loaded.## Image CDNsServices like Cloudinary, imgix, Cloudflare Images serve optimized formats and sizes automatically:```https://cdn.example.com/photo.jpg?w=800&format=auto&quality=75```Quality 70–80 is visually lossless for photos. Below 60, artifacts appear.## Anti-patterns| Anti-pattern | Why it fails ||---|---|| Serving PNG for photos | 5–10× larger than WebP/AVIF || No srcset (one giant image for all screens) | Wasted bandwidth on mobile || Lazy loading the LCP image | Delays the most important metric || No width/height attributes | Layout shift (CLS) || Using JPEG 2000 or JPEG XR | Poor browser support || Base64-inlining large images | Inflates HTML, blocks parser || Screenshots as PNG when WebP would work | Unnecessary size |## Audit checklist- [ ] Photos use AVIF/WebP, not PNG/JPEG- [ ] Icons and logos use SVG- [ ] LCP image has `fetchpriority="high"`, no lazy, preloaded- [ ] All images have `width` and `height` attributes- [ ] Below-fold images use `loading="lazy"`- [ ] `srcset` + `sizes` on responsive images- [ ] Image quality 70–80 for photos- [ ] No base64-inlined images > 2KB## Sources- web.dev · "Serve images in modern formats", "Optimize LCP"- `canon-performance` for Core Web Vitals targets- Cloudinary · image optimization best practices

Frequently asked questions