@konsumer/image NPM

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)