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.

1.36x

Quality

93%

Does it follow best practices?

Impact

98%

1.36x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

30%

Product Catalog Image Processor

Sharp build pipeline

Criteria

Without context

With context

Uses Sharp

100%

WebP output

100%

Quality 70-85

100%

Resize max width 1200

100%

withoutEnlargement flag

100%

Async pipeline

100%

Sharp in package.json

100%

Run log produced

100%

20%

Article Hero Image Component

Responsive HTML image markup

Criteria

Without context

With context

picture element used

100%

AVIF source present

100%

WebP source present

100%

AVIF before WebP

100%

srcset with width descriptors

100%

sizes attribute

100%

lazy loading on below-fold

100%

decoding async

100%

alt attributes

100%

JPEG img fallback

100%

94%

28%

Image-Heavy Landing Page with Progressive Loading

Lazy loading with blur placeholder

Criteria

Without context

With context

src is placeholder

58%

50%

data-src attribute

100%

lazy CSS class

50%

100%

JS swaps src from data-src

100%

WebP for photos

100%

SVG for logos/icons

100%

PNG for transparency

100%

AVIF mentioned

100%

JPEG for photos fallback

100%

alt on all imgs

100%

No large files

100%

Repository: secondsky/claude-skills
Commit: 90d6bd7

Evaluated: 29 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Product Catalog Image Processor Article Hero Image Component Image-Heavy Landing Page with Progressive Loading

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.