Fix: Missing Image Dimensions in Astro

What Causes This Error?

This error occurs when you use a remote image URL without specifying width and height attributes. Astro requires these dimensions for remote images to prevent Cumulative Layout Shift (CLS) and enable proper optimization.

The Problem

---
import { Image } from 'astro:assets';
---

<!-- ❌ Remote image without dimensions -->
<Image
  src="https://example.com/photo.jpg"
  alt="A photo"
/>

The Fix

Add Width and Height

---
import { Image } from 'astro:assets';
---

<!-- ✅ Specify dimensions -->
<Image
  src="https://example.com/photo.jpg"
  alt="A photo"
  width={800}
  height={600}
/>

Common Scenarios

Local Images Don’t Need Dimensions

---
import { Image } from 'astro:assets';
import localImage from '../assets/photo.jpg';
---

<!-- ✅ Dimensions are read from file automatically -->
<Image src={localImage} alt="A photo" />

Remote Images Always Need Dimensions

---
import { Image } from 'astro:assets';
---

<!-- ✅ Must specify for remote URLs -->
<Image
  src="https://images.unsplash.com/photo-123"
  alt="Unsplash photo"
  width={1200}
  height={800}
/>

Aspect Ratio with Single Dimension

---
import { Image } from 'astro:assets';
---

<!-- Specify both, Astro maintains aspect ratio during optimization -->
<Image
  src="https://example.com/photo.jpg"
  alt="Photo"
  width={400}
  height={300}
/>

Dynamic Remote Images

---
import { Image } from 'astro:assets';

interface Props {
  imageUrl: string;
  imageAlt: string;
}

const { imageUrl, imageAlt } = Astro.props;
---

<!-- Provide default dimensions for dynamic URLs -->
<Image
  src={imageUrl}
  alt={imageAlt}
  width={800}
  height={600}
/>

Using inferSize (Experimental)

---
import { Image } from 'astro:assets';
---

<!-- inferSize fetches dimensions at build time (slower) -->
<Image
  src="https://example.com/photo.jpg"
  alt="Photo"
  inferSize
/>

Content Collections with Remote Images

---
import { Image } from 'astro:assets';

// In your schema, store dimensions with the URL
const post = {
  coverImage: {
    url: 'https://example.com/cover.jpg',
    width: 1200,
    height: 630,
    alt: 'Blog post cover'
  }
};
---

<Image
  src={post.coverImage.url}
  alt={post.coverImage.alt}
  width={post.coverImage.width}
  height={post.coverImage.height}
/>

Picture Component

---
import { Picture } from 'astro:assets';
---

<!-- Picture also requires dimensions for remote images -->
<Picture
  src="https://example.com/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  formats={['avif', 'webp']}
/>

getImage Function

---
import { getImage } from 'astro:assets';

const optimized = await getImage({
  src: 'https://example.com/photo.jpg',
  width: 800,
  height: 600,
});
---

<img src={optimized.src} alt="Photo" {...optimized.attributes} />

Quick Checklist

• Local images: dimensions read automatically
• Remote images: width and height required
• Store dimensions alongside dynamic image URLs
• Use inferSize for build-time dimension fetching
• Dimensions help prevent layout shift (CLS)