images

Optimize storefront images with responsive srcset and AVIF/WebP format negotiation.

13|2|Updated Feb 24, 2026

Search Tags:#image-optimization #responsive-images #srcset #storefront #deco #cdn-proxy

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Deco.cx storefronts rely on image pipelines that balance quality, size, and delivery across devices; this skill guides configuration and usage to ensure images load quickly without sacrificing visuals.

Core Features & Use Cases

Image optimization pipeline integration with components, server-side and CDN rewrites.
Responsive images through srcset, Picture, and Source for art-direction.
Format negotiation and caching strategies to serve AVIF/WebP when supported.
Use Case: when optimizing product photos and banners across a storefront.

Quick Start

Optimize default image quality, enable responsive markup, and configure CDN proxy rules for the best balance of speed and fidelity.

Frequently Asked Questions about images

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

FAQPage Schema

How do I optimize storefront images for faster page loads without losing quality?▼

To optimize storefront images, you can configure an image optimization pipeline that balances quality and size using responsive srcset markup, AVIF/WebP format negotiation, and CDN proxy caching.

What's the best way to implement responsive images using srcset for product photos?▼

Implementing responsive images with srcset involves configuring Picture and Source elements for art-direction, allowing the storefront to serve appropriately sized product photos and banners dynamically based on the user's device.

How does CDN proxy caching work with AVIF and WebP format negotiation?▼

CDN proxy caching works with format negotiation by detecting browser support and serving AVIF or WebP versions of images dynamically, applying bypass rules when necessary to ensure visitors receive optimized formats without sacrificing fidelity.

Can I use this image optimization pipeline for both product pages and storefront banners?▼

Yes, the image optimization pipeline is applicable across storefront components, handling platform-specific URL rewriting and configuration for product pages, banners, and galleries to ensure consistent speed and visual quality.

When should I configure CDN proxy bypass rules for storefront image delivery?▼

You should configure CDN proxy bypass rules when default caching strategies interfere with dynamic image updates or specific platform requirements, ensuring the CDN serves the correct optimized image without stale cache conflicts.

Does deco.cx support automatic format negotiation for legacy image formats?▼

Yes, deco.cx supports format negotiation that serves modern AVIF and WebP formats when supported by the browser, while automatically falling back to legacy image formats to maintain compatibility for all storefront visitors.