What problem does it solve?
Product images are often the largest assets on e-commerce pages and are a primary cause of slow Largest Contentful Paint (LCP) and poor Core Web Vitals. This Skill explains how to build an automated image pipeline that resizes images to the correct dimensions, converts to modern formats (WebP/AVIF), applies lazy loading for below-the-fold content, and serves variants from a CDN with cache-friendly headers to reduce load time and bandwidth.
Core Features & Use Cases
- Automatic resizing & format conversion: Generate standard size variants (240, 400, 800, 1600, OG 1200x630) and output WebP/AVIF or JPEG as needed.
- Responsive delivery & LCP prioritization: Create proper srcset/sizes, set explicit width/height attributes to avoid CLS, use fetchpriority/preload only for the LCP image, and lazy-load the rest.
- Managed and self-hosted options: Guidance for Cloudinary (managed) and Sharp (self-hosted) pipelines, with sample URL generation and transformation best practices.
- CDN caching & versioning: Use immutable cache-control, Vary: Accept, and content-hash-based filenames to avoid manual cache purges and ensure safe cache invalidation.
Quick Start
Optimize my product images to generate responsive variants at 240/400/800/1600 widths, convert to WebP/AVIF with sensible quality settings, add explicit width and height attributes and lazy loading for non-LCP images, and return CDN-ready URLs with content-hash versioning.
