@konsumer/image

image

Use the minimum amount of data to get info about an image.

These image-types are supported:

• BMP
• CUR
• DDS
• GIF
• ICNS
• ICO
• J2C
• JP2
• JPEG
• KTX
• PNG
• PNM (PAM, PBM, PFM, PGM, PPM)
• PSD
• SVG
• TGA
• TIFF
• WebP

Features

• You are not locked into nodejs or the browser or anything. This can be used in many environments (node, browser, deno, bun, Cloudflare workers, etc.)
• Grabs the smallest amount of bytes from an image as possible, and get the most info possible. This means it's fast, light, and doesn't take a lot of RAM. 1 byte is enough to basically detect format. 20 bytes is enough to get height/width, color information, and more, for most image formats.
• No external dependencies. Just add the single file to your project and use it.
• Published as ESM and CommonJS module for easy use, everywhere.
• It works with all kinds of things, like Buffer, ArrayBuffer, Uint8Array, or any array of unsigned integers (representing bytes.)
• Use it with fetch or your favorite HTTP library.

Installation

nodejs / build-system

npm i @konsumer/image

Usage

There are 3 exported functions:

• info(bytes) - synchronous, use bytes to get as much info as possible. Here is a server-side example that uses it, but it also works in the browser.
• infoFetch(url) - asynchronous, calls fetch to download very little data, and gets info. Here is a server-side demo, and here is browser-demo.
• infoFetchNoCors(url) - asynchronous, Similar to infoFetch, but only for browser. It will get less info, and only supports images that your browser supports, but it can get height/width even when CORS would stop you. Here is an example usage.

Note: You only really need info(url), and it's the default export, because it detects a URL (string param) and will try to call infoFetch(url) / infoFetchNoCors(url).

current nodejs / bun

import imagemeta from '@konsumer/image'
console.log(await imagemeta('https://placekitten.com/200/200'))

You can see a demo here.

deno

import imagemeta from 'npm:@konsumer/image'
console.log(await imagemeta('https://placekitten.com/200/200'))

older nodejs

const imagemeta = require('@konsumer/image')

// if your node doesn't have fetch
global.fetch = require('node-fetch')

imagemeta('https://placekitten.com/200/200')
  .then(console.log)

browser-only

<script type=module>
import imagemeta from 'https://cdn.skypack.dev/@konsumer/image'
console.log(await imagemeta('https://placekitten.com/200/200'))
</script>

You can see a demo here.

TODO

• I need to clean up & normalize the data, and get more info about every format.
• Make a top-level DataView and use it for everything (similar to Buffer, no buffer utils needed.) See jpeg for example.
• Also get mime, url, and filesize (on URLS)

Thanks

• I got a lot of the image byte-parsing stuff from image-size
• jpeg-header seemed to be the most reliable JPEG parsing I have found, in JS.