OPF Image Treatment

Rounded Card

An image sits inside a rounded rectangular frame with optional shadow, giving screenshots and photos a contained surface.

rounded-cardNative OPF

Best Fit

Product screenshots, app previews, feature slides, and structured comparison pages.

Photography Guidance

Use screenshots or photos with clear internal margins. Avoid adding a heavy frame around already cluttered UI.

Avoid

Avoid stacking multiple framed images unless the layout is explicitly a comparison or gallery.

Treatment Practices

1

Use a subtle border radius and shadow rather than a heavy decorative frame.

2

Keep the card aligned to the same grid as surrounding content.

3

Use contain for screenshots when no content can be cropped.

OPF Config

image-treatments:rounded-card
Open Presentation Format
{
  "slide": {
    "layout": "screenshot-walkthrough",
    "elements": [
      {
        "id": "product-screen",
        "type": "image",
        "src": "https://example.com/screenshot.png",
        "alt": "Product screenshot",
        "fit": "contain",
        "borderRadius": 12,
        "shadow": true,
        "position": {
          "x": 12,
          "y": 16
        },
        "size": {
          "width": 76,
          "height": 60,
          "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.