Resize Image to Base64: Shrink First, Encode Second

Base64 encoding makes every image about 33% larger than the original file. A 2 MB photo becomes a 2.7 MB string — and that string lives inside your HTML, your CSS, or your JSON payload. The single most effective way to keep base64 payloads manageable is to resize the image before encoding, not after.

Why resize before encoding?

Three constraints make oversized base64 strings fail in real projects:

• Hard payload limits. Databases (MySQL TEXT columns), APIs, and CMS fields often cap string length. An image that's "fine" as a file can exceed the limit as a string.
• Rendering performance. An <img> tag with a 1 MB data URI blocks the HTML parser while the browser decodes it. There's no separate caching and no lazy loading for inline images.
• Email and CMS restrictions. Many email clients and CRMs silently strip or truncate very large embedded images.

If you need to check whether your payload fits, our base64 image size calculator shows the exact encoded size for any input — useful before you paste a string into a size-limited field.

How small should you go?

Resizing to the display dimensions is the biggest win: a logo displayed at 64×64 px doesn't need a 1024×1024 source. Dropping from 1024 px to 256 px on each side removes roughly 94% of the pixels.

Resize and encode in one step (browser JavaScript)

You don't need a separate image editor. The canvas API resizes and encodes in one pass:

async function resizeImageToBase64(file, maxWidth, maxHeight, quality = 0.85) {
  const bitmap = await createImageBitmap(file);
  const scale = Math.min(
    maxWidth / bitmap.width,
    maxHeight / bitmap.height,
    1 // never upscale
  );
  const canvas = new OffscreenCanvas(
    Math.round(bitmap.width * scale),
    Math.round(bitmap.height * scale)
  );
  canvas.getContext("2d").drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  const blob = await canvas.convertToBlob({ type: "image/jpeg", quality });
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result); // data:image/jpeg;base64,...
    reader.readAsDataURL(blob);
  });
}

// Usage: cap at 256×256, output ~85% JPEG quality
const dataUri = await resizeImageToBase64(fileInput.files[0], 256, 256);

Note the two independent levers: dimensions (the scale factor) and quality (the JPEG/WebP quality value). For photos, dropping quality from 100% to 80–85% typically halves the size with no visible difference; for PNG graphics with sharp edges, keep PNG and resize dimensions instead.

No-code alternative

Paste or drop your image into the image to base64 converter — resize and compress options included, the encoded string updates live, and you can copy the data URI, HTML tag, or CSS declaration directly. For image-heavy workflows where base64 is the wrong tool, compare approaches in online vs local base64 conversion.

When not to resize — when to skip base64 entirely

If the source image is over ~30 KB even after resizing, a regular file with HTTP caching almost always outperforms an inline string: the browser caches it, lazy-loads it, and keeps your HTML readable. Base64 is the right call when the constraint is self-containment — single-file HTML, email signatures, offline documents — not raw performance. For already-compressed sources, see our guides on compressing JPG to base64 and compressing PNG to base64.

Frequently asked questions

Related: Base64 size calculator · image to base64 converter · compress JPG to base64 · compress PNG to base64.