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 🤯 )

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

background: 'rgba(37,99,235,1)';

background: 'linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(166,206,247,1) 0%, rgba(37,99,235,1) 83%);';

background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNUTX59BgAEaQJBWyqr7QAAAABJRU5ErkJggg==")';

background: 'url("/public/placeholder.jpg") no-repeat center / cover';