skills.rest
deomiarn
deomiarnCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/deomiarn/website-template --skill webp-images
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ByeongminLeeByeongminLee
2

image-optimizer

Convert jpg, jpeg, png, gif, bmp, and tiff images to WebP using sharp.

Community
Intermediate
nangyak4415-sudonangyak4415-sudo

optimize

Identify and fix web performance issues in frontend applications.

Community
Intermediate
guichefferguicheffer
3

images

Optimize and serve images via Cloudinary CDN with responsive sizing.

Community
Intermediate
dennislee928dennislee928
54

responsive-images

Implement responsive images with srcset, sizes, AVIF, WebP, and lazy loading.

Community
Advanced