Image Optimization

by secondsky88378361314fMIT227 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago

Optimizes images for web performance using modern formats, responsive techniques, and lazy loading strategies. Use when improving page load times, implementing responsive images, or preparing assets for production deployment.

Instructions onlyDesign & Creative

AI-generated overview

Guides web image optimization with modern formats, responsive markup, lazy loading, and build-pipeline settings.

What it does: This skill provides reference guidance for optimizing images for web performance. It covers format selection (JPEG, PNG, WebP, AVIF, SVG), responsive image markup with srcset and picture elements, lazy loading patterns, a Sharp-based build pipeline example, performance size targets, and an optimization checklist. It produces recommendations and code snippets rather than running any tooling itself.
When to use it: Use it when improving page load times, implementing responsive images, or preparing image assets for production deployment. It suits front-end and performance work where format, sizing, and loading strategy decisions are needed.
Requirements: No scripts or packages are required to use the guidance; the Sharp example assumes Node.js with the sharp package if the reader chooses to implement it.

Image Optimization

Optimize images for web performance with modern formats and responsive techniques.

Format Selection

Format	Best For	Compression
JPEG	Photos	Lossy, 50-70% reduction
PNG	Icons, transparency	Lossless, 10-30%
WebP	Modern browsers	25-35% better than JPEG
AVIF	Next-gen	50% better than JPEG
SVG	Logos, icons	Vector, scalable

Responsive Images

html

<picture>  <source srcset="image.avif" type="image/avif">  <source srcset="image.webp" type="image/webp">  <img    src="image.jpg"    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"    sizes="(max-width: 600px) 100vw, 50vw"    alt="Description"    loading="lazy"    decoding="async"  ></picture>

<picture>  <source srcset="image.avif" type="image/avif">  <source srcset="image.webp" type="image/webp">  <img    src="image.jpg"    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"    sizes="(max-width: 600px) 100vw, 50vw"    alt="Description"    loading="lazy"    decoding="async"  ></picture>

Lazy Loading

html

<!-- Native lazy loading --><img src="image.jpg" loading="lazy" alt="Description">
<!-- With blur placeholder --><img  src="placeholder-blur.jpg"  data-src="image.jpg"  class="lazy"  alt="Description">

<!-- Native lazy loading --><img src="image.jpg" loading="lazy" alt="Description">
<!-- With blur placeholder --><img  src="placeholder-blur.jpg"  data-src="image.jpg"  class="lazy"  alt="Description">

Build Pipeline (Sharp)

javascript

const sharp = require('sharp');
async function optimizeImage(input, output) {  await sharp(input)    .resize(1200, null, { withoutEnlargement: true })    .webp({ quality: 80 })    .toFile(output);}

const sharp = require('sharp');
async function optimizeImage(input, output) {  await sharp(input)    .resize(1200, null, { withoutEnlargement: true })    .webp({ quality: 80 })    .toFile(output);}

Performance Targets

Optimization Checklist

Source and attribution

Source:secondsky/claude-skillsinplugins/image-optimization/skills/image-optimizationat commit8837836

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Asset Type	Target Size
Hero image	<200KB
Thumbnail	<30KB
Total images	<500KB

Image Optimization

Image Optimization

Format Selection

Responsive Images

Lazy Loading

Build Pipeline (Sharp)

Performance Targets

Optimization Checklist

Source and attribution

More from secondsky/claude-skills

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design