CtrlK
BlogDocsLog inGet started
Tessl Logo

image-optimization

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.

Install with Tessl CLI

npx tessl i github:secondsky/claude-skills --skill image-optimization
What are skills?

Overall
score

93%

Review — 93%

Does it follow best practices?

Validation — 14 / 16 Passed

Validation for skill structure

SKILL.md
Review
Evals

Image Optimization

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

Format Selection

FormatBest ForCompression
JPEGPhotosLossy, 50-70% reduction
PNGIcons, transparencyLossless, 10-30%
WebPModern browsers25-35% better than JPEG
AVIFNext-gen50% better than JPEG
SVGLogos, iconsVector, scalable

Responsive Images

<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

<!-- 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)

const sharp = require('sharp');

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

Performance Targets

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

Optimization Checklist

  • Use WebP with JPEG fallback
  • Implement responsive srcset
  • Enable lazy loading for below-fold
  • Compress at quality 70-85
  • Serve from CDN
  • Set proper cache headers
Repository
github.com/secondsky/claude-skills
Last updated
Created

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill