How to Add Image in JSON: URL, Base64 & File Path Methods (2026)

Three ways to store an image reference in JSON: URL string, file path string, or base64-encoded data URI. Use URL for remote images, file path for local server-side apps, base64 for embedding images directly in the JSON payload.

Method 1: URL String

Store the image URL as a string value in your JSON object.

{
  "title": "Sample Image", 
  "image": "https://example.com/images/sample.jpg"
}

Best for remote images, CDN-hosted assets, anything already on a server. URL can break if the image is moved or server goes down.

Method 2: File Path

Reference the image with a local file path.

{
  "title": "Local Image",
  "image": "/assets/images/sample.jpg"
}

Or with a relative path:

{
  "title": "Local Image",
  "image": "./images/sample.jpg"
}

Best for server-side apps where the JSON and images live on the same machine. Path is environment-specific - doesn't work in client-side code.

Method 3: Base64 Encoding

Embed the image data directly as a base64 string with data URI prefix.

{
  "title": "Embedded Image",
  "image": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QAuRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAqADAAQAAAABAAAAAQAAAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyMjKC0fHB4oLC8vMjIyPC8zNDIyMDEyMjIyMjIyMjI//gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICD/2gAMAwEAAhEDEQA/AP3/AP/Z"
}

Generate base64 strings in Python:

import base64

with open("sample.jpg", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("utf-8")

print(f"data:image/jpeg;base64,{encoded}")

Or JavaScript:

const fs = require('fs');

const imageBuffer = fs.readFileSync('sample.jpg');
const base64String = imageBuffer.toString('base64');
const dataUri = `data:image/jpeg;base64,${base64String}`;

console.log(dataUri);

Best for embedding small icons or thumbnails directly in a payload, offline apps, cases where a single self-contained JSON file is needed. Base64 increases file size by ~33%. Not suitable for large images.

Comparison Table

Multiple Images

Use arrays for multiple images:

{
  "productName": "Wireless Headphones",
  "images": [
    "https://example.com/images/headphones-front.jpg",
    "https://example.com/images/headphones-side.jpg",
    "https://example.com/images/headphones-back.jpg"
  ]
}

Or with metadata:

{
  "productName": "Wireless Headphones",
  "images": [
    {
      "url": "https://example.com/images/headphones-front.jpg",
      "alt": "Front view of wireless headphones",
      "width": 800,
      "height": 600,
      "isPrimary": true
    },
    {
      "url": "https://example.com/images/headphones-side.jpg",
      "alt": "Side view of wireless headphones",
      "width": 800,
      "height": 600,
      "isPrimary": false
    }
  ]
}

Frequently Asked Questions

Can JSON store image data directly?

No, JSON is text-only and cannot store binary image bytes. You need to reference the image (URL or file path) or encode the bytes as text (base64). Base64 encoding converts binary data to a text string that JSON can carry.

What's the best way to include an image in a JSON API response?

Use a URL. It keeps payloads small, lets browsers cache images efficiently, and makes it easy to update images without changing the JSON. Store images on a CDN or server and reference them by URL in your JSON response.

How do I convert an image to base64 for JSON?

Use Python: base64.b64encode(open("image.jpg", "rb").read()).decode() or JavaScript: fs.readFileSync("image.jpg").toString("base64"). Add the data URI prefix: data:image/jpeg;base64,[base64string] before including in JSON. Online converters also work for one-off conversions.

Does base64 encoding increase the JSON file size?

Yes, base64 encoding increases size by approximately 33%. A 100KB image becomes ~133KB of base64 text. This makes JSON files larger and slower to parse. Only use base64 for small images like icons or when you need everything in a single self-contained file.

How do I display an image from a JSON URL in JavaScript?

Create an img element and set the src attribute: const img = document.createElement('img'); img.src = jsonData.imageUrl; document.body.appendChild(img); For base64 data URIs, use the same approach since browsers handle data URIs in src attributes automatically.