E-commerce Use Case
Product Listing Grid
Responsive images that adapt to different screen sizes
Product 1
$99.99
Product 2
$99.99
Product 3
$99.99
Product Detail View
High-quality image for detail page
Premium Product
$99.99
High-quality product with excellent features. Image optimized for fast loading.
Implementation Code
<img
src="/cdn-cgi/image/width=640,quality=85,format=auto/images/products/product-high-res.jpg"
srcset="/cdn-cgi/image/width=640,quality=85,format=auto/images/products/product-high-res.jpg 640w, /cdn-cgi/image/width=960,quality=85,format=auto/images/products/product-high-res.jpg 960w, /cdn-cgi/image/width=1280,quality=85,format=auto/images/products/product-high-res.jpg 1280w, /cdn-cgi/image/width=1920,quality=85,format=auto/images/products/product-high-res.jpg 1920w, /cdn-cgi/image/width=2560,quality=85,format=auto/images/products/product-high-res.jpg 2560w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
alt="Product"
loading="lazy"
>