image-optimizer

Apply preload, lazy-loading, and format strategies to storefront images.

13|2|Updated Feb 24, 2026

Search Tags:#frontend #optimization #image #webp #avif #lcp #lazy-load

Ready to run

npx skills add https://github.com/decocms/storefront-skills --skill image-optimizer-decocms

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: image-optimizer
Source: https://github.com/decocms/storefront-skills/tree/main/.claude-performance/skills/image-optimizer
Command: npx skills add https://github.com/decocms/storefront-skills --skill image-optimizer-decocms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps storefronts load images faster and preserve visual quality by guiding preload, lazy-load, and format decisions.

Core Features & Use Cases

Pre-load the main above-the-fold image (hero or first product image) to improve LCP.
Lazy-load offscreen images to reduce initial render cost without delaying visible content.
Serve modern formats (AVIF, WebP) and provide responsive sizes to adapt to different viewports.
Use case: on a PDP with a hero and a gallery, ensure the hero loads first, with thumbnails loaded lazily as the user scrolls.

Quick Start

Load the hero image early, enable lazy-loading for the gallery, and serve AVIF/WebP with responsive srcset.

Frequently Asked Questions about image-optimizer

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

FAQPage Schema

How do I improve LCP for storefront product pages?▼

Improve LCP for storefront pages by preloading the main above-the-fold hero image and applying fetch priority hints. This ensures the primary visual content renders immediately without waiting for offscreen gallery thumbnails.

What is the best way to lazy-load offscreen images?▼

The best way to lazy-load offscreen images is to apply lazy-loading attributes to gallery thumbnails and below-the-fold content. This reduces initial render cost without delaying the visible above-the-fold product images.

How do I serve WebP and AVIF formats with responsive images?▼

Serve WebP and AVIF formats by implementing responsive srcset attributes to adapt image sizes for different viewports. This preserves visual quality while delivering modern, highly compressed image formats to compatible browsers.

Do I need code changes to apply preload and fetch priority for images?▼

Yes, you need tooling or code changes to implement proper preload hints, fetch priority, and responsive images. These frontend optimization techniques require direct modifications to your storefront's HTML and image delivery logic.

When should I preload hero images versus lazy-loading galleries?▼

Preload hero images on product detail pages to improve LCP, while lazy-loading gallery thumbnails as the user scrolls. This strategy prioritizes initial visible storefront content and defers secondary visuals to reduce render cost.