https://github.com/qwikdev/qwik-image

Qwik Image Component
https://github.com/qwikdev/qwik-image

core-web-vitals image optimization

Last synced: 1 day ago
JSON representation

Qwik Image Component

• Host: GitHub
• URL: https://github.com/qwikdev/qwik-image
• Owner: QwikDev
• License: mit
• Created: 2023-04-21T08:59:51.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-25T10:48:58.000Z (about 2 months ago)
• Last Synced: 2025-01-14T20:19:57.989Z (7 days ago)
• Topics: core-web-vitals, image, optimization
• Language: TypeScript
• Homepage:
• Size: 6.52 MB
• Stars: 55
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        





  

  


  






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](https://github.com/QwikDev/qwik-image/blob/main/assets/qwik-image-showcase.gif?raw=true)

## 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

```

```

## 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';`