rafidmuhymin / astro-imagetools Goto Github PK

Image Optimization tools for the Astro JS framework

Home Page: astro-imagetools-docs.vercel.app

License: MIT License

Astro 4.77% JavaScript 88.23% TypeScript 7.00%

astro-imagetools's Introduction

Astro ImageTools

Astro ImageTools is a collection of tools for optimizing images, background images, and generating responsive images for the Astro JS framework.

Features

Below is a short list of features that Astro ImageTools offers. For more information, please see component-specific or API-specific documentation.

✅ Regular Image Optimization (<img> and <picture>)
✅ Background Image Optimization
✅ Responsive Images
✅ Simple and intuitive Art Direction API
✅ Lazy Loading
✅ Programmatic APIs
✅ Asynchronous Decoding
✅ Unique Breakpoints Calculation
✅ Preloading for urgent images
✅ SVG Tracing and Posterization
✅ 100% Scoped CSS
✅ Four kind of Layouts: constrained, fixed, fullWidth & fill
✅ Three kind of Placeholder Images: blurred, dominantColor & tracedSVG
✅ Long list of supported Image Formats
✅ Long List of supported Configuration Options
✅ Supports Remote Images and Data URIs too
✅ Support for sharpless Environments
✅ Both Memory-based and FS-based Caching for better Performance
✅ Respects to Semantics of HTML as much as possible

Getting Started

To get started with Astro ImageTools, first check out the Installation documentation for instructions on how to install the astro-imagetools package.

If you are looking for the available components and APIs, please check out the Components and APIs documentation.

If you want to view live examples of the components, APIs, layouts, and placeholder images, check out the Astro ImageTools Demo website.

If you want to report any issues or have found a missing feature, please report it on GitHub!

Good luck out there, Astronaut. 🧑‍🚀

astro-imagetools's People

Contributors

Stargazers

Watchers

astro-imagetools's Issues

Log a warning when an image cannot be found

Currently, sharp throws an error that is not very helpful, just Input file is missing without saying which file.

I propose logging a warning when a file cannot be found, and including the filepath that caused the error.

BackgroundImage component error with alt tag

Hi there, was doing a little experiment setting up demos of the new components and i believe i found a bug
The <BackgroundImage> component throws a 500 error if we leave the "alt" tag.
I saw your recent commit with a demo and compared it to what i was doing, and removing the alt solves it (link to the offending line).

here's the error:

Cannot read properties of undefined (reading 'map')

TypeError: Cannot read properties of undefined (reading 'map')
    at /node_modules/astro-imagetools/api/renderBackgroundImage.js:106:16
    at Array.map (<anonymous>)
    at /node_modules/astro-imagetools/api/renderBackgroundImage.js:102:12
    at Array.map (<anonymous>)
    at Module.renderBackgroundImage [as default] (/node_modules/astro-imagetools/api/renderBackgroundImage.js:75:8)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async eval (/home/bronze/coding/astro-image-demo/node_modules/astro-imagetools/components/BackgroundImage.astro:4:0)
    at async renderToString (/node_modules/astro/dist/runtime/server/index.js:330:21)
    at async Module.renderComponent (/node_modules/astro/dist/runtime/server/index.js:125:20)

.base option is not honored

The output of yarn build results in the assets generated by astro-imagetools to be loaded from /assets/ instead of the defined base option, eg: /foo/assets/. [email protected]

import { defineConfig } from 'astro/config';
import astroImagePlugin from 'astro-imagetools/plugin';

export default defineConfig({
  vite: {
    plugins: [astroImagePlugin],
  },
  site: 'https://example.com',
  base: '/foo',
});

Layout styles

Is there a way to stop the component inserting inline css with the image?
I'm using this to load a bg image, the layout=fill has worked, just wanted to clean it up a bit.

Something like layout="none" maybe?

Feature: Add class name option

This plugin is awesome! I didn't see the ability to add a class name. Please consider this as a prop.

Astro 0.23 with experimental-static-build flag issue

with astro 0.23 and experimental-static-build flag, issue with image component, in astro build :

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'dist/chunks/imagetools.js' imported from dist/chunks/Image.327f9ced.mjs

Html code validity

The component always generates <source> tag with width and height attributes.
The spec have a simple mention for those attributes :
https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
MDN do not mention those :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Source
And W3C validator cry at it :

Error: Attribute width not allowed on element source at this point.
Error: Attribute height not allowed on element source at this point.

Browser take the ratio from the <img> width and height attributes, so i, personally, don't understand what width and height means on a <source> tag.

class is not a valid Picture Config Option

I'm trying out the Picture component, and when I attempt to style it with astro scoped styles, I get a warning in the terminal:

[astro-imagetools]  class  is not a valid Picture Config Option

Is this because of #18? I'm trying to add a border-radius to the image.

style prop

Any plans for adding in a style prop?
I got it working in a fork.

Passing style through to getBackgroundStyles works well to style the actual image instead of the <picture> tag.

Allow disabling markdown image processing

Until there's a way to configure breakpoints for markdown images (#53), I'd like to disable processing them at all. I only have two images in a single markdown file, but if I remove those images, my build time goes from 67s to 20s, so they're taking a ton of time to process. I'd like to just use the files without processing them, for now. Maybe there can be a global config option to disable them?

Inline style on image creates excess gap

By default, this plugin adds an inline style, display:inline-block, to the img element. However, this creates a visual space at the bottom of the image because it's placed within another container – the picture element.

I'm unsure how this should be handled. Adding vertical-align: middle would fix this, but then this would have to be a global style because of how Astro scopes the <style> tag. Besides, we probably don't want all images to be vertically aligned this way when it comes to different contexts.

Adding display:block would also fix this. However, same problem as I mentioned earlier. Perhaps, let the developer decide, and don't add display: inline-block as an inline style?

