Responsive Images with Cloudflare Images

1. Using Named Variants

Serve different image sizes based on viewport width using predefined variants.

      
<img
  srcset="
    https://imagedelivery.net/YOUR_HASH/IMAGE_ID/mobile 480w,
    https://imagedelivery.net/YOUR_HASH/IMAGE_ID/tablet 768w,
    https://imagedelivery.net/YOUR_HASH/IMAGE_ID/desktop 1920w
  "
  sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1920px"
  src="https://imagedelivery.net/YOUR_HASH/IMAGE_ID/desktop"
  alt="Responsive image"
  loading="lazy"
/>
      
    

2. Using Flexible Variants

Dynamic transformations with format=auto for optimal WebP/AVIF delivery.

      
<img
  srcset="
    https://imagedelivery.net/YOUR_HASH/IMAGE_ID/w=480,f=auto 480w,
    https://imagedelivery.net/YOUR_HASH/IMAGE_ID/w=768,f=auto 768w,
    https://imagedelivery.net/YOUR_HASH/IMAGE_ID/w=1920,f=auto 1920w
  "
  sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1920px"
  src="https://imagedelivery.net/YOUR_HASH/IMAGE_ID/w=1920,f=auto"
/>
      
    

3. Art Direction (Different Crops)

Serve different image crops for mobile vs desktop (e.g., portrait on mobile, landscape on desktop).

      
<picture>
  <source
    media="(max-width: 767px)"
    srcset="https://imagedelivery.net/YOUR_HASH/IMAGE_ID/mobile-square"
  />
  <source
    media="(min-width: 768px)"
    srcset="https://imagedelivery.net/YOUR_HASH/IMAGE_ID/desktop-wide"
  />
  <img
    src="https://imagedelivery.net/YOUR_HASH/IMAGE_ID/desktop-wide"
    alt="Art directed image"
  />
</picture>
      
    

4. High-DPI (Retina) Displays

Serve 2x images for high-resolution screens.

      
<img
  srcset="
    https://imagedelivery.net/YOUR_HASH/IMAGE_ID/w=400,dpr=1,f=auto 1x,
    https://imagedelivery.net/YOUR_HASH/IMAGE_ID/w=400,dpr=2,f=auto 2x
  "
  src="https://imagedelivery.net/YOUR_HASH/IMAGE_ID/w=400,f=auto"
/>
      
    

5. Low-Quality Image Placeholder (LQIP)

Load a tiny blurred placeholder first, then swap to full image.

      
<img
  src="https://imagedelivery.net/HASH/ID/w=50,q=10,blur=20,f=webp"
  data-src="https://imagedelivery.net/HASH/ID/w=1920,f=auto"
  alt="Image with LQIP"
/>

<script>
  const img = document.querySelector('img');
  const fullImg = new Image();
  fullImg.src = img.getAttribute('data-src');
  fullImg.onload = () => { img.src = fullImg.src; };
</script>
      
    

6. Using URL Transformations (/cdn-cgi/image/)

Transform ANY publicly accessible image (not just Cloudflare Images storage).

      
<img
  srcset="
    /cdn-cgi/image/width=480,format=auto/uploads/photo.jpg 480w,
    /cdn-cgi/image/width=768,format=auto/uploads/photo.jpg 768w,
    /cdn-cgi/image/width=1920,format=auto/uploads/photo.jpg 1920w
  "
  sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1920px"
/>
      
    

Best Practices

Always use format=auto for optimal WebP/AVIF delivery
Add loading="lazy" for images below the fold
Use sizes attribute to match your CSS layout
Provide descriptive alt text for accessibility
Consider art direction for different screen sizes (portrait vs landscape)
Use LQIP (Low-Quality Image Placeholder) for better perceived performance
Named variants: Best for consistent sizes and signed URLs
Flexible variants: Best for dynamic sizing (public images only)