Astro-media NPM

@gvkhna/astro-media 📷

⚠️ This integration is still experimental/WIP!

Fork of @astro/astro-image designed with more convenience when working with images and vector assets (svgs) in astro. With astro-media you should be able to get 0 CLS (Content Layout Shifts).

Setup

npm i astro-media

astro.config.mjs

import media from "astro-media/integration";

export default defineConfig({
  integrations: [
    // towards the top is better
    media(),
  ],
});

Usage

import Image from 'astro-media'

<Image src={import('asset.png')}>

Support inline asset path

In an attempt to reduce the following code

import MyImage from "images/asset.img";

  <img src={MyImage} ...>

Instead you can inline paths so you don't need to track so many variable names in addition to filenames

import Image from 'astro-media'

<Image src={import('images/asset.img')}>

The file will get resolved as part of the astro asset pipeline and be given a hashed filename, etc.

Auto fill size attributes

<Image src={import('myimage.png')}>

Missing attributes (width,height) will get filled in:

<img src="myimage-ocniwroconwroiu.png" width="3242" height="4460" />

So the browser knows the exact size of the image ahead of time instead of waiting for the image to load and shifting the layout of the page while rendering.

Scale image automatically

<Image src={import("myimage.png")} width="320" />

This will aspect-ratio scale the image automatically to a width of 320 and output the final height in the produced html

<img src="image.img" width="320" height="480" />

Inline SVG

Self explanatory but for many tiny svg files the file will be read, inlined and attributed correctly to reduce CLS.

<Image src={import('icon.svg')}>

No custom types as opposed to @astro/image

As part of the build system the plugin will annotate the import url with it's metadata in import meta format. As part of communicating build metadata to the Astro component at build/runtime. This is powerful and allows for handling of this metadata without any custom setup to your project.

<Image src={import('myimage.png')}>

When the Astro component Image is initialized, it sees the following url

myimage.png?width=180&height=220&format=png&size=3200&...

All of this metadata is then interpreted so if you have specified one attribute such as only the width, it will use the metadata to aspect ratio scale the image to that width.