webp-images

Convert page images to WebP with responsive variants for Next.js Image components.

Updated Nov 18, 2025

Search Tags:#a11y #next.js #webp #image-optimization #responsive-images #srcset

Ready to run

npx skills add https://github.com/deomiarn/website-template --skill webp-images

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: webp-images
Source: https://github.com/deomiarn/website-template/tree/main/.claude/skills/webp-images
Command: npx skills add https://github.com/deomiarn/website-template --skill webp-images

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Large image assets slow down pages and consume bandwidth. This Skill converts images to WebP, creates responsive variants, and replaces CDN references with Next.js Image components for better performance.

Core Features & Use Cases

WebP Conversion: Convert PNG/JPG/JPEG to WebP at multiple widths.
Responsive Variants: Generate 640w, 1024w, 1920w variants for srcset.
CDN Replacement: Replace CDN URLs with local Next.js Image components.
i18n Alt Text: Add alt text keys in de.json and en.json for accessibility.

Quick Start

Run the conversion script to produce WebP images under /public/images/[page]/ and replace CDN references with <Image> components in your pages.

Frequently Asked Questions about webp-images

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

FAQPage Schema

How do I convert images to WebP format for better page performance?▼

WebP conversion reduces file size while maintaining quality, speeding up page load times. This Skill automates converting PNG/JPG/JPEG images to WebP and generates responsive variants at 640w, 1024w, and 1920w widths for optimal delivery across devices.

Can I use WebP images with Next.js Image components for SEO?▼

Yes. This Skill replaces CDN URLs with Next.js Image components, which handle WebP delivery, lazy loading, and srcset generation automatically. This ensures SEO-friendly, performant image delivery while maintaining responsive behavior.

How do I add accessible alt text to images across multiple languages?▼

This Skill generates i18n alt text keys in de.json and en.json files, allowing you to maintain accessible alt text for each language. The Image components then reference these keys to serve localized, screen-reader-friendly descriptions.

What's the best way to handle image priority for above-the-fold content in Next.js?▼

This Skill supports image priority handling through Next.js Image component integration, marking critical above-the-fold images for eager loading while deferring off-screen images. This improves Core Web Vitals and perceived performance.

Do I need to manually create responsive image variants, or is it automated?▼

It's fully automated. This Skill generates responsive variants at standard widths and updates srcset attributes in your page markup, eliminating manual variant creation and CDN URL management.