If you’ve ever posted a photo to your blog and wondered why it doesn’t look as good on your blog as it does in Photoshop, this post is for you! Here are a few tips for making your photos look good online!
Print quality images have a much higher resolution than is needed for viewing on a screen. It’s important to resize your image for web viewing. There are lots of automatic image resizers out there—some blogging platforms will automatically resize images as you upload them—but by doing it yourself in Photoshop, you can control the quality of the image as you resize it, so your photos look as good sized for web as they do at full resolution.
Resizing the Image
The first step is to convert the image from print resolution to web resolution, and then make sure that the dimensions will fit your blog.
Open your image in Photoshop, and then go to Image > Image Resize. You’ll see a dialogue box like the one above. If you’ve optimized your images for print, your image should be around 300 pixels per inch, which puts the dimensions around 3888 pixels wide and 2592 pixels tall.
Making sure the “Resample Image” option is checked, change the resolution to 72 pixels/inch. You’ll see the pixel dimensions automatically decrease to around 900 pixels by 600 pixels. Next change the pixel width to fit within the content area of your blog (if you’re not sure how wide your content area is, check with your blog designer and they should be able to tell you). Here I’m setting the width to 500 pixels, which will fit well within my blog posting area.
If your photo is vertically-oriented, you don’t necessarily want the width to be as wide as your posting area or the viewer may be forced to scroll down in order to see the entire photo. For vertically-oriented photos a good rule of thumb is to make the height of the photo the same as the width of your blog. It will make the width of the photo narrower than your blog post area, but the height will fit on the screen without needing to scroll.
Sharpening the Image
Sometimes resizing an image can soften details that really make the photo. Here are a couple ways to sharpen your photo and bring back those fine details.
Unsharp Mask is a great tool for sharpening images, whether they’re print or web resolution. With your web-sized image open in Photoshop, go to Filters > Sharpen > Unsharp Mask. Set the Amount to around 42% and the Radius to around 1.5 pixels. Play with the Amount and Radius to see how it affects the sharpness of your photo.
High Pass is another way to sharpen details in your photo, and it can also give a little bit of color “pop” to a color photo.
With your web-sized image open in Photoshop, create a duplicate of the image on another layer using CTRL/CMND + j or by right clicking on your background layer in the layers palette and selecting “Duplicate Layer”. Then set the top layer’s blend mode to Hard Light.
Next go to Filters > Other > High Pass. Set the Radius to around 1.2 pixels. You’ll notice that the preview window of the High Pass dialogue shows a gray field with embossed-looking lines around the details of your photo. For this reason, it’s important to have the duplicate layer’s blend mode set to Hard Light so you can see the end result of the filter in your image in the background as you’re adjusting the settings.
Saving the Image for Web
Once you’ve sharpened your image, you’re ready to save it for web. Photoshop has a special Save For Web option that allows you to optimize your final image for the web.
With your web-sized image open in Photoshop, go to File > Save for Web, and the following dialogue box will pop up:
In box 1 in the above figure, make sure the image type is set to JPEG. Below that are the image quality selectors. Set the image quality to “Very High,” then look at box 2. This will tell you how large your file size will be at that quality, and how long it will take to load the image at various internet speeds. If the file size is above 200K, I recommend lowering the image quality until it is. Keeping your image file sizes below 200K will ensure that images load quickly for your blog readers, and you should be able to get good image quality within the 200K file size.
A Few Last Notes on Images on the Web
- Not all colors are viewable on a screen. For that reason, web images may appear duller in color when you post them to your blog. To compensate, consider using a Vibrance mask on your image and increasing the vibrance and/or saturation just a touch (but not too much!).
- Computer screens need to be calibrated for correct color display. If you are a photographer, you probably have a color calibration tool that you use on a regular basis to make sure that the colors you see on screen are as close to print colors as you can get. However, your average blog reader may not have his or her screen calibrated for color, and may see your images slightly differently than you do on your calibrated screen.