skills.rest
decocms
decocmsOFFICIAL
Explore all skills by this author →
Website𝕏@deco_cmsGitHub

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
One-click install
npx skills add https://github.com/decocms/storefront-skills --skill images-decocms
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
pschaartpschaart

image-work

Enforce consistent Image component usage with placeholder URLs and accessibility guidelines.

Community
Advanced
garrytangarrytan
127.1k

benchmark

Compare webpage load times and web vitals across versions using JavaScript evaluations.

Community
Intermediate
dev-khoidev-khoi

nextjs-image-art-direction

Serve breakpoint-specific image variants in Next.js using getImageProps and picture elements.

Community
Advanced
IgorVaryvodaIgorVaryvoda

image-optimization

Select modern image formats and configure responsive delivery with fallbacks.

Community
Basic