Qwik Image Component

The goal is a component to support performant images on the web and automatic image optimization. That will be built as a pluggable component so devs could connect different image loaders to it (like builder.io or Cloudinary)

Showcase ( network Slow 3G 🤯 )

qwik-image-showcase

Installation

npm install qwik-image
or
yarn install qwik-image
or
pnpm install qwik-image

Usage

Global Provider (required)

const imageTransformer$ = $(({ src, width, height }: ImageTransformerProps): string => {
  return `${src}?w=${width}&h=${height}&format=webp`;
});

// Provide your default options
useImageProvider({
  // you can set this property to overwrite default values [640, 960, 1280, 1920, 3840]
  resolutions: [640],
  // you we can define the source from which to load our image
  imageTransformer$,
});

Image component

<Image
  layout="fixed"
  objectFit="cover"
  width="300"
  height="300"
  src={...}
  alt={...}
  placeholder={...}
/>

loading values:

Here is the loading values and behaviors https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading default: lazy

layout values:

`constrained`

If the width of the image is larger than the screen, the screen size is taken, otherwise the actual image size is kept

`fixed`

regardless of the screen width, the width of the image is kept

`fullWidth`

the width of the image is always equal to the width of the screen

objectFit values:

Here is the objectFit values and behaviors https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit default: cover

placeholder values:

You can define a placeholder to wait for the image to load. default: transparent

QwikDev / qwik-image

readme