images

Generate WebP and AVIF variants, srcset, and validate HTML image markup.

4|Updated Jan 13, 2026

Search Tags:#optimization #images #web performance #asset management #responsive images #image formats

Ready to run

npx skills add https://github.com/ProfPowell/vanilla-breeze --skill images-profpowell

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: images
Source: https://github.com/ProfPowell/vanilla-breeze/tree/main/.claude/skills/images
Command: npx skills add https://github.com/ProfPowell/vanilla-breeze --skill images-profpowell

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of adding, optimizing, and validating images for web use, ensuring performance and accessibility.

Core Features & Use Cases

Automated Format Conversion: Generates modern formats (WebP, AVIF) from source images.
Responsive Image Generation: Creates srcset variants for different screen sizes.
HTML Markup Validation: Checks for missing attributes like loading, decoding, alt, width, and height.
Use Case: When you add a new hero image to your website, this skill automatically creates optimized versions and helps you generate the correct <picture> element for efficient loading.

Quick Start

Optimize all images in the 'src/images' directory and generate responsive variants.

Frequently Asked Questions about images

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize images and generate responsive srcset variants for different screen sizes?▼

To optimize images and generate responsive variants, this Skill processes source files to automatically create srcset variants for different screen sizes and converts them into modern web formats for efficient loading.

What is the best way to automate WebP and AVIF format conversion for web performance?▼

Automated WebP and AVIF format conversion is handled directly by this Skill, which processes your source images to generate modern format variants, ensuring optimal web performance without manual intervention.

How do I prevent layout shift and validate HTML image markup for missing attributes?▼

To prevent layout shift, this Skill validates HTML image markup by checking for missing attributes like loading, decoding, alt, width, and height, ensuring images render correctly without disrupting page layout.

Does this image management workflow require sharp to process assets?▼

Yes, this image management workflow requires the sharp dependency to process assets, utilizing it as the underlying engine for automated image optimization, format conversion, and responsive variant generation.

Can I generate placeholders and picture elements when adding a new hero image?▼

Yes, you can generate placeholders and correct picture elements when adding a new hero image, as this Skill coordinates placeholder generation and helps construct proper markup for efficient loading.