Run failed on Windows

Hi, thanks for you hard work.

I ran to this error when running on Windows. In Linux, it works fine.

astro: 1.0.0-beta.20
astro-imagetools: 0.6.2
node: 16.15.0

> @example/[email protected] dev
> astro dev --experimental-integrations

file:///D:/Project/astro-site/node_modules/astro-imagetools/utils/runtimeChecks.js:67
export const pwd = process.env.PWD.split(path.sep).join(path.posix.sep);
                                   ^

TypeError: Cannot read properties of undefined (reading 'split')
    at file:///D:/Project/astro-site/node_modules/astro-imagetools/utils/runtimeChecks.js:67:36

[question] Retain params in src url instead of parsing and treating as props?

Hi, thanks for the great work.

I notice that query parameters in the src URL are parsed and passed as props to the underlying API.

Example:

<Picture src="https://images.unsplash.com/photo-1520520731457-9283dd14aa66?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb" alt="something" />

Strips off the image parameters and produces these warning:

[astro-imagetools]  ixlib  is not a valid Picture Config Option
[astro-imagetools]  q  is not a valid Picture Config Option
[astro-imagetools]  fm  is not a valid Picture Config Option
[astro-imagetools]  crop  is not a valid Picture Config Option
[astro-imagetools]  cs  is not a valid Picture Config Option

Is it possible to make the Picture component process the full URL without parsing the query parameters that way?

Thank you!

Astro builds timing out then getting killed

Hey!

This plugin is a critical missing piece in the Astro ecosystem. Keep up the good work!

I installed this plugin and quickly got it running in my development environment. The only trouble I had was that I got status 500 errors when visiting markdown generated pages that had svg images, which I had exported from Figma. I solved it by converting the svgs to pngs. The development server can also be a little bit slow when visiting different pages, sometimes a couple of minutes to load.

I did however, get problems running "astro build".
It got really slow, the "Collecting build information..." step takes several minutes. Running on my rather powerful PC.
After it's done with that step, it continues to the "generating static routes" step. I can see in the console that it has generated multiple responsive images along with the markdown files that was referencing them. And I get a "Completed in X ms" after a while. Then my PC fans go Brrrr for several minutes.

After that, i simply get a "Killed" in the console. No more information is provided.

I tried pushing my changes to github, and let my Github actions build server try to build. The CPU went to 100% and the build process died after 25 minutes. I was forced to restart my server as it became unresponsive.

My site has around 15 images in total, the largest being around 4mb.
I have recently converted the site from Gatsby to Astro, and Gatsby image tools had no issues doing similiar image processing on my images.

I'm sorry that I'm unable to provide more detailed information about my issue. Let me know how I can help you debug the issue.

astro 1.0.0-beta.17
astro-imagetools 0.5.8
Running in WSL2/Ubuntu

Thanks in advance.

Image without artDirectives attribute doesn't generate the picture tag

Following astro code :
<Image src="..." alt="..." width={320} format={['avif', 'webp']} breakpoints={[320, 640]} />
doesn't generate a <picture> tag, only <source> and <img> tags.

markdown integration

is it already possible to process and optimize images in markdown files by just utilizing query-encoded-filename-suffixes but otherwise common markdown image-embedding-syntax by this tool in astro? this would be very helpful to reuse existing markdown content and editing tools without much modifications.

`line` must be greater than 0

I tried to use <Picture/> in my Astro 1.0.0-beta.24 project, and got this error:

4:23:43 PM [vite] Error when evaluating SSR module /node_modules/object-hash/index.js?v=a4b9ea0a:
ReferenceError: require is not defined
    at /node_modules/object-hash/index.js?v=a4b9ea0a:3:14
    at instantiateModule (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59322:15)
4:23:43 PM [vite] Error when evaluating SSR module /node_modules/astro-imagetools/api/utils/getImage.js:
ReferenceError: require is not defined
    at /node_modules/object-hash/index.js?v=a4b9ea0a:1:13
    at instantiateModule (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59322:15)
4:23:43 PM [vite] Error when evaluating SSR module /node_modules/astro-imagetools/components/Img.astro:
Error: `line` must be greater than 0 (lines start at line 1)
    at originalPositionFor$1 (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:1780:19)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59112:25
    at String.replace (<anonymous>)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59102:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59101:10)
    at instantiateModule (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59327:32)
4:23:43 PM [vite] Error when evaluating SSR module /node_modules/astro-imagetools/components/index.js?v=a4b9ea0a:
Error: `line` must be greater than 0 (lines start at line 1)
    at originalPositionFor$1 (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:1780:19)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59112:25
    at String.replace (<anonymous>)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59102:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59101:10)
    at instantiateModule (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59327:32)
4:23:43 PM [vite] Error when evaluating SSR module /src/components/screens/blog/Hero.astro:
Error: `line` must be greater than 0 (lines start at line 1)
    at originalPositionFor$1 (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:1780:19)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59112:25
    at String.replace (<anonymous>)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59102:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59101:10)
    at instantiateModule (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59327:32)
4:23:43 PM [vite] Error when evaluating SSR module /src/layouts/BlogPost.astro:
Error: `line` must be greater than 0 (lines start at line 1)
    at originalPositionFor$1 (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:1780:19)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59112:25
    at String.replace (<anonymous>)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59102:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59101:10)
    at instantiateModule (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59327:32)
4:23:43 PM [vite] Error when evaluating SSR module /Users/ianvs/code/defined/www/src/pages/blog/[...page].astro:
Error: `line` must be greater than 0 (lines start at line 1)
    at originalPositionFor$1 (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:1780:19)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59112:25
    at String.replace (<anonymous>)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59102:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59101:10)
    at instantiateModule (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59327:32)
 error   `line` must be greater than 0 (lines start at line 1)
    at originalPositionFor$1 (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:1780:19)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59112:25
    at String.replace (<anonymous>)
    at /Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59102:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59101:10)
    at instantiateModule (/Users/ianvs/code/defined/www/node_modules/vite/dist/node/chunks/dep-88bd5805.js:59327:32)

