Note from PW: Here’s a helpful post from Jodi Friedman of MCP Actions wherein she discussed how we can prevent quality loss in images we upload to the internet. She offers some free actions that can help in the process—check them out below!

If you edit in Photoshop or Elements, you may notice that your photos look amazing when you edit. Everything is crisp and colorful. And whether you are a professional or hobbyist photographer, you get excited to share your images on the web. You may upload to a website, a blog, Flickr, or Facebook. Then you find yourself frowning.

Why do the photos look so much better in Photoshop than they do online? Why is the color off or why do they look pixelated or just plain weird?

There are a lot of reasons. Here are three top ones:

Compression – This is the main reason that most photos don’t look as good online. When you upload to a source like Facebook, they want photos to take up less room on their servers. Even if you select the “high-res” option on Facebook, it still compresses. Any time you take something big and make it smaller, and thrown out information, or in this case, pixels, it will not look as good.

Color Space – At this time, the web is seen in sRGB. Much editing in Photoshop is in in aRGB (Adobe RGB) or an even larger color space if using Lightroom. These color spaces allow photographers to see and use even more variation in color in their photos. Most browsers and monitors cannot see these color spaces.

Sharpening – When a photo gets resized either by you or an uploading mechanism, it throws detail out the door. Sharpening is detail.

Here’s how you can fight back and get better looking images online (keep in mind they still may not look as good as they do in Photoshop or Elements but these tips should help):

Resize – find out the ideal dimensions for your website, blog, or other places where you are hosting your images.In full Photoshop, use the IMAGE – IMAGE SIZE dialog box to shrink your picture to that particular size. In Elements, use the path IMAGE – RESIZE – IMAGE SIZE. First, put in resolution of 72, if it is not already there, with “Resample” unchecked. Then check “Resample” and “Constrain Proportions” and enter the ideal width for your needs—for example 600px, if your blog is 600px wide.

Convert to the sRGB color space – In Photoshop, go under EDIT – CONVERT TO PROFILE. Change the destination to sRGB, if it is on a different color space. Likely, the actual choice you want will say something like “sRGB IEC61966.21.” In Elements, go to EDIT – CONVERT COLOR PROFILE. Then choose “convert to sRGB.” If it is grayed out, you already are in that color space.

Now for the shortcuts… the easiest, prettiest ways to get better web images. If you want to save time or have more fancy options, you may be able to cheat a bit! But it’s not really cheating – it’s just a shortcut by using Photoshop actions to prep your images for Web:

For general web use: try the FREE sharpening Photoshop action set – High Definition Sharpening. Inside there are two actions. High Definition is for print. Crystal Clear Web Resize and Sharpen is for Internet use. Compatible with Photoshop and Elements.

Image (1) 5219113605_30b46a44ca_o.jpg for post 13753pinterest
Multiple Choices Photography

For a more designer approach: including watermark and logo insertion, rounded edges, color blocks, framing options and more, check out the Finish It Photoshop Actions. These also resize, sharpen, and convert to sRGB. Compatible with Photoshop and Elements.

Image (2) 5219703718_851b03f140_z.jpg for post 13753pinterest
Lena (Elma) Regnerus

For combining images into a collage or storyboard: check out the Blog It Boards. These come in the traditional rectangular shape and the rounded edge openings. They also brand your images with your logo if desired. If you want to see how these work, download the FREE “Try Me” Blog It Board. The Magic Blog It Boards work in Photoshop and Elements. The Rounded variety only works in full Photoshop at this time.

Image (3) 5219113517_491fdf6339_z.jpg for post 13753pinterest

For Facebook: download the NEW, FREE Facebook Fix Photoshop actions. These include actions for optimizing single images and double images that are side-by-side or top and bottom layouts – all are sized for the ideal 720px wide dimensions. There is an included sharpening action too. The Photoshop version converts your images to sRGB too. The Elements version has a video that shows you how. Compatible with Photoshop and Elements.

By Jodi Friedman of MCP Photoshop Actions