Examples
Common transformation recipes for real-world use cases.
Common transformation combinations for typical use cases.
Responsive Images
Thumbnail (150x150)
?w=150&h=150&r=fill&f=webp&q=80
Card Image (400x300)
?w=400&h=300&r=fill&f=webp&q=80
Hero Banner (1200x600)
?w=1200&h=600&r=fill&f=webp&q=85
Full Width (1920px wide)
?w=1920&r=fit&f=webp&q=80
Profile Pictures
Small Avatar (64x64)
?w=64&h=64&r=thumb&g=face&f=webp&q=85
Medium Avatar (200x200)
?w=200&h=200&r=thumb&g=face&f=webp&q=85
Large Profile (400x400)
?w=400&h=400&r=crop&g=face&f=webp&q=85
E-Commerce
Product Listing (300x300)
?w=300&h=300&r=fit&f=webp&q=85
Product Detail (800x800)
?w=800&h=800&r=fit&f=webp&q=90
Product Zoom (1600px)
?w=1600&r=fit&f=jpeg&q=90
Social Media
Open Graph (1200x630)
?w=1200&h=630&r=fill&f=jpeg&q=85
Twitter Card (800x418)
?w=800&h=418&r=fill&f=jpeg&q=85
Instagram Square (1080x1080)
?w=1080&h=1080&r=fill&g=face&f=jpeg&q=85
HTML srcset Example
Use multiple widths for responsive srcset:
<img
src="https://cdn.tzzl.io/a1b2c3/photo.jpg?w=800&f=webp&q=80"
srcset="
https://cdn.tzzl.io/a1b2c3/photo.jpg?w=400&f=webp&q=80 400w,
https://cdn.tzzl.io/a1b2c3/photo.jpg?w=800&f=webp&q=80 800w,
https://cdn.tzzl.io/a1b2c3/photo.jpg?w=1200&f=webp&q=80 1200w,
https://cdn.tzzl.io/a1b2c3/photo.jpg?w=1600&f=webp&q=80 1600w
"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="Responsive photo"
/>
Picture Element with Format Fallback
<picture>
<source
type="image/avif"
srcset="https://cdn.tzzl.io/a1b2c3/photo.jpg?w=800&f=avif&q=70"
/>
<source
type="image/webp"
srcset="https://cdn.tzzl.io/a1b2c3/photo.jpg?w=800&f=webp&q=80"
/>
<img
src="https://cdn.tzzl.io/a1b2c3/photo.jpg?w=800&f=jpeg&q=85"
alt="Photo with format fallback"
/>
</picture>
When using auto-format negotiation (omitting the f parameter), Tuzzle automatically serves the best format based on the browser's Accept header. This eliminates the need for <picture> elements in most cases.
Background Placeholder with Blurhash
Use the x-blurhash response header to generate a placeholder while the full image loads:
// Fetch the image to get the blurhash header
const response = await fetch(
'https://cdn.tzzl.io/a1b2c3/photo.jpg?w=800&f=webp'
);
const blurhash = response.headers.get('x-blurhash');
// Use a blurhash library to decode and display as placeholder