are you familiar with astro 5.10 and new <Image /> component ? | Astro Lounge | Page 1

agile falconBOT Jun 21, 2025, 5:28 PM

#

Hi @uncut garnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, I am familiar with Astro 5.10 and the new `<Image />` component. In Astro 5.10, the `<Image />` component is a built-in feature provided by the `astro:assets` module. It allows you to optimize and transform images, including support for responsive images, priority loading, and new configuration options such as `image.objectFit`, `image.objectPosition`, and `image.layout` for global defaults. The component can be used in `.astro` and `.mdx` files, and it supports several properties for controlling image behavior and output. For more details, you can refer to the official documentation on the Image and Assets API Reference and the responsive image properties introduced in Astro 5.10.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@uncut garnet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

uncut garnet Jun 21, 2025, 5:31 PM

#

@agile falcon Im using tailwindcss v4 in my project. Im using breakpoints from tailwind.

currently i have this options in my astro config:

image: {
breakpoints: [640, 768, 1024, 1280, 1536],
responsiveStyles: false,
layout: "constrained",
},

my problem is that I dont know how to create component for displaying few images in one row. i wish to have them optimized properly. but images will be passed from .mdx file

I wish to be able to use my component like:

<ImageGrid>
Anti-aging Makeup
Shimmer Makeup
Prom Makeup
Retro Makeup
</ImageGrid>

agile falconBOT Jun 21, 2025, 5:31 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

Astro’s built-in <Image /> component can be used in .astro and .mdx files, and you can pass images as children to a custom component. However, the knowledge sources do not provide a direct example of creating an <ImageGrid> component that accepts Markdown image syntax (![]()) as children and automatically optimizes them.

Here’s what is clear from the documentation:

The <Image /> component is available in .mdx files, and you can import and use it directly for optimized images. Standard Markdown image syntax (![]()) is also supported in .mdx files, but these are not passed as components—they are rendered as HTML <img> tags, which means you cannot directly wrap them in a custom component and expect them to be optimized by Astro’s <Image /> component unless you use a custom MDX plugin or override the image renderer, which is not covered in the provided knowledge sources Images in MDX files.
If you want to optimize images and use a grid, you should use the <Image /> component directly, not Markdown image syntax, and pass the images as props or children to your custom grid component. For example:

---
// src/components/ImageGrid.astro
const { images = [] } = Astro.props;
---
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  {images.map(({ src, alt }) => (
    <Image src={src} alt={alt} class="w-full h-auto" />
  ))}
</div>

And in your .mdx file:

import { Image } from 'astro:assets';
import ImageGrid from '../components/ImageGrid.astro';
import img1 from './images/makeup01.webp';
import img2 from './images/makeup02.webp';
import img3 from './images/makeup03.webp';
import img4 from './images/makeup04.webp';

#


