Image Prep for Web

Prepare images for fast, correct web delivery. Oversized images remain the single heaviest thing on most pages, and the fix is mechanical once the decisions are made in the right order: choose the format from the content, resize to the sizes actually displayed, compress to the artifact threshold, then ship markup that reserves space and loads lazily. This skill walks that order and refuses to skip steps.

When to use this skill

The user has images to add to a site and wants them "optimized" or "web-ready"
A page audit shows multi-megabyte images or layout shift caused by images
Someone asks which format to use for photos, screenshots, logos, or animation
A batch of images needs consistent resizing, compression, and naming
Responsive image markup with srcset and sizes needs to be generated correctly

Format decision guide

Decide by content type, not by habit:

Photographs and complex imagery: a modern lossy format (AVIF or WebP), with JPEG fallback only if legacy support is genuinely required
Screenshots and UI captures with text: lossless or high-quality lossy at 2x resolution — text smear is the first artifact users notice
Logos, icons, diagrams, charts: SVG, full stop; rasterizing vector art throws away sharpness and scalability
Animation: a muted looping video file, never an animated GIF — the size difference is routinely tenfold
Transparency needs: PNG only when lossless transparency is required and WebP/AVIF are unavailable

Workflow

Inventory the images: natural dimensions, file size, where each is displayed, and whether it is content or decoration. Decoration that can be CSS (gradients, simple shapes) should become CSS and leave the list.
Establish the largest real display size for each image across breakpoints, multiply by the highest device pixel ratio you serve (usually 2x), and cap there. Shipping a 4000px original into a 400px slot is the classic failure this step exists to stop.
Generate a small set of widths per image — typically three, such as 480, 960, and 1920 — rather than a width per breakpoint. More variants add build complexity faster than they add savings.
Compress to the artifact threshold: lower quality until artifacts appear at 100% zoom, then step one notch back. Judge photographs at the display size, not zoomed to 400%.
Strip metadata on export. EXIF blocks can carry camera serials and GPS coordinates — removing them is a privacy obligation, not just a byte saving.
Write the markup: srcset with the generated widths, an honest sizes attribute, explicit width and height attributes so the browser reserves space, lazy loading for below-the-fold images, and eager loading for the one hero image that paints first.
Write alt text from purpose, not appearance: what the image is doing in the page. Decorative images get an explicitly empty alt so screen readers skip them.
Verify against a budget: as a default, keep above-the-fold image weight under 300 KB and any single image under 200 KB, and justify exceptions in writing.

Output format

Produce a manifest table (original, format chosen, output widths, final sizes, savings) followed by ready-to-paste markup for each image. Example manifest row and markup:

hero.jpg  4200x2800, 3.8 MB  ->  AVIF 480/960/1920w  =  38/95/210 KB  (94% saved)

<img
  src="hero-960.avif"
  srcset="hero-480.avif 480w, hero-960.avif 960w, hero-1920.avif 1920w"
  sizes="(min-width: 900px) 60vw, 100vw"
  width="1920" height="1280"
  alt="Cyclists crossing the finish line at the community race"
  loading="eager" fetchpriority="high">

Common failure modes

Serving the original camera file because it looked fine on fast office wifi
One giant image for all breakpoints, resized only by CSS
Compressing screenshots until UI text smears, then blaming the format
Omitting width and height attributes and shipping layout shift with every image
An animated GIF doing a job a ten-times-smaller looping video would do better

Quality bar

No image ships larger than its largest display size times device pixel ratio
Every img element carries width, height, and a deliberate alt value
Metadata is stripped from every exported file
Text in screenshots is legible at display size with no compression smear
The page passes a scroll test with no image-caused layout shift
Total image weight is reported against the stated budget, with exceptions justified