How to Sharpen & Export for the Web in Photoshop

How to Sharpen & Export for the Web in Photoshop

This tutorial walks through the full process of getting an edited Photoshop image ready for the internet: duplicating it down to the size it’ll actually be displayed at, sharpening it properly at that smaller size, and exporting it with the right color settings so it doesn’t lose sharpness or shift color once it’s uploaded. The sample image used in this tutorial is available as a free download on PHLEARN.com.

Why Sharpening at Web Size Matters

Images often look wrong once uploaded, either the colors shift or the sharpness that looked great in Photoshop disappears, and both problems trace back to the same root cause: sharpening an image at full resolution and then scaling it down afterward also scales down the sharpening effect along with it. The fix is to always sharpen an image at the exact pixel dimensions it will actually be displayed at on the web, never before resizing.

A Quick Color Edit Before Resizing

Before getting into sizing and sharpening, this tutorial starts with a small color adjustment on the full-size original. Add a Hue/Saturation adjustment layer, use the eyedropper to target the reds specifically, and increase saturation slightly to draw a bit more attention to that area of the photo. Invert the layer mask with Command/Ctrl+I to hide the effect everywhere, then paint white directly over just the area that needs the extra color.

Flattening a Snapshot Layer

With editing finished on the full-size file, create a new layer at the very top of the layer stack, regardless of how many layers already exist below it. Go to Image, then Apply Image, make sure the Layer setting says Merged and Blending is set to Normal, then click OK. That stamps a flattened snapshot of the entire visible image onto that single new layer, which is what gets duplicated and resized next.

Duplicating to a New Document

Right-click that new snapshot layer and choose Duplicate Layer, then set the destination to a brand new document rather than duplicating it within the same file. Before going any further, save the original layered file as a PSD if that hasn’t already been done, since that layered file is what preserves the ability to go back and adjust individual layers later.

Why You Never Resize the Original

Resizing the original file directly is risky: if it gets resized down small and accidentally saved before Photoshop is closed, all of that original resolution and detail is permanently gone. Working on a duplicated snapshot in a separate document means the original full-resolution PSD is never touched, no matter what happens to the smaller web-sized copy.

Resizing for the Web

In the new document, go to Image, then Image Size, and switch the units to Pixels. A typical original file might be several thousand pixels wide, far larger than needed online, so resize it down to whatever width fits its destination, roughly 800 pixels for this example, 1,200 for a blog, or around 1,000 for a typical social platform like Facebook. At this reduced size the image will usually look noticeably softer than it did at full resolution, which is exactly why the sharpening step comes next rather than before resizing.

Sharpening with a Smart Object and Unsharp Mask

Before applying any sharpening filter, right-click the resized layer and choose Convert to Smart Object. Then go to Filter, then Sharpen, then Unsharp Mask, and use a smaller radius than would be used on a full-size image, since a smaller image needs a correspondingly smaller radius to avoid looking harsh, adjusting the Amount until fine detail becomes visible without looking artificial.

Re-Editing Sharpening Later

Because the layer was converted to a Smart Object first, the Unsharp Mask filter is applied as an editable Smart Filter rather than being baked in permanently, and it can even be toggled on and off to compare before and after. If the sharpening amount doesn’t look right after the fact, double-click directly on the Unsharp Mask entry under the Smart Filters and adjust the settings again at any time without redoing the filter from scratch.

Exporting with Save for Web

With the image resized and sharpened, go to File, then Export, and choose Save for Web (Legacy), or just Save for Web on older versions of Photoshop.

Choosing the Right JPEG Settings

Choose JPEG as the file format for standard photos, saving PNG for images that need transparency or GIF for anything animated. For quality, aim for the lowest number that doesn’t introduce a visible difference in the image, which in practice is often around 80, since that keeps the file size down without a noticeable quality loss. Make sure Convert to sRGB is checked, since web browsers read color in the sRGB color space and skipping this step is a common reason uploaded images look off compared to how they appeared in Photoshop. The preview button shows exactly how the image will render in a browser before saving, which is a useful last check, and the image dimensions should be confirmed here as well before hitting Save with a clear, descriptive filename.

Why This Workflow Protects Your Original File

The core idea running through this entire process is separation: edit and save the full-resolution layered PSD once, then always work on a duplicated, resized copy for anything headed to the web, so the original file is never at risk of being accidentally overwritten or permanently resized down. Anyone who wants a deeper dive into sharpening technique specifically can check out Photoshop sharpening for a closer look at getting crisp detail without artifacts.

Final Thoughts

Getting an image to look right on the internet comes down to three things done in the right order: resize down to the actual display size first, sharpen at that final size using a Smart Object so the settings stay editable, and export with Save for Web using sRGB and a sensible JPEG quality. Following that sequence, and never resizing the original layered file directly, is what keeps images looking sharp and color-accurate once they’re actually online.

Quick Reference: Keys, Menus and Settings

• Boost the redsHue/Saturation layer, Reds, eyedropper on the rock, raise Saturation; Cmd/Ctrl + I inverts the mask
• Stamp a snapshotNew layer on top, Image > Apply Image: Layer Merged, Blending Normal
• Make the web copyRight-click > Duplicate Layer, Document: New; save the original as a PSD
• ResizeImage > Image Size, units in Pixels, 800 pixels wide here
• SharpenConvert to Smart Object, then Filter > Sharpen > Unsharp Mask with a smaller Radius
• SaveFile > Export > Save for Web (Legacy): JPEG, Quality 80, Convert to sRGB
• Screen modesF cycles them; Shift + F steps back

No AI, no generative credits.