Fix: Cannot Set Both densities and widths in Astro

Astro shows “Cannot set both densities and widths” when an <Image />, <Picture /> or getImage() call has both props. Both are ways to build a srcset, and HTML doesn’t allow mixing them: the hint explains that a srcset “cannot have both x and w descriptors.” Keep widths (with sizes) for images that change size with the layout, or densities for images that are always the same CSS size.

Key Takeaways

• widths produces 400w, 800w-style descriptors and needs a sizes attribute.
• densities produces 1x, 2x-style descriptors for fixed-size images.
• densities also can’t be combined with layout.
• The error message’s own advice: “In most cases, you’ll probably want to use only widths.”

Pick one

Fluid images: widths

Images whose rendered width depends on the viewport or container, such as heroes, content images and cards:

---
import { Image } from 'astro:assets';
import photo from '../assets/studio.jpg';
---
<Image
  src={photo}
  alt="Studio interior"
  widths={[480, 800, 1200, 1600]}
  sizes="(min-width: 1024px) 800px, 100vw"
/>

The browser combines sizes with the screen’s pixel density to choose a file, so you get sharp images on high-density screens without listing densities.

Fixed-size images: densities

Avatars, logos and icons that are always, say, 64 CSS pixels wide:

---
import avatar from '../assets/anika.jpg';
---
<Image src={avatar} alt="Anika Rao" width={64} height={64} densities={[1, 2]} />

Astro generates a 64px and a 128px file and lets the browser pick by pixel density.

Or use layout instead

Setting layout generates sensible widths and sizes automatically:

<Image src={photo} alt="Studio interior" width={1200} height={800} layout="constrained" />

layout="fixed" is the densities-style option: it creates 1x and 2x versions of the given size. Don’t add densities alongside any layout.

Finding the conflict

The error points to the component. Check for props spread from an object, which can hide one of the two:

<!-- defaults includes densities; caller adds widths -->
<Image {...defaults} widths={[400, 800]} src={photo} alt="..." />

Remove densities from the shared defaults, or stop passing widths in that case.

Responsive images in Astro shows how to write a sizes value that matches your CSS grid, and the Astro performance guide covers image formats and priority. For other image errors, see Missing image dimensions. The prop rules are in the astro:assets reference.

FAQ

Which is better for performance, widths or densities?

For images that resize with the layout, widths plus an accurate sizes lets each device download the smallest suitable file. densities is simpler and fine for small fixed-size images.

Can I use widths with layout?

Yes. widths can be combined with a layout to override the generated list. Only densities conflicts with layout.