How to Move an Export From Photoshop to a Browser Mock

To get an image from Photoshop into a browser mock, export it as a file and use the file. Choose File > Export > Quick Export as PNG for a one-click export, or File > Export > Export As to set the format, size and scale. Then reference the file in your HTML, or drag it into Figma, Canva or whatever runs in the tab. Copying and pasting is fine for a quick visual check, but it doesn't give you a file the mock can keep.

Quick Export, Export As or Save for Web?

Quick Export uses the format and location you set in Edit > Preferences > Export. There you can choose the Quick Export format (PNG, JPEG and others) and whether Photoshop asks for a location each time or saves to an assets folder next to the document.

You can also right-click selected layers in the Layers panel to quick-export just those layers.

Step by step: Photoshop to an HTML mock

1. Set the document to the size the mock needs, in CSS pixels. If the mock targets high-density screens, plan to export a 2x copy as well.
2. Choose File > Export > Export As.
3. Pick PNG if you need transparency, or JPG for photos without transparency.
4. If you want a high-density copy, add a 2x size in the dialog's scale options (or run the export a second time at double size), and name it with a suffix such as @2x so the pair stays together.
5. Make sure the image is in sRGB for the web.
6. Save into the mock's image folder with a stable name, for example assets/hero-home.png, not Untitled-1.png.
7. Reference the file in the page:

<img src="assets/hero-home.png"
     srcset="assets/hero-home.png 1x, assets/hero-home@2x.png 2x"
     alt="Product hero image">

When you change the design, export again with the same name and refresh the browser tab. How to export @1x and @2x without losing the pair covers naming the pair.

Browser design tools: Figma, Canva and others

• Figma in a browser: drag the exported PNG onto the canvas, or press Ctrl+Shift+K to place it. Figma scales anything over 4096 pixels on its longest side, so export at the size you need rather than a huge flattened copy.
• Canva: upload the file through Uploads. A file upload is more reliable than pasting, especially for transparent PNGs. Can't paste into Canva? covers the common failures.
• Photopea and other browser editors: open or drop the exported file. A web page only sees the clipboard formats the browser passes through, so Photoshop's own copy data never reaches it.

When copy and paste is good enough

Copying from Photoshop and pasting into a browser tool works for quick checks:

• you want to see whether a crop reads at a small size,
• you're dropping a rough preview into a chat, or
• the image is opaque and small.

For other apps to receive a Photoshop copy at all, Export Clipboard must be on in Edit > Preferences > General.

Paste is the wrong route when:

• Transparency matters. Transparency doesn't always survive the clipboard; a PNG file keeps it. How to keep transparent PNGs transparent through paste has the details.
• The image is large. Windows clipboard history (Win+V) only keeps items up to 4 MB, so a big copy can paste once and then be gone after your next copy.
• The mock goes into version control. A pasted image inside a design file has no matching file in your project's assets folder, so the build and the design can drift apart.

Keeping exports organised

Pick a folder per project for exports and point Quick Export at it, or choose the location each time. Name files for what they show (hero-home.png, icon-cart.svg) so developers can find them. How to hand assets to a developer without Slack soup covers the hand-off.

If you keep dragging the same few exports into browser tabs, a shelf saves trips to File Explorer. Edge Drop keeps files you copy in Explorer on a screen-edge shelf, and you can drag them into a page that accepts dropped files. How to drag an item out of Edge Drop into any app shows how.

FAQ

Is Save for Web gone from Photoshop?

No. It's still under File > Export > Save for Web (Legacy). Adobe labels it legacy and recommends Export As and Quick Export for everyday exports.

Why did Quick Export save somewhere unexpected?

Quick Export uses the location set in Edit > Preferences > Export, which is separate from where Export As last saved. Change it there, or set it to ask every time.

Should I export PNG or JPG for a web mock?

PNG for anything with transparency, sharp edges or text. JPG for photos without transparency, where a smaller file matters more.

Related reading

• Photoshop Copy, Paste, and Place on Windows: Best Setup
• How to Export @1x and @2x Images in Figma and Photoshop
• Figma Desktop vs Figma Web: Why Does Paste Behave Differently?
• How to Copy and Paste SVG as Vectors, Not Pixels

Sources

• Photoshop User Guide (Adobe) — Quick Export, Export As, export preferences and Save for Web (Legacy).
• Add images and videos to designs (Figma) — drag and drop, Ctrl+Shift+K and the 4096 px limit.
• Canva upload formats and requirements (Canva) — supported upload formats.
• Using the clipboard (Microsoft Support) — Win+V limits.

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