Skills
.Work. You
Rest

webp-images

Community

WebP-ready images with responsive variants.

Software Engineering#a11y#next.js#webp#image-optimization#responsive-images#srcset
Authordeomiarn
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: webp-images
Download link: https://github.com/deomiarn/website-template/archive/main.zip#webp-images

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.