Image Optimization With Astrojs

When building modern web applications, image optimization plays a crucial role in improving site performance, enhancing SEO, and providing a better user experience. Astro, with its powerful Image Integration, makes this process easier. However, handling images efficiently, especially when they are stored in the /public directory, can still be a challenge.

To streamline this, we've created a custom image component as part of our open-source Astro boilerplate - Astroplate.

This component simplifies image handling and offers built-in optimization features, making it easier for developers to manage images in their Astro projects.

In this guide, we’ll walk you through how to use this custom component, explore its features, and demonstrate how it can improve the efficiency and performance of your site.

Custom Image Component

To optimize images in astro we've a custom image component built on top of Astro's built-in Image Integration, which will provide us a simplified way to handle images in our Astro project, specifically for images stored in the /public directory. This component also automatically import images from provided location as astro need local images to be imported in order to be used. You can get the component from here from our astroplate astro boilerplate.

Features

• Auto import local images using image location
• Automatic image path validation
• Simplified props interface
• Built-in error handling with console warnings
• Support for multiple image formats
• Lazy loading options
• Automatic image optimization

Installation

1.We've to make sure we have the Astro Image integration enabled in our astro.config.mjs:

import { defineConfig } from **"astro/config";**

export default defineConfig({
  integrations: [
    // The Image integration is included by default in Astro 3.0+
  ],
});

2.And Place the component file (e.g., ImageMod.astro) in our components directory.

Read more here - https://themefisher.com/astrojs-image-optimization