How does this skill specifically improve Core Web Vitals like LCP and CLS?

This skill targets the two most common image-related performance issues: Large Contentful Paint (LCP) by optimizing delivery speed, and Cumulative Layout Shift (CLS) by automating aspect-ratio constraints and dimension attributes.

Can this skill handle both local image processing and external CDN configurations?

Yes, the skill is designed to update components in Next.js, Astro, Vite, and Eleventy, and it includes logic to configure external CDN pipelines like Cloudinary, Sirv, and imgix.

What is included in this skill?

The SKILL.md workflow, six reference guides (formats, optimization, performance, responsive images, tools, Sirv workflows), and the dependency-free audit script scripts/audit-images.mjs. It is free and MIT-licensed.

Are there any limitations when using this skill with Single Page Applications (SPAs)?

While it excels with server-rendered and static frameworks, images injected purely via client-side JavaScript in complex SPAs may require manual identification as the audit script primarily scans server-side HTML.

How does this skill differ from simply asking a standard LLM to compress my images?

It gives the agent a fixed method: inspect the real page, rank images by role (LCP hero, gallery, thumbnail), fix the highest-impact problem first, then re-run the audit script to verify. It covers browser hints such as fetchpriority and sizes that a generic prompt often gets wrong.

Image Optimization

Example session with this skill installed

Audit the images on our product landing page (landing.html) for Core Web Vitals and fix what you find. The hero shoe photo is the LCP element.

Read your context and instructions
Compiled the image optimization
Generated the image

Summary

I ran the bundled audit script on landing.html: 5 images,

1 error, 4 warnings, 4 info. The biggest problem is the hero: it is lazy-loaded and has no dimensions, so the LCP image starts late and the layout shifts when it arrives. I fixed all of the error and warning findings.

Audit output

- [error] img[1]: First image is lazy loaded; this is risky if it is the LCP image
- [warn]  img[1]: Image is missing width/height; verify CLS is reserved with CSS
- [warn]  img[3]: `srcset` uses width descriptors but image has no `sizes` attribute
- [warn]  img[4]: Image is missing `alt`
- [warn]  img[5]: Image URL requests 2400px for a 160px `width`
- [info]  css: CSS background image is not visible to the preload scanner

Fixes

Image	Problem	Fix
Hero (LCP)	`loading="lazy"`, no size, 3200px for every screen	Eager load, `fetchpriority="high"`, width/height, responsive `srcset`
Outsole (grid)	`srcset` without `sizes`, so the browser assumes 100vw	`sizes` that matches the 3-column grid
Lifestyle	No `alt`, local PNG with no resizing	Descriptive `alt`, moved to the CDN with `format=optimal`
Logo	2400px file shown at 160px	1x/2x density `srcset` (160 and 320)

<img class="hero"
  src="https://demo.sirv.com/products/trail-runner-x/hero.jpg?w=1200&format=optimal"
  srcset="https://demo.sirv.com/products/trail-runner-x/hero.jpg?w=640&format=optimal 640w,
          https://demo.sirv.com/products/trail-runner-x/hero.jpg?w=1200&format=optimal 1200w,
          https://demo.sirv.com/products/trail-runner-x/hero.jpg?w=2000&format=optimal 2000w"
  sizes="100vw" width="2000" height="1125"
  fetchpriority="high" decoding="async"
  alt="Trail Runner X on a rocky mountain path">

<img src="https://demo.sirv.com/products/trail-runner-x/sole.jpg?w=600"
  srcset="https://demo.sirv.com/products/trail-runner-x/sole.jpg?w=400 400w,
          https://demo.sirv.com/products/trail-runner-x/sole.jpg?w=800 800w"
  sizes="(min-width: 1200px) 390px, 33vw"
  width="800" height="800" loading="lazy" alt="Outsole tread pattern">

<img src="https://demo.sirv.com/brand/logo.png?w=160"
  srcset="https://demo.sirv.com/brand/logo.png?w=160 1x, https://demo.sirv.com/brand/logo.png?w=320 2x"
  width="160" height="40" alt="Trail Co.">

The promo banner is a CSS background below the hero, so it does not need a preload. I gave it an explicit ?w=1200&format=optimal so it is not served at full size.

Next steps

Re-run node scripts/audit-images.mjs landing.html to confirm 0 errors.
Check LCP in PageSpeed Insights or the Chrome DevTools Performance panel on a throttled mobile profile.
Remove the script that injects injected.jpg after the hero, or give that image dimensions, because it can still shift the layout.

landing.html

PNG · 1536×1024

Generated

Example file from a real run - the skill writes it into your workspace.

Connects securely to your tools. The creator never sees your data.

About this skill

What it does

Image Optimization gives your agent a working method for image delivery on the web. It inspects the real page first, finds the images that matter (LCP hero, product gallery, thumbnails, CSS backgrounds), and fixes the highest-impact problems before anything cosmetic.

What it covers

Core Web Vitals: LCP priority (fetchpriority, preload, no lazy-loading on the hero), CLS (width/height or aspect-ratio), INP-safe decoding
Responsive images: correct srcset + sizes, <picture> art direction, density vs width descriptors
Formats and quality: AVIF, WebP, JPEG XL, SVG, HDR; quality settings with SSIM/VMAF thresholds
Image CDNs: URL syntax for Sirv, Cloudinary, imgix, Vercel and Cloudflare, plus Next.js 16, Astro, Vite and Eleventy integrations
Placeholders and loading: LQIP, blur-up, BlurHash, lazy loading below the fold
Accessibility: alt text rules for content vs decorative images

Bundled audit script

scripts/audit-images.mjs is a dependency-free Node script. Point it at an HTML file or a URL and it reports lazy-loaded LCP images, missing dimensions, missing sizes, oversized CDN widths, CSS backgrounds hidden from the preload scanner, and missing alt text. The agent runs it, then fixes what it finds.

Requirements

Node.js 18+ for the audit script. No accounts or API keys. Sirv-specific parts are optional.

Source and the other 7 skills in this family (video optimization, Sirv dynamic imaging, Sirv Media Viewer, and more): https://github.com/IgorVaryvoda/image-optimization-skill

How to use

Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

Free forever

No account required to browse

Image Optimization