different-ai/openwork · warning · Error

Use an image under 2 MB.

Error message

Use an image under 2 MB.

What it means

BRAND_ASSET_MAX_BYTES is 2 MB; createBrandAssetDraft rejects any file above this limit before decoding. The limit keeps uploads small, avoids memory pressure in createImageBitmap, and bounds storage in Den.

Source

Thrown at ee/apps/den-web/app/(den)/dashboard/_components/brand-appearance-screen.tsx:33

import { DenInput } from "../../_components/ui/input";
import { DenNotice } from "../../_components/ui/notice";
import { useOrgDashboard } from "../_providers/org-dashboard-provider";
import { EnterprisePlanNotice } from "./enterprise-plan-notice";

const BRAND_ASSET_MAX_BYTES = 2 * 1024 * 1024;

type BrandAssetKind = "logo" | "icon";

type BrandAssetDraft = {
  file: File;
  previewUrl: string;
  width: number;
  height: number;
};

async function createBrandAssetDraft(file: File, kind: BrandAssetKind): Promise<BrandAssetDraft> {
  if (file.type !== "image/png" && file.type !== "image/jpeg") throw new Error("Use a PNG or JPEG image.");
  if (file.size > BRAND_ASSET_MAX_BYTES) throw new Error("Use an image under 2 MB.");

  let image: ImageBitmap;
  try {
    image = await createImageBitmap(file);
  } catch {
    throw new Error("OpenWork could not decode that image.");
  }

  const { width, height } = image;
  image.close();
  if (width > 4096 || height > 4096) throw new Error("Use an image no larger than 4096×4096 pixels.");
  if (kind === "icon") {
    if (width < 64 || height < 64) throw new Error("Use a square icon at least 64×64 pixels.");
    if (width !== height) throw new Error("Use a square image for the app icon.");
  } else {
    const aspectRatio = width / height;
    if (width < 128 || height < 32) throw new Error("Use a wordmark at least 128×32 pixels.");
    if (aspectRatio < 1.5 || aspectRatio > 8) throw new Error("Use a horizontal wordmark between 1.5:1 and 8:1.");

View on GitHub (pinned to 2b7df46e8a)

Solutions

  1. Resize the image so it fits within the required dimensions (icon: square ≥64×64; wordmark: ≥128×32, ≤4096×4096) then re-export.
  2. Export as JPEG at quality ~80 for photographic wordmarks, or use PNG compression (tinypng, squoosh) for icons.
  3. Reduce color depth / remove alpha if PNG is bloated by photographic content — switch to JPEG.
  4. Check file size before upload (file.size < 2 * 1024 * 1024) so the error never surfaces.

Example fix

// before
const file = exportFromFigma({ scale: 4 }); // ~6 MB PNG
// after
const file = exportFromFigma({ scale: 1, format: "png", compress: true }); // < 2 MB
Defensive patterns

Strategy: validation

Validate before calling

const BRAND_ASSET_MAX_BYTES = 2 * 1024 * 1024;
if (file.size > BRAND_ASSET_MAX_BYTES) { alert("Please use an image under 2 MB."); return; }

Try / catch

try {
  const asset = await createBrandAssetDraft(file, kind);
} catch (error) {
  showToast(error instanceof Error ? error.message : "Could not use that image.");
}

Prevention

When it happens

Trigger: Uploading a PNG/JPEG icon or wordmark whose file.size exceeds 2 MB — e.g. a 4K-resolution logo export, a JPEG at maximum quality, or a PNG with photographic content.

Common situations: Exporting straight from design tools at full resolution (Figma 2x/3x exports of large frames); screenshots pasted as PNG; photos used as banners without compression.

Related errors


AI-assisted analysis of different-ai/openwork@2b7df46e8a (2026-09-01). Data as JSON: /api/errors/1ecac8514ed1fd44. Report an issue: GitHub.