Easy image optimization

It's a abstraction of image optimization using semantic html and optimization alghoritms with canvas, just give the source and get a optimized image in your selected resolutions to use as a component in your vue and react projects.

Features

• Optimize image
• Resize
• Provides a webp image
• Works on javascript-based projects

Instalation (Vue 3)

Install the project

  npm i @pedropmatt/easy-image-optimization

Import the script that will construct the component

  import "@pedropmatt/easy-image-optimization"

Just use it

  <opt-image :image-url="imageUrl" :resolutions="[200, 550, 1366]" />

Instalation (React)

I'm trying to improve this instalation

  npm i @pedropmatt/easy-image-optimization

Import the script that will construct the component

  useEffect(() => {
      import("@pedropmatt/easy-image-optimization")
  })

Just use it

  <opt-image :image-url="imageUrl" :resolutions="[200, 550, 1366]" />

Usage (Vue 3)

<script lang="ts" setup>
import "@pedropmatt/easy-image-optimization"

const imageUrl = computed(() => 'https://cdn.pixabay.com/photo/2023/12/14/07/44/dog-8448345_1280.jpg')
const resolutions = computed(() => [200, 550, 1366])
</script>

<template>
    <opt-image :image-url="imageUrl" :resolutions="resolutions" />
</template>

Usage (React)

React will be display an error on your IDE, but the component works, I've be working hard to solve this problem and improve the instalation

import { useEffect } from 'react'

const YourComponent = ({ imageUrl: string, resolutions: number[] | string[] }) => {
    useEffect(() => {
        import("@pedropmatt/easy-image-optimization")
    })

    return <opt-image image-url={imageUrl} :resolutions={resolutions} />
}

export default YourComponent

Contributing

It's my first lib, I'm very happy that you want to contribute :)

Welcome! I'm happy to receive contributions to improve this library. Your help is valuable to me and the possible community that we will construct.

See the contribution.md to start.

Roadmap

• Improve load image delay.

• Lazyloads, decoding and dynamic fetchpriority.

• Improve otimization using noise and alpha compose.

• Skeleton image.

• Improve instalation on projects.

• SSR support.

Autor

• @pedroMattos