Astro Image with a Sume URL: allow the domain, set width and height
Astro only optimizes remote images from authorized sources and requires width and height on them. Add the host to image.domains, or save the Sume PNG under src.

Either authorize the host or save the file under src/. Astro's images guide says remote image optimization is limited to authorized sources, configured with image.domains or image.remotePatterns, and that width and height are required for remote images in the <Image /> component. Unauthorized remote images are not optimized, though the component can still stop layout shift.
The same page contrasts the two folders: images in src/ are optimized and transformed, and images in public/ are served as they are. A generated asset is a good fit for src/: you pay once for the Sume image and Astro builds every size from the file.
Which route should I pick?
| Route | What Astro does | Fit for a Sume image |
|---|---|---|
File in src/assets | Optimizes and transforms it | Best: build once, no runtime fetch |
File in public/ | Serves it unchanged | Fine for a favicon-style asset |
| Remote URL, domain allowed | Optimizes it; needs width and height | Works, but the build depends on the remote file |
| Remote URL, not allowed | No optimization | Avoid |
Config and component
If you do use the remote route, add the media host that appears in Sume's image responses, media.sume.com in the docs examples, and give the component its size.
// astro.config.mjs
import { defineConfig } from "astro/config";
export default defineConfig({
image: { domains: ["media.sume.com"] },
});
// in an .astro file:
// <Image src="https://media.sume.com/img/EXAMPLE/0.png" alt="Hero" width="1200" height="675" />What should the request look like?
Ask for the aspect ratio you will display, so Astro does not have to crop: aspect_ratio: "16:9" and output_format: "png". Read data[0].url from a 200. If you receive a 202, the image is not ready; the job envelope gives you a status_url to poll and a result_url to read, as the jobs guide explains.
Check the host in a real response before you commit the domain to your config: the docs examples show media.sume.com, but your integration should trust what the API returns to you, and a mismatch makes Astro skip the optimization without a loud error. usage.cost on a 200 is the USD amount billed for the generation.
One more build detail: Astro builds from files at compile time, so a generated image that lives in src/assets is the same on every deploy, while a remote one can change under you if the file is ever replaced. Pin the assets you ship by saving them, and keep a short note of the prompt and model id beside each file so the image can be recreated if the original is lost.
Sources
Related posts
More in Use cases
- Spoken repair estimates in English and Spanish: 40 a month on Sume TTS
An auto shop that voices 40 estimates a month in two languages, 500 characters each, pays $1.90 on Sume TTS. MAI-Voice-2.1 lists $0.88. What the gap buys.
- Avatar consent register keyed by avatar handle: a Python CSV script
Keep a consent register keyed by Sume avatar_handle: person, photo source, approved uses, expiry. A stdlib Python CSV checker blocks videos for expired consent.
- Avatar video aspect ratio for YouTube: 16:9 vs Shorts at 9:16
Sume avatar videos default to 9:16. YouTube's help says a wider ratio such as 16:9 avoids Shorts classification. When each is the right choice for a 60 s clip.
- Baby announcement video music: a soft lullaby-style bed on Sume
Brief a gentle instrumental for a baby announcement video: music box, soft piano, slow tempo. A take is $0.125 on Sume; fade it with Timeline.
Written by Sume