How to Move an Export From Photoshop to a Browser Mock

Web mocks still get their pictures from Photoshop more often than design Twitter admits. A hero crop, a product cutout, a banner at three widths — they leave a PSD and need to appear in a local HTML file, a Figma browser tab, or a CodePen. The old reflex was Save for Web. That command is a legacy path. Adobe's current desktop help points at Quick Export as and Export As. The clipboard is a shortcut around those dialogs, and it is usually the wrong shortcut.

This guide is the file-first hop from Photoshop to a browser mock on Windows. Paste stays available for a one-off pixel check. The deliverable is a named PNG (or WebP, or SVG from Illustrator) that the browser loads as a file.

Save for Web is not the 2026 default

Adobe still documents Save for Web (Legacy) in the Photoshop help tree, but day-to-day export is File > Export > Quick Export as [PNG/JPG/…] and File > Export > Export As. Quick Export uses the format and location set under Export settings and export location preferences. Export As is the dialog for format, transparency, resized copies, and metadata.

Use Quick Export when the mock needs the same PNG recipe every time (sRGB PNG-24, transparency on, same folder). Use Export As when this asset needs a 1x and 2x pair, a quality slider, or a different size than the document. Adobe's "Export files in different sizes" article is the official note for scaled copies — not a clipboard trick.

Copy Merged (Ctrl+Shift+C) still exists. Adobe's copy-and-paste selections article describes Copy, Copy Merged, Cut, and Paste inside and between Photoshop documents. That is the right tool for moving a flattened look into another PSD. It is not an export pipeline. The OS clipboard then holds a bitmap. Windows history may store that bitmap if it is under 4 MB and history is on. A typical 1920×1080 32-bit image is already near or over that cap. History stores text, HTML, and bitmap only. The file on disk is what the browser actually wants.

Two payloads: pixels versus a file

How to Copy an Image Instead of the File and How to Copy an Image File So Photoshop Gets Pixels are the two directions of the same mix-up. For a browser mock, invert the Photoshop-bound habit: the mock wants a file, not the live bitmap.

Recommended path: export once, drop once

1. Confirm color. For web, convert or proof to sRGB. A Display P3 document pasted into a standard browser tab will look different from the PSD. That is a color-management issue, not a clipboard bug.
2. Confirm size. Design the asset at 1× CSS pixels, then export 2× if the mock is for a retina display. Figma's export help states default image exports are 72 DPI, and a 2× export is 144 DPI. Photoshop's Export As scaled copies are the matching idea. Keep the pair together — Exporting @1x and @2x Without Losing the Pair.
3. File > Export > Export As (or Quick Export if the preset is already correct). PNG if you need transparency. JPEG if the photo has no alpha. WebP if the mock's stack already uses it — do not invent a format the receiving tool cannot open.
4. Save into the mock's assets (or public/images) folder with a stable name: hero-home.png, not export (3).png.
5. In the HTML or the browser-based design tool, drop the file or write the src. Do not copy the pixels out of Photoshop a second time.

If the mock is a Figma file in the browser, drag the PNG onto the canvas or use Figma's upload/place path. Figma help: images are fills, not a special layer type. Pasting from the clipboard creates a rectangle with that fill. Figma also resizes assets over 4096 pixels on the long edge. Export at the size the mock needs instead of dumping a 8000-pixel PSD flatten onto the clipboard.

If the mock is Figma desktop, file drop is still cleaner than a huge bitmap paste. Desktop versus browser clipboard differences are real enough to deserve their own article: Figma Desktop vs Figma Web: Paste Behavior Differs.

When paste is honest

Paste is fine when:

• The question is "does this crop read at 320 CSS pixels?" and the bitmap is small
• The receiving window is another Photoshop document
• A teammate asked for a preview in chat, and the master file is already in the repo

Paste is dishonest when:

