agentsclimarketplace

Image optimization

Skill Amey-Thakur/AI-SKILLS/skills/performance/image-optimization

Plug-and-play skills and prompts for every AI coding agent

Install
npx -y skills add Amey-Thakur/AI-SKILLS --skill image-optimization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 19 days oldThe repository was created 19 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Serve right-sized images by encoding modern formats, generating responsive srcset widths, and deferring offscreen decode while prioritizing the hero. Use when images are the heaviest bytes on a page or the LCP element loads slowly.

SKILL.md

2.5 KB, as published. Nobody here has run it

Image optimization

Images are usually the heaviest bytes on a page and the most common Largest Contentful Paint element. Shipping one oversized original to every device wastes bandwidth on phones and delays the first meaningful paint. Serve the right format, the right dimensions for the viewport, and decode off the critical path.

Method

  1. Encode to a modern format. Serve AVIF or WebP with a JPEG fallback through <picture>. AVIF is often 30 to 50 percent smaller than JPEG at equal quality. Produce it with sharp, Squoosh, or a build step; never ship the camera's original file.
  2. Generate responsive widths with srcset. Produce several sizes and let the browser choose: srcset plus sizes so a phone downloads a 400px image and not the 2000px desktop one. On mobile this is the single biggest byte win.
  3. Declare width and height, or an aspect ratio. Missing dimensions let the image shift the layout as it loads. Setting them, or aspect-ratio, lets the browser reserve the box and keeps CLS near zero.
  4. Lazy-load below the fold, prioritize above it. Add loading="lazy" to offscreen images to defer their fetch, and fetchpriority="high" with a preload on the LCP image to pull it forward. Never lazy-load the hero: it delays LCP.
  5. Decode asynchronously and cover the gap. Set decoding="async" so the browser decodes off the main thread. For large images, show a low-quality placeholder or a solid color so the space is not a blank box during load.
  6. Compress to a target, not to lossless. Tune quality to roughly 75 to 85 for photographs and strip metadata. Confirm in the network panel that the delivered bytes match the displayed size, not the source resolution.

Checks

  • Does each image ship as AVIF or WebP with a fallback, not a raw JPEG or PNG?
  • Does a phone download a phone-sized file through srcset?
  • Do images carry dimensions so they never shift the layout?
  • Is the LCP image prioritized while everything below the fold is lazy?

Boundaries

Tying these fixes to the LCP and CLS numbers is web-vitals; delivering the bytes from an edge cache is cdn-strategy. Vector graphics and icon fonts follow different rules. This skill covers raster images on the web.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.