Here's a reproduction: https://stackblitz.com/edit/github-bvrynd?file=src/pages/index.astro

No more listet in https://astro.build/integrations/

A few days ago I found this integration over the https://astro.build/integrations/ page, but now this project is no more listet. Is there a reason for that? Should this project not be used/discovered?

bug: Dynamic and static image imports return undefined

const { default: imageURL } = await import(content.meta.og_image) 
console.log(content.meta.og_image, imageURL)

/src/images/the-image-url.jpg undefined

Package subpath './plugin' is not defined by "exports"

I followed the installation instructions at https://astro-imagetools-docs.netlify.app/en/installation/, but I'm getting:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './plugin' is not defined by "exports" in /Users/ianvs/code/defined/www/node_modules/astro-imagetools/package.json imported from /Users/ianvs/code/defined/www/astro.config.mjs

Use with @astrojs/renderer-solid

Looks like it works with react, vue and svelte, but not solidjs.

Can't build on Linux environment

When i run npm run build on Linux i get the following error. Using Node v14.15.5 and v16.15

09:13:08.063 | npm ERR! code 1
-- | --
09:13:08.064 | npm ERR! path /opt/buildhome/repo/node_modules/pngquant-bin
09:13:08.065 | npm ERR! command failed
09:13:08.065 | npm ERR! command sh -c node lib/install.js
09:13:08.065 | npm ERR! compiling from source
09:13:08.065 | npm ERR! Command failed: /opt/buildhome/repo/node_modules/pngquant-bin/vendor/pngquant --version
09:13:08.066 | npm ERR! /opt/buildhome/repo/node_modules/pngquant-bin/vendor/pngquant: error while loading shared libraries: libimagequant.so.0: cannot open shared object file: No such file or directory
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR! pngquant pre-build test failed
09:13:08.066 | npm ERR! Error: Command failed: /bin/sh -c ./configure --prefix="/opt/buildhome/repo/node_modules/pngquant-bin/vendor"
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR!
09:13:08.066 | npm ERR!   Compiler: gcc
09:13:08.067 | npm ERR!      Debug: no
09:13:08.067 | npm ERR!        SSE: yes
09:13:08.067 | npm ERR!     OpenMP: no
09:13:08.067 | npm ERR! If you're using git, do clone with --recursive, or download from https://github.com/ImageOptim/libimagequant
09:13:08.067 | npm ERR! imagequant: error ... libimagequant.h not found in ./lib/
09:13:08.067 | npm ERR!
09:13:08.067 | npm ERR!
09:13:08.067 | npm ERR!     at /opt/buildhome/repo/node_modules/bin-build/node_modules/execa/index.js:231:11
09:13:08.068 | npm ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
09:13:08.068 | npm ERR!     at async Promise.all (index 0)

Build mode not working

Build mode is erroring out for me.

The Image import alone throws the error: import Image from "astro-imagetools"; with or without including it in the component. I've updated to all latest node packages, cleared the cache, and tested experimental flags but no cigar. The Image component works beautifully in dev. Have no idea how to troubleshoot.

Error:

'createHash' is not exported by __vite-browser-external, imported by node_modules/imagetools-core/dist/index.mjs
file: /home/kyle/Software/CarbideSawTool/node_modules/imagetools-core/dist/index.mjs:2:9
1: import sharp from 'sharp';
2: import { createHash } from 'crypto';
            ^
3: 
4: const METADATA = Symbol('image metadata');
Error: 'createHash' is not exported by __vite-browser-external, imported by node_modules/imagetools-core/dist/index.mjs
    at error (/home/kyle/Software/CarbideSawTool/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/home/kyle/Software/CarbideSawTool/node_modules/rollup/dist/shared/rollup.js:12477:16)
    at Module.traceVariable (/home/kyle/Software/CarbideSawTool/node_modules/rollup/dist/shared/rollup.js:12835:29)

Escape characters in path

Platform: Windows
astro-imagetools: 0.6.3
astro: 1.0.0-beta.27
node: 18.1.0
npm: 8.8.0

Hi!

In an .astro file front-matter, I have:
import test from '/src/images/test.jpg';

and below in the HTML:
<img src={test}>

When running with npm run dev, the IMG src is set to /assets [email protected] (ie. a tab character instead of the string /t).

Doing a build produces the src //assets [email protected].

Same issue, but now with an extra forward slash for some reason.

Missing "./components" export in "astro-imagetools" package

Looks like the exports from this package may have a bug or am I doing something wrong? Thought I would put a issue just incase anyone else may be having the same problem as me.

Additional Info

Node Version
v16.13.0

package.json

{
  "name": "@example/starter",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "devDependencies": {
    "astro": "^1.0.0-beta.5"
  },
  "dependencies": {
    "astro-imagetools": "^0.4.1"
  }
}

My Import looks like this

---
import { Img } from "astro-imagetools/components";
---

global configuration of the component

Is there a way to set some options globally?

Reading the documentation it seems i would have to set the breakpoints and desired image formats every time i use the component. Maybe i am missing something?

Unexpected Token

I get the following 500 error.

'''
Parse failure: Unexpected token (49:8)
Contents of line 49: ""2022-02-15T10:23:36.821Z"": JSON.stringify(new Date().toISOString()),

Error: Parse failure: Unexpected token (49:8)
Contents of line 49: ""2022-02-15T10:23:36.821Z"": JSON.stringify(new Date().toISOString()),
at ssrTransform (C:\Users\rnwol\workspace\astro-throughputfocus-com\node_modules\vite\dist\node\chunks\dep-3d5f2596.js:52118:15)
at doTransform (C:\Users\rnwol\workspace\astro-throughputfocus-com\node_modules\vite\dist\node\chunks\dep-3d5f2596.js:53035:48)
'''