• Transparency must survive. Many Windows bitmap clipboard paths flatten to opaque DIB. PNG-on-disk keeps the alpha. How to Keep Transparent PNGs Transparent Through Paste.
• The image is larger than 4 MB. It may still be the live clipboard item and paste once with Ctrl+V, but it will not join Win+V history. Recopying anything else overwrites it. Why Your Huge Screenshot Never Appears in Win+V.
• The mock will be committed to git. A pasted layer inside a .fig with no matching file in /assets is how production sites ship a different crop than design.

Browser-specific notes

Static HTML / local preview. Use a relative path. Refresh the tab. If the image looks crunchy, the export was too small — export again, do not screenshot the PSD.

Figma in Edge or Chrome. Prefer drag-and-drop of the PNG. If paste is used, deselect layers first so Figma creates a new fill rectangle instead of replacing an existing fill (official paste help). Copy as PNG from another Figma file defaults to 2×.

Canva in a tab. Upload the file. Canva's help center documents upload formats and account storage limits. A clipboard paste of a transparent PNG is a common failure point. Canva Desktop vs Canva Web Clipboard Limits.

Photopea or other browser editors. Same rule as Figma web: the page only sees what the browser Clipboard API exposes. A Photoshop-private clipboard format will not appear. Export PNG, then upload or drop.

Photoshop settings that actually matter

Adobe documents Export settings and export location preferences. Set:

• Quick Export format to PNG if most mocks need alpha
• Metadata stripped unless the mock needs copyright
• A fixed export folder only if every project uses the same mock repo — otherwise pick the project assets folder every time so files do not pile on the desktop

Keeping Brand Assets Off the Desktop and On a Shelf is the naming and staging habit around this export.

Layer comps and Generator are separate products. Do not assume a clipboard manager can replace Export As. Best Clipboard Setup for Photoshop Users is about paste versus Place versus file drop into Photoshop, not about skipping export.

Windows history is optional on this path

Enable Win+V if the session includes several small reference bitmaps (a favicon, a 320-wide crop, a color chip). Leave it off if the only copies are passwords or if IT disabled history. Unpinned items still vanish at restart. Files still do not become history cards.

A local shelf that can drag a file into a browser window is an optional convenience after Export As has written the PNG. Edge-Drop is one such shelf. It does not replace Quick Export, and it cannot put a 40 MB PSD flatten into Microsoft's 4 MB history list. The file on disk is the product.

Quick decision

• Need pixels in another PSD → Copy Merged
• Need an image the browser will load tomorrow → Export As / Quick Export, then drop the file
• Need 1× and 2× → Export As sizes, keep the pair
• Need a five-second look in chat → paste or snip, then delete the preview from the deck later

Save for Web nostalgia is understandable. The current Adobe path is a file. Treat the clipboard as a preview wire, not the truck.

The product-level comparison is Adobe XD, Figma, and Sketch on Windows: Clipboard Reality.

Related reading

• Lightroom: When the Clipboard Is Useless
• Blender and 3D Apps: Reference Images on the Side
• Best Clipboard Setup for Photoshop Users
• Best Clipboard Habits for Developers in 2026

Sources

• Copy and paste selections in Photoshop (Adobe) — official Copy / Copy Merged / Paste behavior inside Photoshop.
• Quick Export as in Photoshop (Adobe) — current replacement path for routine PNG/JPEG export.
• Export files in different sizes (Adobe) — official scaled exports for 1x/2x-style output.
• Add images and videos to designs (Figma) — paste, drag-and-drop, and images as fills.
• Copy and paste objects (Figma) — clipboard paste, Copy as PNG at 2×, 4096-pixel resize.
• Using the clipboard (Microsoft Support) — 25 items, 4 MB, bitmap-in-history, restart wipe.

Copy. Stack. Drop.

Transform your clipboard into an interactive edge shelf. Stack, pin, and drag assets into any app with zero friction.

Download for Windows Get from Microsoft Store

How to Install Guide · First 10 Minutes Guide · Drag & Drop Guide · Edge-Drop vs Win+V · Support