Skip to main content

DPR - Device Pixel Ratio

Use the dpr transformation to request a higher-density variant for screens with a device pixel ratio above 1.

Overview​

High-density displays can look sharper when the delivered image has more physical pixels than its CSS display size. Use dpr with width and height when building responsive image sets for retina and high-resolution screens.

For example, a 400px wide image at dpr=2 can provide enough source pixels for a 400 CSS px slot on a 2x display.

Syntax​

FieldValue
Canonical parameterdpr
Aliasnone
Accepted valuesNumber 0.01 through 8

Example​

https://cdn.imgwire.dev/{organization_id}/{environment_id}/{image_id}?width=400&dpr=2&format=auto&quality=auto
image.url({
  width: 400,
  dpr: 2,
  format: 'auto',
  quality: 'auto',
});
imgwire images url img_123 --width 400 --dpr 2 --format auto --quality auto

Live examples​

These examples all render at 240 CSS px wide. The dpr value changes the delivered pixel density, not the layout width. A width=240&dpr=2 URL requests enough source pixels for a 240 CSS px slot on a 2x display.

Demo image requested at DPR 1 and displayed at 240 CSS pixels wide
DPR 1, displayed at 240 CSS px
Demo image requested at DPR 2 and displayed at 240 CSS pixels wide
DPR 2, displayed at 240 CSS px
Demo image requested at DPR 3 and displayed at 240 CSS pixels wide
DPR 3, displayed at 240 CSS px

Responsive image example​

Use DPR variants in srcset when the layout slot has a stable CSS size.

<img
  src="https://cdn.imgwire.dev/.../img_123?width=400&dpr=1&format=auto&quality=auto"
  srcset="
    https://cdn.imgwire.dev/.../img_123?width=400&dpr=1&format=auto&quality=auto 1x,
    https://cdn.imgwire.dev/.../img_123?width=400&dpr=2&format=auto&quality=auto 2x
  "
  width="400"
  height="267"
  alt="Product preview"
/>

Best practices​

  • Use DPR variants for images shown at fixed CSS sizes on high-density screens.
  • Pair DPR with format=auto and quality=auto to control delivery cost.
  • Avoid generating unnecessary high-DPR variants for images that are already visually small or low-detail.
  • Prefer responsive image helpers when your framework or Imgwire SDK provides them.

Common mistakes​

  • Confusing DPR with CSS width. DPR changes delivered pixel density, not the layout size by itself.
  • Shipping only a 3x variant to all screens.
  • Forgetting to set HTML width and height attributes for layout stability.

Last updated at: May 9, 2026