@visualizevalue/img-grid 0.1.2 → 0.1.3

package/README.md

@@ -30,6 +30,8 @@ const highlightedBuffer = await grid(images, {
   highlight: ['img2', 'img3'], // Images with these IDs will be 2×2
   maxWidth: 1920, // Maximum width of output image
   concurrency: 10, // Maximum concurrent downloads
+  background: '#000', // Background and letterbox color
+  pixelated: true, // Nearest-neighbour resize — keeps pixel art crisp
   format: 'webp', // Output as png (default), jpeg, or webp
   quality: 80, // Quality for jpeg/webp
   onError: (img, err) => console.warn(`failed: ${img.url}`, err),
@@ -43,6 +45,7 @@ writeFileSync('grid.png', buffer)
 
 - Packs images into a compact, near-square grid
 - Supports highlighting specific images (makes them 2×2)
+- Optional nearest-neighbour scaling to keep pixel art crisp (`pixelated`)
 - Downloads images concurrently (with a configurable limit)
 - Leaves a blank cell for failed downloads instead of failing the grid
 - Output as PNG, JPEG, or WebP
@@ -56,6 +59,7 @@ writeFileSync('grid.png', buffer)
 | `maxWidth`    | `1920`      | Maximum width of output image in pixels            |
 | `concurrency` | `10`        | Maximum concurrent image downloads                 |
 | `background`  | `'#000'`    | Background and letterbox color (any sharp color)   |
+| `pixelated`   | `false`     | Nearest-neighbour resize; keeps pixel art crisp    |
 | `format`      | `'png'`     | Output format: `'png'`, `'jpeg'`, or `'webp'`      |
 | `quality`     | sharp's     | Quality (1–100) for `jpeg`/`webp`; ignored for png |
 | `onError`     | `undefined` | `(img, error) => void` called when an image fails  |

package/dist/index.d.ts

@@ -12,6 +12,12 @@ export interface GridOptions {
     concurrency?: number;
     /** Background and letterbox color (any sharp-compatible color). */
     background?: string;
+    /**
+     * Resize with nearest-neighbour instead of the default smooth (lanczos)
+     * kernel. Keeps pixel art (e.g. NFTs) crisp instead of blurring it when
+     * scaled up. Like CSS `image-rendering: pixelated`.
+     */
+    pixelated?: boolean;
     /** Output image format. */
     format?: ImageFormat;
     /** Quality (1–100) for lossy formats (`jpeg`, `webp`); ignored for `png`. */

package/dist/index.js

@@ -19,7 +19,7 @@ const HIGHLIGHT_SPAN = 2;
  * `onError`) instead of failing the whole grid.
  */
 async function grid(images, opts = {}) {
-    const { highlight = [], maxWidth = DEFAULT_MAX_WIDTH, concurrency = DEFAULT_CONCURRENCY, background = DEFAULT_BACKGROUND, format = DEFAULT_FORMAT, quality, onError, } = opts;
+    const { highlight = [], maxWidth = DEFAULT_MAX_WIDTH, concurrency = DEFAULT_CONCURRENCY, background = DEFAULT_BACKGROUND, pixelated = false, format = DEFAULT_FORMAT, quality, onError, } = opts;
     const highlightIds = new Set(highlight);
     const isHighlighted = (img) => img.id !== undefined && highlightIds.has(img.id);
     const highlighted = images.filter(isHighlighted);
@@ -31,7 +31,7 @@ async function grid(images, opts = {}) {
     const cellSize = Math.max(1, Math.floor(maxWidth / columns));
     const layers = await mapWithConcurrency(placements, concurrency, async (placement) => {
         const size = cellSize * placement.span;
-        const cell = await renderCell(placement.img, size, background, onError);
+        const cell = await renderCell(placement.img, size, background, pixelated, onError);
         return {
             input: cell,
             left: placement.col * cellSize,
@@ -117,7 +117,7 @@ function pack(highlighted, normal, columns) {
     return { placements, rows: occupied.length };
 }
 /** Fetch and resize a single image; fall back to a blank cell on any failure. */
-async function renderCell(img, size, background, onError) {
+async function renderCell(img, size, background, pixelated, onError) {
     try {
         const response = await fetch(img.url, {
             signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
@@ -127,7 +127,11 @@ async function renderCell(img, size, background, onError) {
             throw new Error(`HTTP ${response.status} for ${img.url}`);
         const data = Buffer.from(await response.arrayBuffer());
         return await (0, sharp_1.default)(data)
-            .resize(size, size, { fit: 'contain', background })
+            .resize(size, size, {
+            fit: 'contain',
+            background,
+            ...(pixelated ? { kernel: 'nearest' } : {}),
+        })
             .png()
             .toBuffer();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/img-grid",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Generate an image grid (PNG, JPEG, or WebP) from image URLs (and highlight images).",
   "license": "MIT",
   "author": "Visualize Value",