Office Open
PPTX

Images

Embed pictures, set slide backgrounds, and use image fills on shapes

@office-open/pptx supports embedding images into slides, setting background images, and using images as shape fills.

The data field accepts raw bytes (Uint8Array, ArrayBuffer, Buffer) or a base64 data URL such as data:image/png;base64,.... Data URLs are convenient in JSON payloads and browser environments where no file on disk is available.

Embedding a Picture

import { generatePresentation } from "@office-open/pptx";

{
  "slides": [
    {
      "children": [
        {
          "picture": {
            "x": "1.3cm",
            "y": "1.3cm",
            "width": "10.6cm",
            "height": "7.9cm",
            "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAFoCAIAAABIUN0GAAAGFklEQVR4nO3OMQ3AQBAEseOPJwDD4rcYSwbgu/sAgOf2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAnB/XZ/UJD/Bi1wAAAABJRU5ErkJggg==",
            "type": "png"
          }
        }
      ]
    }
  ]
}

Image from URL (Browser)

import { generatePresentation } from "@office-open/pptx";
import * as fs from "node:fs";

const response = await fetch("https://example.com/image.png");
const arrayBuffer = await response.arrayBuffer();
const data = new Uint8Array(arrayBuffer);

// Use in generatePresentation:
generatePresentation({
  slides: [
    {
      children: [
        {
          picture: {
            x: "1.3cm",
            y: "1.3cm",
            width: "13.2cm",
            height: "7.9cm",
            data,
            type: "png",
          },
        },
      ],
    },
  ],
});

Supported Image Types

TypeExtensiontype value
JPEG.jpg / .jpeg"jpg"
PNG.png"png"
GIF.gif"gif"
BMP.bmp"bmp"
EMF.emf"emf"
WMF.wmf"wmf"

Slide Background Image

Set a background image for the entire slide:

{
  "slides": [
    {
      "background": {
        "fill": {
          "type": "blip",
          "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
          "imageType": "png"
        }
      },
      "children": []
    }
  ]
}

Solid Color Background

{
  "slides": [
    {
      "background": { "fill": "1F4E79" },
      "children": []
    }
  ]
}

Gradient Background

{
  "slides": [
    {
      "background": {
        "fill": {
          "type": "gradient",
          "stops": [
            { "position": 0, "color": "0D47A1" },
            { "position": 100, "color": "42A5F5" }
          ],
          "angle": 45
        }
      },
      "children": []
    }
  ]
}

Image Fill (Blip Fill) on Shapes

Use an image as a fill for any shape:

{
  "slides": [
    {
      "children": [
        {
          "shape": {
            "x": "1.3cm",
            "y": "1.3cm",
            "width": "15.9cm",
            "height": "10.6cm",
            "geometry": "roundRect",
            "fill": {
              "type": "blip",
              "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
              "imageType": "png"
            },
            "textBody": { "text": "Text over image fill" }
          }
        }
      ]
    }
  ]
}

Picture Options

| Property | Type | Description | | -------- | ---------------------------------------------------- | ------------------------------------- | ------------- | | x | number | UniversalMeasure | Left position | | y | number | UniversalMeasure | Top position | | width | number | UniversalMeasure | Width | | height | number | UniversalMeasure | Height | | data | Uint8Array \| ArrayBuffer \| string (data URL) | Image data — bytes or base64 data URL | | type | "png" \| "jpg" \| "gif" \| "bmp" \| "emf" \| "wmf" | Image format | | name | string | Display name |

Tables

Create tables with merged cells, custom styling, and formatted content

Charts

Create charts in presentations — column, line, pie, doughnut, radar, bubble and more

Copyright © 2026