skills.rest
IgorVaryvoda
IgorVaryvodaCOMMUNITY
Explore all skills by this author →
Website𝕏@igorvaryvodaGitHub

image-optimization

Select modern image formats and configure responsive delivery with fallbacks.

Updated Jan 24, 2026
Search Tags:#CDN#web-performance#lazy-loading#image-optimization#responsive-images#AVIF#WebP
One-click install
npx skills add https://github.com/IgorVaryvoda/image-optimization-skill --skill image-optimization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-optimization
Source: https://github.com/IgorVaryvoda/image-optimization-skill/tree/main/skills/image-optimization
Command: npx skills add https://github.com/IgorVaryvoda/image-optimization-skill --skill image-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Image Optimization Skill helps developers deliver fast, visually rich web pages by selecting modern image formats, applying efficient compression, and configuring responsive delivery techniques to reduce payloads without sacrificing perceived quality.

Core Features & Use Cases

  • Format selection and quality tuning for JPEG, PNG, WebP, AVIF, and GIF with reliable fallbacks across browsers.
  • Responsive images using srcset, sizes, picture, and fetchpriority to optimize LCP and CLS.
  • CDN integration, lazy loading, and placeholder strategies (LQIP, blurhash) to improve user experience and startup times.
  • Practical use: optimize a hero image for a multi-device landing page to improve LCP while maintaining visual fidelity.

Quick Start

Use the image-optimization skill to generate optimized variants for a sample hero image, producing AVIF/WebP/JPEG formats with fallbacks and responsive sizing.

Frequently Asked Questions about image-optimization

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

FAQPage Schema
How do I optimize images for web performance using modern formats like AVIF and WebP?▼

Image optimization for web performance involves selecting modern formats like AVIF and WebP, applying efficient compression, and configuring reliable browser fallbacks to reduce payload size without sacrificing visual quality.

What is the best way to deliver responsive images and improve LCP on a landing page?▼

Delivering responsive images requires using srcset, sizes, and picture elements with fetchpriority attributes to optimize LCP and CLS, ensuring the correct image variant loads across multiple devices.

When do I need to use placeholder strategies like LQIP or blurhash for image delivery?▼

Placeholder strategies like LQIP and blurhash are needed when improving user experience and startup times, providing low-quality image placeholders while full-resolution media assets load progressively.

Does lazy loading work with CDN integration for responsive image delivery?▼

Yes, lazy loading works with CDN integration to improve startup times by deferring offscreen media asset loading, while the CDN handles responsive delivery and format negotiation efficiently.

Why does my hero image payload remain large after converting to WebP?▼

Large payloads after WebP conversion often result from missing responsive sizing or compression tuning, requiring proper srcset configuration and quality adjustments to minimize bandwidth effectively.

Related Skills

Explore More Software Engineering Skills→
rampstackcorampstackco
523

media-asset-management

Plan and design scalable media pipelines for images, video, and downloadable assets.

Official
Advanced
oakossoakoss
14

responsive-images

Implement responsive images with srcset, sizes, lazy loading, and modern formats.

Official
Intermediate
yuhle-qugyuhle-qug

react-performance

Profile React apps with React DevTools and web-vitals to optimize rendering and bundles.

Community
Advanced
GPTtangGPTtang
4

compress-image

Compress image files to WebP, PNG, or JPEG formats.

Community
Intermediate