Saving for Web: Issues, Workarounds and Advice.

After I've decided an image is complete and ready for a web resolution .jpg, I'll usually copy my image from the layered PSD into a new document by first selecting all (Ctrl+A) and then copying all visible (Ctrl+Shift+C). Photoshop will now calculate the resolution of whatever you've copied and save you a few steps by automatically entering these dimensions when you create a new document (Ctrl+N). Once open, simply paste your image (Ctrl+V) above the background layer.


What comes next is important and will help correct an artifacting error you may have seen and indeed been plagued by yourself. *DO NOT* delete the background layer, *DO* however invert it's color (CTRL+I) to pure black.

Edit: Or simply flatten your image before resampling. Thanks Mike McCain!

Invert the white Background to avoid artifacts on most images and websites.

For whatever reason well beyond my expertise, as Photoshop resamples your image it seems to confuse and blend a single pixel outside of your canvas at the borders of each image. If you had left the background white, it's  very noticable on most websites (See Left and Below).

Click to Zoom !

Once we've adjusted the background, it's time to scale down. If the image is small enough or your computer fast enough you can skip right to Save for Web (Ctrl+Alt+Shift+S), if this is too slow or error prone I recommend re-sampling via Menu - Image>Image Size (Ctrl+Alt+I). Whichever method, I make sure to save two versions of the image, one under the Bicubic Smoother setting and one under Bicubic Sharper (Default). Generally I find Bicubic Smoother suites my images better but on occasion the extra sharpening is pleasantly surprising, especially for much smaller resolutions.

In this 640px wide image, I actually prefer Sharper, yet in the full size 1280px wide image at the tog of this article I prefer Smoother.

Regardless of whichever method chosen for re-sampling, Save for Web will give you greater control over the quality and file size of your images. I've found that for general purposes an image quality of 80 results in little to no visible .jpg artifacts and a reasonable filesize. 

Hope this has been of use! Please let me know what you think and if I've made any mistakes! Take note that some websites that resample your images automatically seem to commit this error outside of your control. (Facebook !)