Let’s explore how to best use images on your website to reinforce the text for better conversion rates (for more sales or return visits).
Images reinforce text
Images can include photos, graphics, illustrations, logos of your own or that you create or purchase. Professionally photographed images may be a requirement for glossy brochures, but there are sections of your website which may work well with simple candid photos or basic diagrams. “A picture is worth a thousand words”, so use visuals to complement and help explain what you are saying in text form.
Dispose of unnecessary images
Do not include images unless they support the message of that particular section of your site. Don’t confuse visitors by adding photos just because they’re pretty. If the correlation of images to your text isn’t apparent enough, you are not only wasting space, but wasting the time of visitors. If they came to your site to find a solution to a problem, a photo of your family on your Services page may aggravate them since they have to scroll past it to find what they seek. However, that same photo on your “About Us” page may put them more at ease since they appreciate the human touch.
As many images as possible
Insert appropriate photos and graphics, even if they are not the primary subject matter. On the web, you have plenty of room to add them. Convey your message in seconds, saving viewers time and the work of reading those extra thousand words.
– Take the time to gather or photograph images if you don’t already have a sufficient quantity. Choose the best so your webmaster doesn’t have to guess what to use.
– Several small images may be better than one larger one, since you have more opportunities to show just what the visitor is looking for
– Besides products, people or places, images can be used as metaphors or to illustrate a theme: a clock to signify time savings; a handshake to signify a successful partnership; a lightbulb to signify an idea.
– Include actual photos of your organization rather than stock (clipart) photos. You’ll make more of an impact with the real thing!
Crop images
Page space is valuable, so before uploading photos, remove any excess space that is not important and ensure that the subject is centered in the image.
You must optimize the photo or graphic to reduce the dimensions and file size to an appropriate degree for internet viewing. Photos out of a digital camera may have dimensions as large as 4000 pixels by 3000 pixels and file size of 3-4 MegaBytes (MB). For the web, these numbers must be much lower, for instance, 300 pixels by 200 pixels and under 80 KiloBytes (KB). Follow these steps, generally:
Open the image in editting software such as Photoshop, Windows Picture and Fax Viewer, or another program that came installed on your PC or came with your digital camera, scanner or printer. Specific procedures are listed below for using Microsoft Paint, which comes installed on many PC’s. When you complete the following steps, you may want to “Save As” a different name, so that you still have a full size original.
1. Crop the image to get rid of any unimportant parts except for the subject(s) of the photo/picture. Also take the opportunity to adjust brightness and colors. Snapshots often need some brightening for proper display.
2. Reduce the width/height, maintaining the proper ratio. It may start as over 1200px of both and you need it to be at least under 500px for both for a very large display and as little as 150-250px for a large thumbnail size.
3. Doing both of these will greatly reduce the “file size”. For a regular size photo on a website, we need it to be under 80kb, unless it will be appearing in a new window as a blown-up size. If the file size is too high, many imaging software programs will allow you to reduce the “image quality” (for example, from maybe 95% to 85% or from 10 to 8 on a scale of ten.)
Image filenames
“Name” of image is something like “joe23.jpg” or “DSC001255.JPG” or “logo1.gif”. It is usually case sensitive so joe.JPG is different from joe.jpg. Do not leave spaces in filename. Underscore character is OK to use. To prevent typos, it is usually best to shorten image names.
Image format must be .jpg or .gif. If it has an extension such as .tif, .bmp, .swf, .png or something else, it must be changed. Since working with images can be time consuming, any of the above that you can do before sending them to a web designer will save you money.
More info in my website tips eBook.