Using:
"astro": "^0.23.0-next.6",
"astro-imagetools": "^0.0.16",

On MS-Windows 10

Top-level await is currently not supported with the "cjs" output format

I get this error when trying to serve or build the astro project with astro-imagetools:
..node_modules/astro-imagetools/plugin/index.js:11:48: ERROR: Top-level await is currently not supported with the "cjs" output format

Astro version: 1.0.0-beta.14
astro-imagetools version: 0.5.6

astro.config.ts

import { defineConfig } from 'astro/config';
import astroImagePlugin from "astro-imagetools/plugin";

export default defineConfig({
  vite: {
    plugins: [astroImagePlugin],
  },
});

tsconfig.json

{
  "compilerOptions": {
    "module": "ES2022",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
  }
}

Does someone know what might be causing the error?

Feature (very low priority): CSS for placeholder

Haven't investigated the code, but would it be possible to adjust the CSS of the transitions of the placeholders? I just fiddled with the tracedSVG placeholder (which is great), and I thought of the opportunity to be able to apply a filter: for recoloring the black and white.

Noticed a long time ago that Gatsby's Image tracedSVG placeholder was black and white as well, so was curious if there is a major limitation with this.

Missing astroViteConfigs.js reported with latest v0.6.4

Hi,

thank you for this plugin it is really needed!

I have encountered error ENOENT: no such file or directory, open '...../astroViteConfigs.js' when running the latest v0.6.4 with astro 1.0.0-beta.27. I have used a plain installation with react and tailwindintegrations. and my config looks like this:

import { defineConfig } from 'astro/config';
import react from "@astrojs/react";
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";

import { astroImageTools } from "astro-imagetools";

// https://astro.build/config
export default defineConfig({
  integrations: [react(), tailwind(), sitemap(), astroImageTools],
  experimental: {
    integrations: true
  }
});

when rolling back to v0.6.3 this error is not reported.

Docs example shows `includeSourceFormat` property, but that doesn't exist

The first example in https://astro-imagetools-docs.vercel.app/en/components/Img#formatoptions

Generate webmanifest images

I'm trying to use this plugin to generate a favicon and webmanifest icons and I come to this working solution:

First of all I import the icon in different sizes without using the import result anywhere (so the icons will get generated in different sizes):

---
import Favicon from '../assets/logo.png?w=64&format=ico';
import Icon48 from '../assets/logo.png?w=48&format=png';
import Icon72 from '../assets/logo.png?w=72&format=png';
import Icon96 from '../assets/logo.png?w=96&format=png';
import Icon144 from '../assets/logo.png?w=144&format=png';
import Icon168 from '../assets/logo.png?w=168&format=png';
import Icon192 from '../assets/logo.png?w=192&format=png';

---
<html lang={locale}>
<head>
        ....
	<link rel="manifest" href="manifest.webmanifest" />
	<link rel="icon" type="image/x-icon" href={Favicon} />
</head>
<body>
...
</body>
</html>

Then I get the filename from the filesystem and use it in the (static) manifest.webmanifest file:

{
    ...
    "icons": [{
      "src": "/assets/[email protected]",
      "sizes": "48x48",
      "type": "image/png"
    }, {
      "src": "/assets/[email protected]",
      "sizes": "72x72",
      "type": "image/png"
    }, {
      "src": "/assets/[email protected]",
      "sizes": "96x96",
      "type": "image/png"
    }, {
      "src": "/assets/[email protected]",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/assets/[email protected]",
      "sizes": "168x168",
      "type": "image/png"
    }, {
      "src": "/assets/[email protected]",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }

This is working pretty good, however it would be nice to inject the asset path instead of copying it to the static webmanifest ifle. As far as I see, astro does not support any static generated non-html routes, otherwise it would be very easy to just create a manifest.webmanifest.astro page and generate it here

Does anyone have an idea, how to create webmanifest icon paths more easily?

Image height="NaN"

My html is writing my images with a height=NaN anyone seen this?

my code:
<Image src="/src/ales-nesetril-Im7lZjxeLhg-unsplash.jpg" alt="" placeholder="none" fadeInTransition="false" formats="avif,webp,jpg" breakpoints={[300, 600, 900, 1200, 1500]} objectFit="cover" layout="fill" />

html excerpt:

<source
  srcset="/assets/asset.617d1828.avif 300w, /assets/asset.7ab93e77.avif 600w, /assets/asset.9b2b83ec.avif 900w, /assets/asset.48a66d87.avif 1200w, /assets/asset.e0f0869a.avif 1500w"
  sizes="(min-width: 1500px) 1500px, 100vw"
  width="1500"
  height="NaN"
  type="image/avif"
/>

Peer dependency version issues when using with Astro 1.0.0-beta.x versions

npm ERR! Could not resolve dependency:
npm ERR! peer astro@">=0.23.0" from [email protected]
npm ERR! node_modules/astro-imagetools
npm ERR! astro-imagetools@"^0.4.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/astro
npm ERR! peer astro@">=0.23.0" from [email protected]
npm ERR! node_modules/astro-imagetools
npm ERR! astro-imagetools@"^0.4.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Build not working

Build mode is erroring out for me.

The Image import alone throws the error: import Image from "astro-imagetools"; with or without including it in the component. I've updated to all latest node packages, experimental flag gives same error, and it works fine in dev mode. Have no idea how to troubleshoot.

Error:

'createHash' is not exported by __vite-browser-external, imported by node_modules/imagetools-core/dist/index.mjs
file: /home/kyle/Software/CarbideSawTool/node_modules/imagetools-core/dist/index.mjs:2:9
1: import sharp from 'sharp';
2: import { createHash } from 'crypto';
            ^
3: 
4: const METADATA = Symbol('image metadata');
Error: 'createHash' is not exported by __vite-browser-external, imported by node_modules/imagetools-core/dist/index.mjs
    at error (/home/kyle/Software/CarbideSawTool/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/home/kyle/Software/CarbideSawTool/node_modules/rollup/dist/shared/rollup.js:12477:16)
    at Module.traceVariable (/home/kyle/Software/CarbideSawTool/node_modules/rollup/dist/shared/rollup.js:12835:29)

Defining buildOptions.site with subdirectory causes build error

Config and output below.
site: 'https://example.com/poop' causes an error while building
site: 'https://example.com' compiles successfully

import { defineConfig } from 'astro/config';
import astroImagePlugin from 'astro-imagetools/plugin';
import vue from '@astrojs/vue';

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [astroImagePlugin],
  },
  integrations: [
    vue(),
  ],
	buildOptions: {
		site: 'https://example.com/poop',
	},
});

