How to frame images in Chrome — background, padding, and browser frame

Most images look unfinished when dropped directly into a doc, social post, or changelog. No margin, no context, no visual weight. When you frame images properly — background, padding, deliberate canvas — they look intentional.

FramedShot lets you frame any image you upload, not just screenshots captured in Chrome. Drag in a product export, a design handoff, a photo, or an older file from anywhere. The workflow is the same regardless of where the image came from.

How to upload an image

From the FramedShot popup in Chrome, there are three ways to bring in an existing image:

• Drag and drop: drag the file directly onto the popup.
• File picker: click the upload icon in the popup to open a standard file chooser.
• Keyboard shortcut: use the open-upload shortcut to jump straight to the file picker.

JPEG and PNG files are supported, checked by MIME type. Maximum file size is 50 MB. HEIC images from iPhone are not supported — convert to JPEG or PNG first using macOS Quick Actions or Windows Photos.

The image opens in the same editor used for captured screenshots. Every framing and export option is available.

How to frame an image: step by step

Step 1: Set the background

In the General tab, choose a background for the canvas behind your image.

• Solid: a flat color. Works well for dark interfaces, technical content, and docs.
• Gradient: a two-color blend. Common for social posts and launch graphics.

Use the color picker to set exact values. The background fills the entire canvas — how much of it is visible depends on your padding setting.

Step 2: Adjust padding

Padding is the space between the image and the canvas edge. This is what gives a framed image its visual breathing room.

Use the padding slider in the General tab. A value around 10–15% works for most uses. For social posts where the image needs to stand out, 20% or more is common.

Step 3: Add a browser frame (when it fits)

The browser frame wraps the image in a realistic browser chrome — window controls, address bar area, and frame style.

In the General tab, toggle the frame on and pick:

• Style: macOS or Windows
• Theme: light or dark
• Roundness: corner curve of the frame

This works best when the image shows a web interface. For product photos, design exports, or non-web content, a plain background usually reads better. The browser mockup generator covers the full range of frame styles and when each fits. For the step-by-step decision guide, see how to add a browser frame to a screenshot.

Step 4: Adjust image roundness and canvas ratio

Image roundness rounds the corners of the image itself, separate from the outer frame. This is in the General tab.

If you need the output to match a specific aspect ratio — 16:9 for presentations, 1:1 for Instagram — open the Layout tab and select the ratio. The crop modal lets you trim precisely with an aspect ratio lock and live pixel dimensions.

Step 5: Save a style preset

If you frame images repeatedly with the same background and settings, save them as a named preset in the Styles tab.

FramedShot stores up to 10 presets locally on your device — no account needed, no sync. The next time you open the editor, apply the preset and the setup is done.

This is the fastest consistency lever when you're framing a batch of images for a launch, a doc, or a campaign.

Step 6: Export

Click Export. Options:

• Scale: 1×, 2×, or 3× — use 2× for Retina-quality output
• Format: PNG for transparency, JPEG for smaller files
• Platform preset: X, LinkedIn, Instagram — select one and the canvas resizes automatically

The exported file goes to your downloads folder. The original image is unchanged. For the exact dimensions each platform expects, see the screenshot sizes for social media guide.

What to watch for with uploaded images

Existing backgrounds. If the image has a white or colored background, the new background you set in FramedShot will appear around it — background inside a background. If that's not the look you want, use a PNG with a transparent background, or crop tightly to the subject before uploading.

Resolution and export scale. If you upload a low-resolution image and export at 2× or 3×, the upscaling will be visible. FramedShot doesn't add resolution — export at a scale that matches the source quality.

HEIC files. Not supported. Convert to JPEG or PNG before uploading.

Styling reference

Privacy

When you upload an image in FramedShot, it stays inside the browser tab. Nothing is sent to FramedShot servers. The export writes directly to your downloads folder. If the image contains sensitive data, use the annotation tools to redact it before exporting — blur, pixelate, or solid fill, all processed locally.

FAQ

Can I frame images that aren't screenshots?

Yes. Any JPEG or PNG — a product photo, a design export, an illustration — can be uploaded and framed with the same workflow. FramedShot doesn't distinguish between image types.

Can I use a browser frame on any image?

Yes, but it looks best when the image shows a web interface. On product photos or non-browser content, a plain background with padding usually reads cleaner.

Will framing overwrite my original file?

No. FramedShot reads the original and creates a new export. The source file is untouched.

Does it work on Windows?

Yes. FramedShot is a Chrome extension and runs on any OS that runs Chrome. The macOS / Windows frame option is a visual style choice, not a system requirement.

Can I apply the same frame style to multiple images?

Save it as a preset in the Styles tab. Apply it with one click each time. Up to 10 named presets, stored locally.

How is framing different from adding a border in an image editor?

A border is a stroke around the image. Framing here means wrapping the image in a full canvas — background color, padding, and optional browser chrome. The result is a composed visual, not just a decorated image.