OPF Image Treatment

Device Frame

A product screenshot is presented inside a simple device-like frame to make UI context immediately recognizable.

device-frameComposed OPF

Best Fit

SaaS demos, mobile app launches, product tours, and customer workflow slides.

Photography Guidance

Use crisp screenshots at native resolution. Hide private data and avoid scaling small text beyond readability.

Avoid

Avoid device frames when the screenshot itself is too dense to read.

OPF Coverage Note

OPF v1 composes this with a rounded shape frame plus a contained image element.

Treatment Practices

1

Use the frame to clarify context, not as decoration.

2

Keep one primary screenshot per slide.

3

Use callouts only for the specific UI detail being discussed.

OPF Config

image-treatments:device-frame
Open Presentation Format
{
  "slide": {
    "layout": "screenshot-walkthrough",
    "elements": [
      {
        "id": "device-frame",
        "type": "shape",
        "shape": "rectangle",
        "fill": "#2f241d",
        "cornerRadius": 18,
        "position": {
          "x": 20,
          "y": 10
        },
        "size": {
          "width": 60,
          "height": 76,
          "unit": "%"
        }
      },
      {
        "id": "app-screen",
        "type": "image",
        "src": "https://example.com/app-screen.png",
        "alt": "Application screen in device frame",
        "fit": "contain",
        "borderRadius": 12,
        "position": {
          "x": 23,
          "y": 16
        },
        "size": {
          "width": 54,
          "height": 64,
          "unit": "%"
        }
      }
    ]
  }
}
Open in OPF Playground

Preview this config live at pptx.dev/playground.

Related How-To Articles

How to Use Placeholders in PowerPoint Slides

Understand how pptx.dev uses PowerPoint placeholders — title, body, image, chart, and number zones — and how to fill them with your API data.

How to Add Images to PowerPoint Slides with pptx.dev

Learn how to embed images in PowerPoint presentations using the pptx.dev API — including cropped, fitted, and multi-image layouts.

How to Place, Size, and Overlay Images in PowerPoint

Master image placement, sizing, cropping, and overlay techniques to create polished, professional presentation slides.

General Image Rules

1

Crop with intent

Choose fit, position, and size based on the subject and message, not just available space.

2

Protect readability

Text over images needs enough contrast, an intentional overlay, or a separate text surface.

3

Respect image truth

Avoid filters or crops that distort evidence, screenshots, charts, or compliance imagery.

4

Keep a system

Use a small set of image treatments consistently so photo-heavy decks still feel coherent.