MODRACXKENNETH D'SILVA

← Archive & Insights

Advanced Image Optimization for SEO & Performance

Images represent over 60% of total payload bytes on ecommerce pages. Learn how to implement AVIF and WebP dynamic encoding, responsive picture element math, and Cloudflare Image Resizing.

By Kenneth D'Silva • Reading Time: 34 min read • Category: Performance & Speed

Responsive Picture Element Implementation

<!-- Responsive AVIF / WebP Fallback Picture Element -->
<picture>
  <source 
    type="image/avif" 
    srcset="product-400.avif 400w, product-800.avif 800w" 
    sizes="(max-width: 768px) 100vw, 50vw" />
  <source 
    type="image/webp" 
    srcset="product-400.webp 400w, product-800.webp 800w" 
    sizes="(max-width: 768px) 100vw, 50vw" />
  <img 
    src="product-800.jpg" 
    alt="Premium Leather Boots" 
    width="800" 
    height="600" 
    loading="lazy" 
    decoding="async" />
</picture>

Suggested & Related Reading

Explore related engineering guides from Kenneth D'Silva: