Photo Gallery Use Case

← Back to Home

Thumbnail Grid

Optimized thumbnails with lazy loading

Gallery image 1
Gallery image 2
Gallery image 3
Gallery image 4
Gallery image 5
Gallery image 6

Implementation Code

// Thumbnail with lazy loading
<img
  src="/cdn-cgi/image/width=400,height=300,quality=80,format=auto,fit=cover/images/landscapes/landscape-ultra.jpg"
  srcset="/cdn-cgi/image/width=400,height=300,quality=80,format=auto,fit=cover/images/landscapes/landscape-ultra.jpg, /cdn-cgi/image/width=800,height=600,quality=80,format=auto,fit=cover/images/landscapes/landscape-ultra.jpg 2x"
  alt="Gallery image"
  loading="lazy"
>