---
import Image from "astro-imagetools";
---
...
  <Image src="/src/images/logo.png" alt="" />
...

benji@arch ~/r/astro-template (master)> yarn build
yarn run v1.22.18
$ astro build
04:42:31 PM [build] Initial setup...
04:42:31 PM [build] Collecting page data...
04:42:32 PM [build] Completed in 0.89s
04:42:32 PM [build] Discovering entrypoints...

 building resources 

vite v2.8.6 building for production...
✓ 10 modules transformed.
dist/entry.d30964bf.js          0.50 KiB / gzip: 0.33 KiB
dist/entry.4bf0b79d.js          0.07 KiB / gzip: 0.08 KiB
dist/entry.00eff8b7.js          0.07 KiB / gzip: 0.08 KiB
dist/chunks/chunk.e3c415fd.js   50.71 KiB / gzip: 20.54 KiB
Completed in 470ms

04:42:32 PM [build] Building for SSR...
04:42:32 PM [build] Completed in 325ms

 generating static routes 

</> src/pages/index.astro
Image at /src/images/logo.png optimized in 29.518458999693394ms
    ┃ / +458ms
Completed in 471ms

Error: ENOENT: no such file or directory, open '/home/benji/redacted/astro-template/dist//poop/assets/asset.783fa4b2.png'

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Allow global breakpoints for markdown images

I don't see any way in the docs to specify a set of breakpoints to use for simple markdown images. Is it possible? I tried adding an astro-imagetools.config.mjs like this:

import { defineConfig } from "astro-imagetools/config";

export default defineConfig({
  breakpoints: [576, 768, 992, 1200],
});

But it seemed to have no effect.

Plugin changes IMG src

Platform: Windows
astro-imagetools: 0.6.3
astro: 1.0.0-beta.27
node: 18.1.0
npm: 8.8.0

Hi!

astro-imagetools messes with IMG sources, even when it's not being directly used.

In an .astro front-matter, I have:
import test from '/src/images/test.jpg';

and below in the HTML:
<img src={test}>

When running with npm run dev, the IMG src is set to /assets [email protected]

I would not expect astro-imagetools to mess with the src when a regular IMG element is being used. If I take the plugin out of the integrations list in astro.config.mjs, the IMG src is /src/images/test.jpg, and works as intended.

404 on image with multiple instances

When I have multiple instances of the same Image, some will result in a 404.
https://astro-image-test.netlify.app/

Picture component does not accept empty "alt" property

Issue description

I'm using a Picture element like this

<Picture
  src="/src/path-to-image"
  alt=""
/>

Which throws the following error

 error   The "alt" property is required by Picture
    at /node_modules/astro-imagetools/utils/filterConfigs.js:20:13
    at Array.forEach (<anonymous>)
    at Module.filterConfigs [as default] (/node_modules/astro-imagetools/utils/filterConfigs.js:18:19)
    at Module.getFilteredProps [as default] (/node_modules/astro-imagetools/utils/getFilteredProps.js:76:43)
    at Module.renderPicture [as default] (/node_modules/astro-imagetools/api/renderPicture.js:12:63)
    at /Users/fabian/test/node_modules/astro-imagetools/components/Picture.astro:5:0
    at renderToString (/node_modules/astro/dist/runtime/server/index.js:342:27)
    at Module.renderComponent (/node_modules/astro/dist/runtime/server/index.js:125:26)

This does not happen if the "alt" property has text.

