https://github.com/gerhardsletten/responsiv-image-handler

Give it a image path and it returns responsive sizes, ratio, much like what is used in gatsby image component
https://github.com/gerhardsletten/responsiv-image-handler

Last synced: 7 days ago
JSON representation

Give it a image path and it returns responsive sizes, ratio, much like what is used in gatsby image component

• Host: GitHub
• URL: https://github.com/gerhardsletten/responsiv-image-handler
• Owner: gerhardsletten
• Created: 2021-01-25T08:28:36.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-25T11:37:23.000Z (almost 4 years ago)
• Last Synced: 2024-10-15T18:11:10.511Z (23 days ago)
• Language: JavaScript
• Homepage:
• Size: 1.87 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Responsiv image handler

`npm i responsiv-image-handler`

## Usage

```

const ImageHandler = require('responsiv-image-handler')

const { join } = require('path')

const handler = new ImageHandler({

  publicPath: '/images', // Images will be served from this directory on your website

  outputPath, join(__dirname, 'build/images') // Directory for where images as stored

  sizes: [320, 640, 960], 

  placeholderSize: 20,

  sizes = [320, 640, 960, 1100, 1600], // List of sizes you want to be generated for jpg/png and webp

  quality = 65, // Image size for generated images in jpg/png/webp

  placeholderSize = 40, // Size in pixel for base64 preview

})

// Clean outputPath and ensure directory exist

await handler.clear()

// Generate sizes for a image

const image = await handler.optimizeImagePath('src/image.jpg')

```

`image` will then look like this:

```

{

  height: 2908,

  width: 3882,

  name: "image",

  placeholder: "data:image/jpeg;base64,..",

  src: "/images/image-b124abd136fffe44501bac559c7dd89a-320.jpg",

  srcSet: "/images/image-b124abd136fffe44501bac559c7dd89a-320.jpg 320w, /images/image-b124abd136fffe44501bac559c7dd89a-640.jpg 640w, /images/image-b124abd136fffe44501bac559c7dd89a-960.jpg 960w",

  webpSrcSet: "/images/image-b124abd136fffe44501bac559c7dd89a-320.webp 320w, /images/image-b124abd136fffe44501bac559c7dd89a-640.webp 640w, /images/image-b124abd136fffe44501bac559c7dd89a-960.webp 960w"

}

```