Skip to main content

Improving Website Performance

Images often dominate page weight. Imgwire helps reduce that cost by delivering resized, transformed, and optimized variants from a CDN URL while keeping the original upload available for future variants.

Start with the rendered size​

The browser should not download a 4000-pixel source image for a 320-pixel card. Generate the variant that matches the layout slot:

https://cdn.imgwire.dev/{organization_id}/{environment_id}/{image_id}?width=640&height=360&resizing_type=cover&format=auto&quality=auto

Use:

  • width and height for expected output dimensions.
  • resizing_type=cover for fixed-size cards that should fill the frame.
  • resizing_type=contain when the full image must remain visible.
  • crop and gravity when the important region should stay in frame.
  • dpr for fixed CSS slots on high-density screens.

Use automatic format and quality​

For public image delivery, start with:

?format=auto&quality=auto

format=auto lets Imgwire return a browser-friendly format for the request. quality=auto lets Imgwire choose a practical compression setting for the delivered variant.

Only override these settings when you have a concrete visual, compatibility, or export requirement.

Build responsive variants​

Responsive images let the browser choose the best candidate for the viewport. Use width-based candidates for fluid layouts:

<img
  src="https://cdn.imgwire.dev/.../img_123?width=640&format=auto&quality=auto"
  srcset="
    https://cdn.imgwire.dev/.../img_123?width=320&format=auto&quality=auto 320w,
    https://cdn.imgwire.dev/.../img_123?width=640&format=auto&quality=auto 640w,
    https://cdn.imgwire.dev/.../img_123?width=960&format=auto&quality=auto 960w
  "
  sizes="(max-width: 700px) 100vw, 640px"
  width="640"
  height="360"
  alt="Product preview"
/>

For React apps, use <ResponsiveImage /> from @imgwire/react when you want the SDK to generate the responsive image markup. See responsive image variants with srcset.

Avoid layout shift​

Image optimization should not create layout instability. Always give the browser enough sizing information before the image loads.

Use one of these patterns:

  • Set width and height attributes on <img>.
  • Reserve space with CSS aspect-ratio.
  • Use a component that emits stable responsive image markup.
  • Make crop and resizing behavior explicit for fixed aspect-ratio slots.

Keep URLs cacheable​

Imgwire delivery works best when the same UI placement produces the same URL. Stable URLs let CDN variants be reused across requests.

Prefer SDK helpers over hand-built query strings:

const url = image.url({
  width: 960,
  height: 540,
  resizing_type: 'cover',
  format: 'auto',
  quality: 'auto',
});

Avoid adding per-request cache-busting parameters unless you intentionally need a unique response.

Loading strategy​

Use normal web image loading patterns with Imgwire URLs:

  • Load the LCP image eagerly when it is visible in the first viewport.
  • Use loading="lazy" for below-the-fold images.
  • Use decoding="async" for non-critical images.
  • Avoid preloading multiple competing hero images.
  • Do not generate high-DPR variants for tiny or low-detail images where the byte cost is not worth it.

Best practices checklist​

  • Resize every public image to the layout slot.
  • Use responsive srcset candidates for fluid layouts.
  • Use format=auto&quality=auto for public images.
  • Use presets for repeated sizes and explicit transforms for exact layouts.
  • Set width, height, or aspect ratio to prevent CLS.
  • Keep transformation URLs stable so CDN variants can be reused.

Last updated at: May 8, 2026