How to Export from Photoshop for the Web
The image looks perfect in Photoshop, but on your site it's dull, soft and weighs three megabytes. Sound familiar? Let's sort out which tool to export with, how to choose between PNG and JPG, where to set the quality slider, and why one "sRGB" checkbox rescues your colors.
Export As vs Save for Web
Photoshop has two tools for web export, and they live under File → Export. Both flatten your layers into a single image, but they work differently.
Export As is the modern engine. It does what today's web demands: exporting at double and triple resolution for Retina (@2x, @3x), outputting SVG, a live file-size preview, and quick export of individual layers. This is the default choice.
Save for Web (Legacy) is the old tool that Adobe literally tagged "legacy." But don't write it off: it offers finer control over optimization, shows a before/after view with an exact weight, handles PNG-8 with a manually tuned palette, and — a key detail — it's the only one that exports an animated GIF.
| Feature | Export As | Save for Web |
|---|---|---|
| @2x / @3x for Retina | Yes | No |
| SVG export | Yes | No |
| Animated GIF | No | Yes |
| Fine PNG-8 palette tuning | Basic | Full |
| Before/after preview with weight | Size only | Yes |
The short version
For 90% of jobs, use Export As. Switch to Save for Web only for an animated GIF or when you need to wring every kilobyte out of a PNG-8 by hand.
PNG or JPG: choosing the format
This is the main export fork, and the choice depends on the content of the image, not on habit.
JPG compresses with loss and handles photos and complex images with smooth transitions beautifully — and the file ends up many times lighter. The downside: JPG has no transparency and leaves artifacts along sharp, high-contrast edges, such as around text.
PNG compresses losslessly and is built for graphics with crisp edges: logos, icons, UI screenshots, text. Its trump card is transparency (the alpha channel). The price is weight: a photo saved as PNG will be several times heavier than the same shot as JPG.
Is it a photo?
Smooth gradients, lots of detail, no transparency → JPG.
Sharp edges or transparency?
Logo, icon, text, cut-out object → PNG (PNG-24 with alpha).
Need the smallest weight?
For both photos and graphics, modern WebP/AVIF is usually lighter than either.
We won't relitigate the eternal PNG-versus-JPG debate here — there's a separate breakdown for that. What matters here is one thing: pick the format by content, not at random.
The quality slider: finding the sweet spot
When exporting to JPG, Photoshop shows a Quality (0–100) slider. The urge to crank it to 100 is strong, but that's almost always extra weight for no visible gain.
In practice, the 60–80 range is the sweet spot: your eye can't tell it apart from the original, while the file is 2–3 times lighter. Below 50, you start to see JPEG's telltale "blocks" along edges and in fine detail. The best way to find the threshold is to watch the preview and the weight readout, lowering quality until the image visibly starts to degrade.
Why 100 is overkill
A JPEG at quality 100 stores detail you can't see on screen anyway, yet it bloats the file. An export at 75 is often visually identical while weighing half as much — a direct win for page load speed.
sRGB — the checkbox that saves your colors
The most common reason for "the colors are wrong on the site" is the color profile. Photographers and designers often work in the wide Adobe RGB or ProPhoto RGB spaces, where colors are more saturated. The problem is that browsers treat an image as sRGB by default. Hand them a file in Adobe RGB and the browser renders it flat — the colors come out duller than in Photoshop.
The fix is a single checkbox. In Export As it's "Convert to sRGB"; in Save for Web it's "Convert to sRGB" plus "Embed Color Profile." Photoshop recalculates the colors into sRGB, and on the user's screen they match what you saw.
Color spaces run deeper than one checkbox: how RGB differs from CMYK, how ICC profiles work, and what soft proofing is — all in our article "Color in Photoshop".
Retina and @2x: no more soft images
On a standard screen, one image pixel = one display pixel. On Retina and other high-density screens, twice or three times as many physical pixels fit in the same spot. Ship an image one-to-one and it looks slightly blurry there — it's short on detail.
The answer is to export @2x (and @3x if you like): a copy at double resolution. You serve it via the srcset attribute, and the browser picks the right one for the screen's density. Export As can output 1x, 2x and 3x in a single pass — just add the scales you need to the size list.
Ready-made recipes by task
So you don't have to hold it all in your head, here are quick "presets" for the usual cases.
How to squeeze the weight after export
Even a careful Photoshop export leaves headroom on weight. The final touch for a fast site is converting to a modern format. Turning a finished PNG or JPG into WebP or AVIF often saves 25–50% of the size with no visible quality loss — which means faster loads and better Core Web Vitals, a signal search engines watch.
If you don't have Photoshop handy but need a web image from a layout fast, you can do the whole trip online: open the PSD and export a light file straight away.
From PSD straight to a web-ready image
The FormatZ converter opens a PSD in the browser and hands you a PNG with transparency or a light JPG — no Photoshop, no install, no sign-up. From there it's easy to turn the image into WebP for speed.
Convert PSD to PNGFor photos, PSD → JPG is handier, and for more on speeding up a site with light formats, see "WebP for Website Speed". Every available conversion is on the all formats page.
