skills.rest
Dexploarer
DexploarerCOMMUNITY
Explore all skills by this author →
Website𝕏@dEXploarerGitHub

image-optimizer

Convert web images to WebP/AVIF formats and generate responsive sizes with picture markup.

6|2|Updated Oct 31, 2025
Search Tags:#performance#web development#compression#webp#lazy loading#responsive images#image optimization#avif
One-click install
npx skills add https://github.com/Dexploarer/claudius-skills --skill image-optimizer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-optimizer
Source: https://github.com/Dexploarer/claudius-skills/tree/main/examples/intermediate/performance-skills/image-optimizer
Command: npx skills add https://github.com/Dexploarer/claudius-skills --skill image-optimizer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires imagemagick, webp, sharp-cli.

What problem does it solve?

Large, unoptimized images are a primary cause of slow website loading, impacting user experience, SEO, and Core Web Vitals. This Skill automates the complex process of image optimization, reducing file sizes without compromising quality.

Core Features & Use Cases

  • Modern Format Conversion: Converts images to highly efficient formats like WebP and AVIF, with JPEG/PNG fallbacks for broader compatibility.
  • Responsive Image Generation: Creates multiple image sizes and generates <picture> elements for optimal delivery across various devices and screen resolutions.
  • Use Case: "Optimize all JPEG and PNG images in my public/images folder, converting them to WebP, generating responsive sizes (320w, 768w, 1920w), and providing the HTML <picture> tags."

Quick Start

Optimize all images in the 'assets/images' directory, converting them to WebP and generating responsive sizes for mobile and desktop.

Frequently Asked Questions about image-optimizer

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

FAQPage Schema
How do I optimize images for web performance and Core Web Vitals?▼

Image optimization reduces file sizes by converting to efficient formats like WebP and AVIF, compressing aggressively, and generating responsive sizes. This directly improves page load time and Core Web Vitals scores, which impact SEO and user experience.

Can I convert JPEG and PNG images to WebP and AVIF automatically?▼

Yes. The Skill converts JPEG and PNG images to WebP and AVIF formats while maintaining JPEG/PNG fallbacks for broader browser compatibility, automating the format conversion process in your build pipeline.

How do I generate responsive images with multiple sizes for different devices?▼

The Skill creates multiple image sizes (e.g., 320w, 768w, 1920w) and generates `<picture>` markup automatically, enabling optimal image delivery across mobile, tablet, and desktop screens without manual HTML editing.

Does this work with my existing build process and CMS?▼

Yes. The Skill integrates into build pipelines and CMS-driven sites, automating image optimization as part of your deployment workflow while preserving original files as backups.

What's the best way to handle image compression without losing quality?▼

The Skill applies aggressive compression tuning to balance file size reduction and visual quality. Modern formats like WebP and AVIF achieve 25–35% better compression than JPEG/PNG at equivalent quality levels.

What dependencies do I need to run image optimization?▼

You need ImageMagick, WebP, and sharp-cli installed. These tools handle format conversion, compression, and responsive image generation across your specified image directories.

Related Skills

Explore More Software Engineering Skills→
jacob-balslevjacob-balslev
1

image-optimization-pipeline-config

Define build-time image optimization contracts with srcset breakpoints and transparency handling.

Community
Intermediate
secondskysecondsky
204

web-performance-optimization

Apply code splitting, lazy loading, caching, and Core Web Vitals monitoring to web apps.

Community
Advanced
BerryKuipersBerryKuipers
7

validate-build

Run production build validation across Vite, TypeScript, Webpack, esbuild, and Rollup.

Community
Intermediate
guichefferguicheffer
3

images

Optimize and serve images via Cloudinary CDN with responsive sizing.

Community
Intermediate