Best Practices

Best Practices

Use responsive width parameters

Always specify a width that matches the rendered size on screen. Don't serve a 2000px image for a 200px thumbnail.

<!-- Good: sized to actual display -->
<img src="https://assets.avvyr.com/assets/sofa.jpg?width=400&height=400&fm=webp" width="400" />

<!-- Responsive with srcset -->
<img
  srcset="
    https://assets.avvyr.com/assets/sofa.jpg?width=400&height=400&fm=webp    400w,
    https://assets.avvyr.com/assets/sofa.jpg?width=800&height=800&fm=webp    800w,
    https://assets.avvyr.com/assets/sofa.jpg?width=1200&height=1200&fm=webp 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  src="https://assets.avvyr.com/assets/sofa.jpg?width=800&height=800&fm=webp"
/>

Use WebP format

WebP gives 25-35% smaller files than JPEG at the same visual quality. All modern browsers support it.

?width=800&height=800&fm=webp&q=80

Use fit=fill for uniform grid layouts

Product grids look best when all images have identical dimensions. Use fit=fill with a white background:

?width=600&height=600&fit=fill&fill=solid&fill-color=ffffff&fm=webp

Use trim for inconsistent product images

Supplier images often have random whitespace. Trim it, then apply uniform padding:

?trim&width=600&height=600&fit=fill&fill=solid&fill-color=ffffff&pad=20&fm=webp

Avoid cache-busting

Do not use the c parameter unless absolutely necessary. Each unique c value bypasses the disk cache and triggers a new billable transformation. If you need to update an image, re-upload it so it gets a new storage path — this is free and instant across all cache layers.

Specify quality intentionally

Don't use q=100 by default — the file size increase is significant with no visible benefit on screen. Use q=80 (the default) for most cases.

Don't transform SVGs

SVGs are vector and scale infinitely. Passing width/height to SVG URLs has no effect. Resize SVGs with CSS instead.