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.

5 min readSume
All posts

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?

Options from Astro's images guide, read 2026-10-05; the fit column is this post's advice.
RouteWhat Astro doesFit for a Sume image
File in src/assetsOptimizes and transforms itBest: build once, no runtime fetch
File in public/Serves it unchangedFine for a favicon-style asset
Remote URL, domain allowedOptimizes it; needs width and heightWorks, but the build depends on the remote file
Remote URL, not allowedNo optimizationAvoid

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

All Use cases posts

Written by Sume