https://github.com/Princesseuh/astro-eleventy-img

Astro + eleventy-img
https://github.com/Princesseuh/astro-eleventy-img

Last synced: 16 days ago
JSON representation

Astro + eleventy-img

• Host: GitHub
• URL: https://github.com/Princesseuh/astro-eleventy-img
• Owner: Princesseuh
• License: mit
• Archived: true
• Created: 2022-01-28T19:01:32.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-30T15:39:41.000Z (about 1 year ago)
• Last Synced: 2024-05-30T21:04:46.858Z (about 1 month ago)
• Language: TypeScript
• Size: 403 KB
• Stars: 43
• Watchers: 2
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-astro - Astro Eleventy Image
• my-awesome-astro - astro-eleventy-img - Generate images using [eleventy-img](https://github.com/11ty/eleventy-img) (What Do I Use... / If I want to add optimized images?)

README

        
# Astro + eleventy-img

> **Warning**

> This project is not supported anymore. Please use the official [`astro:assets`](https://docs.astro.build/en/guides/assets/) instead.

A tiny script and component intended to be used with [Astro](https://astro.build/) for generating images with [eleventy-img](https://github.com/11ty/eleventy-img). It also supports creating blurry placeholders for said images

It was mostly made for my own website and I do not intend to really support this outside of my own needs. For more generalist solutions, check out the official [@astrojs/image](https://docs.astro.build/en/guides/integrations-guide/image/) integration or [astro-imagetools](https://github.com/RafidMuhymin/astro-imagetools).

**This package is intended to be used in Astro's static mode and does NOT support Server-Side Rendering.**

## Installation

```shell

npm install astro-eleventy-img

```

## Usage

The best way to use this in my opinion is to use it to generate images in the `public` folder. That way, they're copied directly to the result website. This is the default behavior.

### Javascript Usage

#### Generating images

```astro

---

import { generateImage } from 'astro-eleventy-img';

const myImage = await generateImage('src/assets/my_image.png', {

  // The options here are passed directly to eleventy-img

  widths: [300],

  formats: ['webp', 'avif'],

});

---



```

`generateImage` returns an object containing all the formats generated and metadata you can use in your HTML, so myImage is equal to:

```js

{

  webp: [

    {

      format: 'webp',

      width: 300,

      height: 240,

      url: '/assets/images/RfSNa8TCUW-300.webp',

      sourceType: 'image/webp',

      srcset: '/assets/images/RfSNa8TCUW-300.webp 300w',

      filename: 'RfSNa8TCUW-300.webp',

      outputPath: 'public/assets/images/RfSNa8TCUW-300.webp'

    }

  ],

  avif: [

    {

      format: 'avif',

      width: 300,

      height: 240,

      url: '/assets/images/RfSNa8TCUW-300.avif',

      sourceType: 'image/avif',

      srcset: '/assets/images/RfSNa8TCUW-300.avif 300w',

      filename: 'RfSNa8TCUW-300.avif',

      outputPath: 'public/assets/images/RfSNa8TCUW-300.avif'

    }

  ]

}

```

The following files will be generated in the `public/assets/images` folder:

```shell

RfSNa8TCUW-300.webp

RfSNa8TCUW-300.avif

```

#### Generating placeholders

```astro

---

import { generatePlaceholder } from 'astro-eleventy-img';

const myPlaceholder = generatePlaceholder('src/assets/my_image.png');

---



```

`generatePlaceholder` return an object containing all the properties needed for showing the image. So `myPlaceholder` in this example is equal to:

```js

{

  dataURI: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAIAAABV+fA3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAz0lEQVQImQHEADv/AJ7Ho7PYwTt5UhdkNjmLSUOPUCB4MSFzMkGMNACixqksb04WUy4wdz9cnFxPnksbaS0HTCo3hDUAnLmcRnFLQ289ZpZXn7Z9MpA+OYU9EFstVZpHAJ3GaqnPbJXFW5iyZNzLqZWvco+9YHeqVlKXSACu1myt13Cc1GW6ynnFrIjK4ouSzFZ/vlNsskgAytqD1d6Q3+Kevsl/xb951+OXyt6FstVytNRzAIS0S4i2S5u8TK3NXrPOZ57CYqLGXWiqOoi4Rz9UYMGpm241AAAAAElFTkSuQmCC';

  width: 640;

  height: 514;

  quality: 60;

}

```

### Component Usage

Alternatively, it can also be used through a provided component to automatically generate the proper HTML for including the image and its placeholder:

```astro

---

import { Image } from 'astro-eleventy-img';

---

```

will generate the following HTML:

```html

  

    

    

    

  

  

    
This is my favorite image.

  


```

and the following files will be generated in the `public/assets/images` folder:

```shell

4dWK95ygTq-640.avif

4dWK95ygTq-640.webp

4dWK95ygTq-640.png

```

The included `Image` component is a thin wrapper around `generateImage` and `generatePlaceholder`, it works for most needs but do not hesitate to build your own!

## [Complete Docs available here](./Docs.md)

## Troubleshooting

### require is not defined

Add the following to your `astro.config.js` config:

```js

vite: {

    ssr: {

      external: ["@11ty/eleventy-img"],

    },

},

```