According to MDN setting the alt text to "" should be completely acceptable behavior:

Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content (it's decoration or a tracking pixel), and that non-visual browsers may omit it from rendering. Visual browsers will also hide the broken image icon if the alt is empty and the image failed to display.

Technical details

Astro version: 1.0.0-beta.17
Astro imagetools version: 0.5.8
Node version: 17.2.0
Operating System: macOS Monterey 12.3

Abnormally high resource usage and slow builds

I'm noticing high CPU and RAM usage when building using version >0.5.3.

I've tested most versions from 0.5.1-0.5.8 (latest) and 0.5.2/0.5.3 seem to be the fastest, with version 0.5.1 being a close second.

Each time after I get the last "Image at xxx optimized in yyyms", I get a "Completed in xx." and then the CPU spikes. No transformed images are written to the build dir at that point, This last "step" takes much more time than the rest of the build when in finishes. Emphasis on when because I've had to forcibly terminate the build a couple of times. Using versions above 0.5.5 (I think) dramatically worsens the effect.

On the latest version, this last "step" pushes my CPU to 100% and I've noticed it take as much as 9.5GB of RAM. (For reference I have a desktop computer with a 6 core/12 thread i7 8700K and 16GBs of RAM). Initially I thought it was an issue with Windows so I rebooted to my Linux install and tried it there.... It crashed my desktop environment and I got kicked back to the login screen.

Something of note, later versions also throw an error only on Windows when building basically anything else apart from avif files. I don't know if these are caused by the same issue (earlier versions are ok).

I'd also like to note what I'm trying to do:
I am working on a blog website that uses wordpress as a CMS. I'm currently only using the Picture component passing the src attribute as a URL. The blog currently has <50 images.

Request: Fallback for Disabled JS

Issue

Currently if the user has disabled JS then the placeholder blurred image will remain stacked on top of the actual image even after it has finished loading. Thus the image remains blurry.

Reason

The component is using the onload event to hide the placeholder, however this won't run if the user has disabled JS.

astro-imagetools/utils/getImg.js

Lines 36 to 43 in e38ff11

  ? `onerror="parentElement.style.setProperty('--z-index', ${ 

  isBackgroundImage ? "-2" : "-1" 

  })" 

  onload="${ 

  fadeInTransition 

  ? `parentElement.style.setProperty('--opacity', 0)` 

  : "" 

  }"

Possible Solution

A possible solution would be:

Have the initial styling state be that the placeholder is hidden (or stacked below the image). Either by setting the z-index or opacity values, i.e. opacity: 0;.
Then use the onloadstart event to set the styles required to show the placeholder (as it currently is). i.e. opacity: 1;.
The existing onload event shouldn't need changing.

That should work for users with disabled JS but still provide the current fade in effect for everyone else.

I would suspect that the preferred approach might be to use z-index over opacity because then the image will load on top of the blurred placeholder, thus the placeholder still serves some purpose.

Thanks for awesome project by the way 😄

Build error on netlify when image component is in vue slot

If I import a Vue component for my carousel wrap and nest the image component, I get a build error on Netlify. Local the build runs without error. any idea what this could be?

<CarouselWrap client:idle>
    {allServices.map((service) => (
      <div class="flex carousel__slide">
        <div class="text-left">
          <Markdown>{service.intro}</Markdown>
          <a href={service.url} class="btn btn-pink">
            {service.title}
          </a>
        </div>

        <div class="gallery-grid">
          {service.gallery[0] && (
            <div >
              <Image
                src={service.gallery[0].thumbnail}
                alt={service.gallery[0].alt}
                breakpoints={[320, 460, 680]}
              />
            </div>
          )}

          {service.gallery[1] && (
            <div>
              <Image
                src={service.gallery[1].thumbnail}
                alt={service.gallery[1].alt}
                breakpoints={[320, 460, 680]}
              />
            </div>
          )}
          
        </div>
      </div>
    ))}
  </CarouselWrap>

error on netlify

astro:build Vite started   0.9s
11:05:21 AM: wasm://wasm/0027ed9a:1
11:05:21 AM: RuntimeError: null function or function signature mismatch
11:05:21 AM:     at wasm://wasm/0027ed9a:wasm-function[293]:0x13550
11:05:21 AM:     at wasm://wasm/0027ed9a:wasm-function[300]:0x14277
11:05:21 AM:     at Go._resume (file:///opt/build/repo/node_modules/@astrojs/compiler/node/wasm_exec.js:374:28)
11:05:21 AM:     at file:///opt/build/repo/node_modules/@astrojs/compiler/node/wasm_exec.js:384:16
11:05:21 AM:     at new Promise (<anonymous>)
11:05:21 AM:     at syscall/js.valueNew (file:///opt/build/repo/node_modules/@astrojs/compiler/node/wasm_exec.js:274:54)
11:05:21 AM:     at wasm://wasm/0027ed9a:wasm-function[321]:0x155e8
11:05:21 AM:     at wasm://wasm/0027ed9a:wasm-function[825]:0x6e2a0
11:05:21 AM:     at wasm://wasm/0027ed9a:wasm-function[293]:0x13550
11:05:21 AM:     at wasm://wasm/0027ed9a:wasm-function[300]:0x14277
11:05:21 AM: 
11:05:21 AM: ────────────────────────────────────────────────────────────────
11:05:21 AM:   "build.command" failed                                        
11:05:21 AM: ────────────────────────────────────────────────────────────────

Usage with images from public folder

Is it possible to use this plugin for images from /public folder?

Is this connected to RafidMuhymin/astro-image-demo/issues/1 ?

Errors on build/dev

node: 16.13.0 (Currently using 64-bit executable)
npm: 8.1.0
Windows 10

> astro dev --verbose

  astro:cli --verbose flag enabled! Enabling: DEBUG="*,-babel" +0ms
  astro:cli Tip: Set the DEBUG env variable directly for more control. Example: "DEBUG=astro:*,vite:* astro build". +3ms
 > node_modules/@astropub/codecs/dist/codecs.js:7:34: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    7 │ const fetch = globalThis.fetch || await import('@astropub/webapi').then(webapi => webapi.fetch, (... 
      ╵                                   ~~~~~

 > node_modules/@astropub/codecs/dist/codecs.js:1:25: error: Could not resolve "node:process" (mark it as external to exclude it from the bundle)
    1 │ import * as process from 'node:process'
      ╵                          ~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/codecs.js:7:109: error: Could not resolve "node:fs/promises" (mark it as external to exclude it from the bundle, or add ".catch()" to handle the failure at run-time)
    7 │ ...mport('@astropub/webapi').then(webapi => webapi.fetch, () => import('node:fs/promises').readFile) 
      ╵                                                                        ~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/avif/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/transform/blurhash/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/wp2/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/png/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/jpg/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/webp/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/jxl/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/avif/codec.js:16:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    16 │ const wasmDecode = await esmDecode.ready.then(exports => exports.decode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/transform/blur/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/transform/resize/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
    1 │ import * as thread from 'node:worker_threads'
      ╵                         ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/png/codec.js:5:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    5 │ const encdecWasm = await readFile(new URL('./png-enc-dec.wasm', import.meta.url))
      ╵                    ~~~~~

 > node_modules/@astropub/webapi/mod.js:1:75: error: Could not resolve "node:timers" (mark it as external to 
exclude it from the bundle)
    1 │ import { setTimeout as setTimeout$1, clearTimeout as clearTimeout$1 } from 'node:timers';
      ╵                                                                            ~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/avif/codec.js:17:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    17 │ const wasmEncode = await esmEncode.ready.then(exports => exports.encode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/jxl/codec.js:16:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    16 │ const wasmDecode = await esmDecode.ready.then(exports => exports.decode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/jxl/codec.js:17:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    17 │ const wasmEncode = await esmEncode.ready.then(exports => exports.encode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/transform/resize/codec.js:6:16: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    6 │ const asmData = await readFile(asmPath)
      ╵                 ~~~~~

 > node_modules/@astropub/codecs/dist/wp2/codec.js:16:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    16 │ const wasmDecode = await esmDecode.ready.then(exports => exports.decode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/jpg/codec.js:16:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    16 │ const wasmDecode = await esmDecode.ready.then(exports => exports.decode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/png/codec.js:6:21: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    6 │ const optimizeWasm = await readFile(new URL('./png-optimize.wasm', import.meta.url))
      ╵                      ~~~~~

 > node_modules/@astropub/codecs/dist/webp/codec.js:16:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    16 │ const wasmDecode = await esmDecode.ready.then(exports => exports.decode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/transform/resize/codec.js:8:0: error: Top-level await is not available 
in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    8 │ await codec.default(asmData)
      ╵ ~~~~~

 > node_modules/@astropub/codecs/dist/wp2/codec.js:17:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    17 │ const wasmEncode = await esmEncode.ready.then(exports => exports.encode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/jpg/codec.js:17:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    17 │ const wasmEncode = await esmEncode.ready.then(exports => exports.encode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/webp/codec.js:17:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    17 │ const wasmEncode = await esmEncode.ready.then(exports => exports.encode)
       ╵                    ~~~~~

 > node_modules/@astropub/codecs/dist/png/codec.js:8:0: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    8 │ await encdec.default(encdecWasm)
      ╵ ~~~~~

 > node_modules/@astropub/codecs/dist/png/codec.js:9:0: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
    9 │ await optimize.default(optimizeWasm)
      ╵ ~~~~~

 > node_modules/@astropub/webapi/mod.js:2:17: error: Could not resolve "node:http" (mark it as external to exclude it from the bundle)
    2 │ import http from 'node:http';
      ╵                  ~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/avif/codec.js:1:29: error: Could not resolve "node:fs" (mark it as external to exclude it from the bundle)
    1 │ import { readFileSync } from 'node:fs'
      ╵                              ~~~~~~~~~

 > node_modules/@astropub/codecs/dist/jxl/codec.js:1:29: error: Could not resolve "node:fs" (mark it as external to exclude it from the bundle)
    1 │ import { readFileSync } from 'node:fs'
      ╵                              ~~~~~~~~~

 > node_modules/@astropub/codecs/dist/png/codec.js:1:25: error: Could not resolve "node:fs/promises" (mark it as external to exclude it from the bundle)
    1 │ import { readFile } from 'node:fs/promises'
      ╵                          ~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/transform/resize/codec.js:2:25: error: Could not resolve "node:fs/promises" (mark it as external to exclude it from the bundle)
    2 │ import { readFile } from 'node:fs/promises'
      ╵                          ~~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/codecs/dist/wp2/codec.js:1:29: error: Could not resolve "node:fs" (mark it as external to exclude it from the bundle)
    1 │ import { readFileSync } from 'node:fs'
      ╵                              ~~~~~~~~~

 > node_modules/@astropub/codecs/dist/webp/codec.js:1:29: error: Could not resolve "node:fs" (mark it as external to exclude it from the bundle)
    1 │ import { readFileSync } from 'node:fs'
      ╵                              ~~~~~~~~~

 > node_modules/@astropub/codecs/dist/jpg/codec.js:1:29: error: Could not resolve "node:fs" (mark it as external to exclude it from the bundle)
    1 │ import { readFileSync } from 'node:fs'
      ╵                              ~~~~~~~~~

 > node_modules/@astropub/webapi/mod.js:3:18: error: Could not resolve "node:https" (mark it as external to exclude it from the bundle)
    3 │ import https from 'node:https';
      ╵                   ~~~~~~~~~~~~

 > node_modules/@astropub/webapi/mod.js:4:17: error: Could not resolve "node:zlib" (mark it as external to exclude it from the bundle)
    4 │ import zlib from 'node:zlib';
      ╵                  ~~~~~~~~~~~

 > node_modules/@astropub/webapi/mod.js:5:60: error: Could not resolve "node:stream" (mark it as external to 
exclude it from the bundle)
    5 │ import Stream, { PassThrough, pipeline as pipeline$1 } from 'node:stream';
      ╵                                                             ~~~~~~~~~~~~~

 > node_modules/@astropub/webapi/mod.js:6:44: error: Could not resolve "node:util" (mark it as external to exclude it from the bundle)
    6 │ import { promisify, deprecate, types } from 'node:util';
      ╵                                             ~~~~~~~~~~~

 > node_modules/@astropub/webapi/mod.js:7:35: error: Could not resolve "node:url" (mark it as external to exclude it from the bundle)
    7 │ import { format as format$1 } from 'node:url';
      ╵                                    ~~~~~~~~~~

 > node_modules/@astropub/webapi/mod.js:8:21: error: Could not resolve "node:net" (mark it as external to exclude it from the bundle)
    8 │ import { isIP } from 'node:net';
      ╵                      ~~~~~~~~~~

 > node_modules/@astropub/webapi/mod.js:9:28: error: Could not resolve "node:perf_hooks" (mark it as external to exclude it from the bundle)
    9 │ import { performance } from 'node:perf_hooks';
      ╵                             ~~~~~~~~~~~~~~~~~

 > node_modules/@astropub/webapi/mod.js:7844:26: error: Could not resolve "node:fs" (mark it as external to exclude it from the bundle, or add ".catch()" to handle the failure at run-time)
    7844 │             return import('node:fs').then(fs => {
         ╵                           ~~~~~~~~~

Error: Build failed with 45 errors:
node_modules/@astropub/codecs/dist/avif/codec.js:1:29: error: Could not resolve "node:fs" (mark it as external to exclude it from the bundle)
node_modules/@astropub/codecs/dist/avif/codec.js:16:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
node_modules/@astropub/codecs/dist/avif/codec.js:17:19: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
node_modules/@astropub/codecs/dist/avif/thread.js:1:24: error: Could not resolve "node:worker_threads" (mark 
it as external to exclude it from the bundle)
node_modules/@astropub/codecs/dist/codecs.js:1:25: error: Could not resolve "node:process" (mark it as external to exclude it from the bundle)
...
    at failureErrorWithLog (C:\SITES\bliss-astro-netlify\node_modules\esbuild\lib\main.js:1493:15)
    at C:\SITES\bliss-astro-netlify\node_modules\esbuild\lib\main.js:1151:28
    at runOnEndCallbacks (C:\SITES\bliss-astro-netlify\node_modules\esbuild\lib\main.js:941:63)
    at buildResponseToResult (C:\SITES\bliss-astro-netlify\node_modules\esbuild\lib\main.js:1149:7)
    at C:\SITES\bliss-astro-netlify\node_modules\esbuild\lib\main.js:1258:14
    at C:\SITES\bliss-astro-netlify\node_modules\esbuild\lib\main.js:629:9
    at handleIncomingPacket (C:\SITES\bliss-astro-netlify\node_modules\esbuild\lib\main.js:726:9)
    at Socket.readFromStdout (C:\SITES\bliss-astro-netlify\node_modules\esbuild\lib\main.js:596:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12)
The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run start" terminated with exit code: 1.

url.fileURLToPath is not a function

During builds, I see an error of:

 error   url.fileURLToPath is not a function
    at file:///Users/ianvs/code/defined/www/dist/chunks/chunk.fd876c28.mjs:86:22
    at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async getSrcset (file:///Users/ianvs/code/defined/www/dist/entry.mjs?time=1652105392997:3289:31)
    at async file:///Users/ianvs/code/defined/www/dist/entry.mjs?time=1652105392997:5344:22
    at async Promise.all (index 0)
    at async getImageSources (file:///Users/ianvs/code/defined/www/dist/entry.mjs?time=1652105392997:5342:19)
    at async Promise.all (index 0)
    at async getImage (file:///Users/ianvs/code/defined/www/dist/entry.mjs?time=1652105392997:6986:42)

I'm using node v16.14.2. If I change the import to import { fileURLToPath } from "node:url"; in plugin/index.js, it works fine.

overly verbose logging

could you please reduce the unnecessary verbose logging generated by:

astro-imagetools/src/component/utils/renderImage.js

Line 52 in 422fcb7

console.log(`Image at ${src} optimized in ${end - start}ms`);

or make it an optional feature behind a 'debug/benchmark' flag.

unfortunately this is not only a cosmetic issue, but a behavior, which can be very annoying, if you want/need to utilize simple logging yourself in the development process but the relevant output becomes nearly invisible and always needs manual back scrolling on the terminal because of all this "Image at ... optimized in ... ms" lines.

404 on images after build

It looks like the hash is different.

after build, in browser (404):
/assets/[email protected]

in the dist/assets folder:
/assets/[email protected]

Build Error using <Image> component : "TypeError: Cannot destructure property 'getImageDetails'..."

Hi, thanks for this cool plugin.
I want to report this bug that blocks my site build.

Astro-imagetools : 0.3.1
Astro : 0.25.2
Node : v17.8.0

Here is the build command output:

❯ npm run build

> [email protected] build
> astro build

13:35:00 [config] Set "buildOptions.site" to generate correct canonical URLs and sitemap
13:35:00 [build] Initial setup...
13:35:00 [build] Collecting page data...
13:35:02 [build] Completed in 2.72s
13:35:02 [build] Discovering entrypoints...

 building resources 

vite v2.8.6 building for production...
✓ 22 modules transformed.
dist/entry.ef0858d2.js   128.75 KiB / gzip: 41.47 KiB
Completed in 0.77s

13:35:03 [build] Building for SSR...
13:35:09 [build] Completed in 5.46s

 generating static routes 

TypeError: Cannot destructure property 'getImageDetails' of '(intermediate value)' as it is undefined.
    at file:///home/xxx/Documents/dev/new-site/dist/entry.mjs?time=1648380909120:3271:26

I have tracked the error to this snippet :

astro-imagetools/src/component/utils/getProcessedImage.js

Lines 26 to 29 in ffe6f1a

 const { getImageDetails } = await (sharp 

 ? import("./imagetools.js") 

 : import("./codecs.js"));

Any idea what could be the problem ?

Placeholder image is too large

I'm finding that the placeholder image is taller than the actual image, which makes it transition a bit strange. Notice the strip at the bottom here:

I tried to create a stackblitz, but it seems that I can't upload images, and it won't load remote images either...

	? `onerror="parentElement.style.setProperty('--z-index', ${
	isBackgroundImage ? "-2" : "-1"
	})"
	onload="${
	fadeInTransition
	? `parentElement.style.setProperty('--opacity', 0)`
	: ""
	}"

	const { getImageDetails } = await (sharp
	? import("./imagetools.js")
	: import("./codecs.js"));