astro-simple-art-direction-test v0.0.45

astro-simple-art-direction

This is a component that implements a simple art direction using the getImage function from astro:assets.

By specifying the file, width, and height in the src object, it outputs responsive images and art direction.

Install

npm install astro-relative-links

**Usage**

import Picture from 'astro-simple-art-direction';

<Picture src={{file:"images/image.jpg",width:1000, height: 800}} alt="My image"}>

Generated output

<picture>
<source srcset="/_astro/bg_fv-home.ce16d97c_Z29bSst.avif 1x,./_astro/bg_fv-home.ce16d97c_ZOQ9s7.avif 2x" sizes="(max-width: 1000px) 100vw, 1440px" type="image/avif">
<source srcset="/_astro/bg_fv-home.ce16d97c_1Ezm8v.webp 1x,./_astro/bg_fv-home.ce16d97c_Z26h2F4.webp 2x" sizes="(max-width: 1000px) 100vw, 1440px" type="image/webp">
<img width="1440" src="/_astro/bg_fv-home.ce16d97c_1IXzW7.jpg" srcset="./_astro/bg_fv-home.ce16d97c_1IXzW7.jpg 1x,./assets/bg_fv-home.ce16d97c_Z21RNQs.jpg 2x" sizes="(max-width: 1440px) 100vw, 1440px" loading="lazy" decoding="auto" alt="" class="test">
</picture>