@astrojs/image: What It Is and How to Use It

@astrojs/image is an official Astro integration that helps you optimize and transform images easily in your Astro projects. It automatically resizes, compresses, and serves images in modern formats to improve website performance and user experience.

How It Works

@astrojs/image works like a smart assistant for your website's pictures. Instead of loading big, heavy images that slow down your site, it automatically creates smaller, faster versions that fit perfectly where you need them. Think of it like ordering a photo print: you don’t always want a giant poster, sometimes a small postcard is just right.

When you use this integration, it processes your images during build time or on-demand, resizing and converting them to modern formats like WebP. This means your visitors get images that load quickly without losing quality, making your site feel smooth and professional.

Example

This example shows how to use @astrojs/image in an Astro component to display an optimized image.

jsx

import { Image } from '@astrojs/image/components';

export default function Example() {
  return (
    <Image src="/images/sample.jpg" alt="Sample Image" width={600} height={400} />
  );
}

Output

<img src="/assets/sample-600w.webp" alt="Sample Image" width="600" height="400" loading="lazy" decoding="async">

When to Use

Use @astrojs/image whenever you want your website to load images faster and look better on all devices. It is especially helpful for blogs, portfolios, e-commerce sites, or any project with many pictures.

By automatically optimizing images, it saves you time and effort compared to manually resizing and compressing each photo. It also improves SEO and user experience by reducing page load times and bandwidth.

Key Points

• Automatically resizes and compresses images for faster loading.
• Supports modern image formats like WebP for better quality and smaller size.
• Easy to use with simple components in Astro projects.
• Improves website performance and user experience.

Key Takeaways

@astrojs/image optimizes images automatically for better website speed.

It resizes and converts images to modern formats like WebP.

Using it saves manual work and improves SEO and user experience.

Ideal for any Astro project with images, especially blogs and portfolios.