On the Web, looks are everything. Really.
There are fundamentally two ways to impress online: Great content and great-looking images. Of the two, images are often the most effective and efficient persuader. Powerful images can have an instantaneous and powerful effect on the emotions of the viewer.
When images are post-processed to look their best, it can make your web design sparkle. How is it done? There are some basic steps you can take to enhance your online images. You can have better photos on your website!
Website Image Post-Processing
We enhance the quality of photos by post processing. Post processing is the process of improving or altering the quality and appearance of a photo captured by digital cameras. The best-known tools for this process are Adobe Photoshop and Lightroom. However, the basics can be done with a variety of photo processing software tools that are widely available. The basics steps described in this article can be done with most photo processing tools.
What I am going to do in this guide is discuss some of the basic steps I take to edit every image that is used in my website design. Yes, that right. Every image that I use online is processed before uploading. Generally a photo straight from the camera must be post-processed to look its best online. These are the basic steps that go into most of the images I prepare for online display.
A quick qualifier before we start. I will not be discussing selecting photos for web design. That is a topic for another post. Rather, I will focus on making the image ready for online use. Let’s take the first step.
Tips to Make Your Website Photos Brighter, Sharper, More Colorful & Faster Loading
Step One: Reduce the Image Size
If I am using an image (jpeg or raw) directly from a digital camera, it is generally too large, both in file size and in dots per inch (dpi) to be used online. The file size refers to the width and height of the image measured in pixels. For example, a typical 10-megapixel image from a digital camera will have dimensions of 3872 pixels wide by 2592 pixels high. That is much larger than will ever be used online. For comparison, the Apple 21.5 inch hi-res LED display has a resolution of 1920 pixels wide by 1080 pixels high. The typical image I use online rarely exceeds 900 pixels in width unless it is meant for full-screen display. So I reduce the image to a workable size that is larger than the final size I will crop the file to for final use online.
The second measurement that matters in image editing for web design is the dots per inch (dpi). Most digital cameras create images at 300dpi. That resolution is needed for printing sharp enlargements. However, most computer monitors are optimized for 96 dots per inch. The pixel height and width, and, the dpi are the two measurements that matter when editing digital images for use in web design.
Web Image Measurements
Every photograph, in digital form, is made up of pixels. A pixel is the smallest portion of an image or displays that a computer is capable of printing or displaying.
Dots Per Inch (DPI):
Dots Per Inch (DPI) is a measure of the perceived sharpness of an image when displayed or printed. Most printed images need 300dpi to appear sharp, The same image can appear sharp on a computer screen at only 96dpi.
The larger the image you are editing, the more computing power it demands, slowing down your computer in the process. For that reason, I don’t work on an image that is much larger than I need. The first step I take in the editing process is to resize the image. I do not reduce it to the final size. Rather I reduce to a working size that is about 30% larger than I need. I leave final re-sizing and cropping as one of the last steps in post-processing.
I typically reduce the size of the image I will work on to about 1700 pixels in width at 96 dpi. This saves on computer resources when using Photoshop, allowing me to edit faster. Generally if you purchase an image online from a stock photo supplier, they will have images in a variety of sizes, the smaller images usually have pixel dimensions and dpi suitable for display online. This step does not apply to that type of image as the stock photo supplier has already done that in their post-processing.
Step Two: Adjust Image Levels
This is the second step. Most images, when they come straight out of a digital camera may need contrast and exposure enhanced to improve color and remove dullness. Here is an excellent video tutorial on how to use the Levels control in Photoshop (it works in a similar way in most photo editing software). Click on the image below to view the Beginners Photoshop Levels tutorial video.
Step Three: Adjust Vibrance and Saturation
This is typically the next step in post-processing images for web design. Digital cameras are quite good at producing accurate color. Truth be told, making colors a bit brighter and more saturated than they appear in real life often produces a more appealing photo. To do this, I generally use the Vibrance / Saturation adjustments in Photoshop. These are adjustments that are available in all photo editors as well. Here is a video that explains the use of the Vibrance / Saturation Tool in Photoshop. Click on the image to view the video.
Step Four: Final Cropping, Resizing, & Sharpening
After I am happy with the overall color and tone of the image, I do the final cropping and resizing to the exact size needed in my blog or website. This usually involves reducing the size of the image. I generally avoided enlarging the image as this reduces the quality.
Once the image is the size I need, I apply sharpening. This is a subtle enhancement that can make an image look artificial if overdone. This final sharpening is the last step take taken in processing the photo before saving it for use in my website or blog. This is because doing any other enhancements can destroy the effects of sharpening. I always use the “Save for The Web” command in Photoshop to produce the optimized quality I need for the Web. Here is a video that walks you through the ways you can sharpen the final image:
So, there you have it! These are the basics steps that will make the images that go into your web design much more appealing. Of course, there are more advanced tools and techniques that can be employed. As you become comfortable in editing images for Web use, you will not doubt learn about these techniques.. There are plenty of online resources that will help along the way. I hope you find this helpful!