Skip to content
Docs
    Menu

    Site code reference

    Images in code

    How to place library images in a Starjay site's code: exact addresses, alt text and responsive sizes.

    Every image on a Starjay site comes from the site's image library. An image's address looks like this:

    /_images/team-photo-a7f3~5f6971ec-d438-4a5e-a03b-8d3e272baa01/public

    It's site-relative, and the part between /_images/ and the last segment is opaque. Get addresses from browse_assets or import_asset (or request_asset_upload for a file on your computer) and use them exactly as returned.

    These are rules the platform expects you to follow; it doesn't refuse a write that breaks them. Following them keeps images replaceable on the canvas and keeps the delete protection in the image library accurate.

    Write alt text that describes what the image actually shows.

    Sizes

    Replace the last segment of the address to get another size:

    Segment Size
    public The original
    w640, w1024, w1920 640, 1024 and 1920 pixels wide
    og 1200 × 630 crop, for social previews
    thumbnail 200 × 200 crop

    Browsers get a modern image format automatically.

    Responsive images

    Give large images (heroes, banners, feature images) a srcset. Work out the base address in the frontmatter, and keep src a direct reference to the prop. The editor's image picker looks for src={imageUrl}; a computed src stops Replace image from working.

    ---
interface Props {
  imageUrl?: string
  imageAlt?: string
}

const { imageUrl, imageAlt = '' } = Astro.props as Props
const imageBase = imageUrl?.replace(/\/[^/]+$/, '') ?? ''
---

{imageUrl && (
  <img
    src={imageUrl}
    srcset={`${imageBase}/w640 640w, ${imageBase}/w1024 1024w, ${imageBase}/w1920 1920w`}
    sizes="100vw"
    alt={imageAlt}
    loading="lazy"
    decoding="async"
  />
)}

    Set sizes to match the layout, for example (max-width: 768px) 100vw, 50vw for a two-column image. Images visible when the page first loads use loading="eager" fetchpriority="high" instead of loading="lazy".

    Inside .map(), work out the base inside the callback (const base = item.imageUrl?.replace(/\/[^/]+$/, '') ?? '') and keep src={item.imageUrl}.

    Small images that always show at one size (avatars, logos, icons) don't need a srcset.

    Social preview images

    A page's social preview image is set with seo_set_page, not in code. Use the og version of the image's address.

    Related