- If you use Markdown image syntax (`![]()`), those images will not be optimized by Astro’s `<Image />` component in `.mdx` files, and you cannot wrap them in a custom component for optimization based on the current documentation [Images in MDX files](<https://docs.astro.build/en/guides/images/#images-in-mdx-files>).

**Summary:**  
To have optimized images in a grid, use the `<Image />` component and pass image data as props to your grid component. Using Markdown image syntax as children of a custom component will not result in optimized images, according to the current knowledge sources.

If you need more advanced Markdown image handling (e.g., custom rendering of `![]()`), you would need to use a custom MDX plugin or renderer, which is not covered in the provided documentation.

For more on using images in MDX and custom components, see [Images in MDX files](<https://docs.astro.build/en/guides/images/#images-in-mdx-files>) and [Astro components for images](<https://docs.astro.build/en/guides/images/#astro-components-for-images>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@uncut garnet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

uncut garnet Jun 21, 2025, 5:32 PM

#

@agile falcon until now my component looked like this:

// You are looking at freaking stupid hacks her, because cant use <slot /> in easy way
const html = await Astro.slots.render('default');
// This one matches all elements inside first paragraph
const images = html.match(/<img.*?>/gm) || [];
const gridCols = (imagesCount = images.length) => {
if (imagesCount % 4 === 0) return 'grid-cols-2 sm:grid-cols-4';
if (imagesCount % 3 === 0) return 'grid-cols-1 sm:grid-cols-3';
if (imagesCount % 2 === 0) return 'grid-cols-1 sm:grid-cols-2';
return 'grid-cols-1';
};

<div class={grid ${gridCols()} not-prose rounded-lg}>
{
// check if there is at least one image without throwing errors
images.length > 1 ? <Fragment set:html={images} /> : <div class='skeleton w-full h-100 opacity-10' />
}
</div>

agile falconBOT Jun 21, 2025, 5:32 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

Your current approach—extracting <img> tags from the rendered slot HTML and injecting them into a grid—is a creative workaround, but it has limitations:

Images inserted via Markdown (![]()) in MDX will render as <img> tags, not as Astro’s <Image /> component. This means you lose out on Astro’s image optimization features, such as automatic resizing, format conversion, and responsive behavior. The knowledge sources confirm that only the <Image /> component (or Markdown images in .md files, not .mdx) will be optimized by Astro, and Markdown image syntax in MDX is not passed as a component you can intercept and enhance in this way Images in MDX files.
There is no documented way in the knowledge sources to automatically convert Markdown image syntax in MDX to use the <Image /> component inside a custom component. The recommended approach is to use the <Image /> component directly and pass image data as props to your grid component, as described previously.
Your grid logic for column count is fine for layout, but the image optimization issue remains.

What the documentation recommends

If you want optimized images in a grid, you should use the <Image /> component directly in your MDX, not Markdown image syntax. For example:

import { Image } from 'astro:assets';
import ImageGrid from '../components/ImageGrid.astro';
import img1 from './images/makeup01.webp';
import img2 from './images/makeup02.webp';
import img3 from './images/makeup03.webp';
import img4 from './images/makeup04.webp';

<ImageGrid
  images={[
    { src: img1, alt: "Anti-aging Makeup" },
    { src: img2, alt: "Shimmer Makeup" },
    { src: img3, alt: "Prom Makeup" },
    { src: img4, alt: "Retro Makeup" },
  ]}
/>

And your ImageGrid.astro:

#

---
import { Image } from 'astro:assets';
const { images = [] } = Astro.props;
---
<div class={`grid ${gridCols(images.length)} not-prose rounded-lg`}>
  {images.map(({ src, alt }) => (
    <Image src={src} alt={alt} class="w-full h-auto" />
  ))}
</div>

This ensures all images are optimized and responsive, and you can control the grid layout with your Tailwind classes Images in MDX files Astro components for images.

Summary

Your current hack works for layout, but does not provide image optimization.
Astro does not support intercepting Markdown image syntax in MDX to convert to <Image /> automatically.
Use the <Image /> component directly and pass images as props to your grid component for full optimization and responsive support.

If you need to use Markdown image syntax for authoring convenience, you would need a custom MDX plugin or renderer to transform those nodes to <Image /> components, but this is not covered in the official documentation.

For now, the best practice is to use the `<Image />` component directly in your MDX files for optimized images in a grid.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@uncut garnet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

uncut garnet Jun 21, 2025, 5:34 PM

#

@agile falcon ok, i wish to use this in .mdx files

import { Image } from 'astro:assets';
import ImageGrid from '../components/ImageGrid.astro';
import img1 from './images/makeup01.webp';
import img2 from './images/makeup02.webp';
import img3 from './images/makeup03.webp';
import img4 from './images/makeup04.webp';

how to modify my current component to make it work with that?

current component:

const html = await Astro.slots.render('default');
const images = html.match(/<img.*?>/gm) || [];
const gridCols = (imagesCount = images.length) => {
if (imagesCount % 4 === 0) return 'grid-cols-2 sm:grid-cols-4';
if (imagesCount % 3 === 0) return 'grid-cols-1 sm:grid-cols-3';
if (imagesCount % 2 === 0) return 'grid-cols-1 sm:grid-cols-2';
return 'grid-cols-1';
};

<div class={grid ${gridCols()} not-prose rounded-lg}>
{
images.length > 1 ? <Fragment set:html={images} /> : <div class='skeleton w-full h-100 opacity-10' />
}
</div>

agile falconBOT Jun 21, 2025, 5:34 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

To adapt your ImageGrid component for use with the pattern you described in your .mdx file (passing an images prop with objects containing src and alt), you should update your component to accept an images prop and render each image using Astro’s <Image /> component. This approach is directly supported and recommended in the Astro documentation for optimized images in MDX files Images in MDX files.

Here’s how you can modify your ImageGrid.astro component:

---
import { Image } from 'astro:assets';
const { images = [] } = Astro.props;

const gridCols = (imagesCount = images.length) => {
  if (imagesCount % 4 === 0) return 'grid-cols-2 sm:grid-cols-4';
  if (imagesCount % 3 === 0) return 'grid-cols-1 sm:grid-cols-3';
  if (imagesCount % 2 === 0) return 'grid-cols-1 sm:grid-cols-2';
  return 'grid-cols-1';
};
---

<div class={`grid ${gridCols()} not-prose rounded-lg`}>
  {images.length > 0
    ? images.map(({ src, alt }) => (
        <Image src={src} alt={alt} class="w-full h-auto" />
      ))
    : <div class="skeleton w-full h-100 opacity-10" />
  }
</div>

Key points:

The component now expects an images prop (an array of objects with src and alt).
It uses the <Image /> component for each image, ensuring optimization.
The grid column logic is preserved.

This matches the usage you described in your `.mdx` file and follows Astro’s best practices for image optimization in MDX Images in MDX files.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@uncut garnet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

uncut garnet Jun 21, 2025, 5:40 PM

#

@agile falcon create for me component, in that component use <Image />. I wish to be able to pass image in this way:

<ImageGrid>
Anti-aging Makeup
Shimmer Makeup
Prom Makeup
Retro Makeup
</ImageGrid>

agile falconBOT Jun 21, 2025, 5:40 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

I'm sorry, but the knowledge sources do not provide a way to create an Astro component that accepts Markdown image syntax (![]()) as children and then renders those images using the <Image /> component for optimization.

According to the documentation, Markdown image syntax in MDX files renders as standard <img> tags, not as Astro components. The <Image /> component can only be used directly in .astro and .mdx files, not as a wrapper for Markdown images passed as children. There is no documented method to intercept or transform Markdown image nodes in MDX to use the <Image /> component within a custom component like <ImageGrid> Images in MDX files.

If you want to use optimized images in a grid, you must pass image data as props and use the `<Image />` component directly, as shown in previous examples. Using Markdown image syntax as children will not result in optimized images, and there is no supported way to achieve this pattern with the current Astro features and documented APIs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@uncut garnet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

uncut garnet Jun 21, 2025, 5:42 PM

#

@agile falcon create for me component, in that component use <Image />. I wish to be able to pass image in this way:

images are always in direcotry "images" in the same plac e where .mdx file is

agile falconBOT Jun 21, 2025, 5:42 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

Certainly! Based on the knowledge sources, here’s how you can create an ImageGrid.astro component that uses Astro’s <Image /> component and accepts an images prop as an array of objects with src and alt. This approach is fully supported and recommended for optimized images in Astro and MDX files Images in MDX files.

ImageGrid.astro

---
import { Image } from 'astro:assets';
const { images = [] } = Astro.props;

const gridCols = (imagesCount = images.length) => {
  if (imagesCount % 4 === 0) return 'grid-cols-2 sm:grid-cols-4';
  if (imagesCount % 3 === 0) return 'grid-cols-1 sm:grid-cols-3';
  if (imagesCount % 2 === 0) return 'grid-cols-1 sm:grid-cols-2';
  return 'grid-cols-1';
};
---

<div class={`grid ${gridCols()} gap-4 not-prose rounded-lg`}>
  {images.map(({ src, alt }) => (
    <Image src={src} alt={alt} class="w-full h-auto" />
  ))}
</div>

Usage in your .mdx file:

import { Image } from 'astro:assets';
import ImageGrid from '../components/ImageGrid.astro';
import makeup01 from './images/makeup01.webp';
import makeup02 from './images/makeup02.webp';
import makeup03 from './images/makeup03.webp';
import makeup04 from './images/makeup04.webp';

<ImageGrid
  images={[
    { src: makeup01, alt: "Anti-aging Makeup" },
    { src: makeup02, alt: "Shimmer Makeup" },
    { src: makeup03, alt: "Prom Makeup" },
    { src: makeup04, alt: "Retro Makeup" },
  ]}
/>

Notes:

You must import each image in your .mdx file using the relative path, as shown above. This is required for Astro to optimize local images Images in MDX files.
The ImageGrid component will render a responsive grid using Tailwind classes and optimized images using <Image />.

#

This approach ensures your images are optimized and your grid is responsive, following Astro’s best practices.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@uncut garnet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

floral geyser Jun 21, 2025, 9:40 PM

#

@uncut garnet Please keep things safe when posting in this server. Posts like this appear in search results when people with similar problems search for them. I've deleted the offending messages, and would ask you to remember this is a public channel.

If you need help, and kapa fails to provide an answer, please make a post in #1019713903481081876

#are you familiar with astro 5.10 and new <Image /> component ?

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

What the documentation recommends

Summary

For now, the best practice is to use the <Image /> component directly in your MDX files for optimized images in a grid.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This matches the usage you described in your .mdx file and follows Astro’s best practices for image optimization in MDX Images in MDX files.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This approach ensures your images are optimized and your grid is responsive, following Astro’s best practices.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For now, the best practice is to use the `<Image />` component directly in your MDX files for optimized images in a grid.

This matches the usage you described in your `.mdx` file and follows Astro’s best practices for image optimization in MDX Images in MDX files.