Hi. I'm using <Image/> with a remote image.
can I make a specific Image component load the image at 0.25x size?
#make image load at smaller size
civic nebula
heady nightBOT
Hi @civic nebula. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes. You can request a smaller rendered size for a specific <Image /> in a few ways, depending on what you mean by “0.25x” and whether you’re using responsive layouts.
1. Fixed 0.25x dimensions
If you know the original size (e.g. 1600×900 → 400×225):
import { Image } from 'astro:assets';
<Image
src="<https://example.com/remote-image.jpg">
alt="description"
width={400}
height={225}
/>
For remote images, you can either:
- Manually set
widthandheight, or - Use
inferSizeto get the original size automatically, then scale it in code. [inferSize]
---
import { Image } from 'astro:assets';
const src = "<https://example.com/remote-image.jpg";>
// If you know original size is 1600x900:
const width = 1600 / 4;
const height = 900 / 4;
---
<Image src={src} alt="description" width={width} height={height} />
Astro will transform the image to those dimensions. [Image src]
2. Use densities for 0.25x relative to a given width
If you want the browser to pick different pixel densities, you can set a base width and use densities (note: densities is not compatible with layout). [densities]
Example: render at 400px CSS width, but provide 1x and 2x:
---
import { Image } from 'astro:assets';
---
<Image
src="<https://example.com/remote-image.jpg">
alt="description"
width={400}
densities={[1, 2]}
/>
To get “0.25x of original” you’d still choose width as originalWidth / 4.
3. With responsive layout
If you’re using layout="constrained" or full-width, the width/height you pass define the maximum size; Astro generates multiple widths around that. [layout]
So to make a specific image effectively 0.25x, set its width/height to 0.25× the original:
---
import { Image } from 'astro:assets';
const src = "<https://example.com/remote-image.jpg";>
// assume original 1600x900
const width = 1600 / 4;
const height = 900 / 4;
---
<Image
src={src}
alt="description"
layout="constrained"
width={width}
height={height}
/>
Astro will then generate a srcset around that smaller target size. [Responsive behavior]
There isn’t a built-in “scale=0.25” prop; you achieve 0.25x by passing scaled width/height (and optionally densities or layout) on that specific <Image />.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
civic nebula
@heady night you failed to give the example for infersize. i want to get it with infersize then scale programmatically
heady nightBOT
Let me check the knowledge base for you again. One moment! :books:
You can’t directly “read” the inferred size from <Image /> props, but you can do exactly this in your frontmatter using inferRemoteSize() and then pass scaled dimensions to <Image />.
For a remote image:
---
import { Image, inferRemoteSize } from 'astro:assets';
const src = "<https://example.com/remote-image.jpg";>
// Get original remote size
const { width: origWidth, height: origHeight } = await inferRemoteSize(src);
// Scale to 0.25x
const width = Math.round(origWidth * 0.25);
const height = Math.round(origHeight * 0.25);
---
<Image
src={src}
alt="Description"
width={width}
height={height}
/>
inferRemoteSize() returns the original width and height of a remote image so you can compute any scale factor you like before rendering. [inferRemoteSize]