Adding photos the right way

Living in the countryCredit: Javrsmith

By now, you may have heard that adding photographs to your Infobarrel article is a good way to improve viewing statistics. The Internet is a multimedia platform and your articles should be too. The easiest way to do this is to add photos. Infobarrel supports this feature and most viewers expect photos to be displayed on content pages.

The pictures you use on Infobarrel articles should represent the topic. Don't add a photo of puppies on an article describing kittens. If people come to your article expecting kittens, give them kittens. This is as true of text content as it is for photos. Your words in the article should describe the topic and so should the images.

The title of your Infobarrel article photos is also important. Many times, our digital cameras use a generic filename for photographs, something like "IMG122.JPG". These devices do not know what the image subject is. You do. NEVER leave your filename as it was created by your camera. Instead, change the title to match either the topic of the article, the subject of the photo, or both.

Here is this concept in action. Which of these image filenames convey information to the viewer?

IMG233.JPG          Red-flower-displays.jpg

Obviously, the filenames with real words can convey information. The file with "flower" in the title is likely a flower image. Often, however, the filename is actually obscured from the viewer. The importance of the filename is for search engines.

img233Credit: Google

The major search engines like Google, Yahoo, etc, do not obtain content information from the actual image in a file. They cannot rate your article's importance based on an image, yet. They can, however look for clues as to the value of your content. One such clue is the image filename. The "IMG829.JPG" filename conveys no information to views nor to a search engine. "Red-flower-displays.jpg", on the other hand, indicates to the search engine that the image pertains to flowers. As the search engine examines the article, keywords also indicate that the article pertains to flowers. Other elements, like backlinks, reinforce the flower theme for the article.

With your filename properly indicating the image subject, and your topic, your article gains a level of importance in search engine listings. Sometimes images uploaded into articles do not preserve the filename that you give your images. This is even true with Infobarrel. The filename is changed when stored on the server. Luckily, the media upload facility gives you a tile facility and a description box. Use these to enter the subject of the image. These are used in the media storage section of Infobarrel. In time, your supplied filename may be used so start giving your images meaningful names now.

After your images are stored with correct filenames and/or Infobarrel titles, you improve the information conveyed to search engines. You also give your article an automatic backlink. In addition to the article that you have published, search engines will examine your media files. This is where the power of the image can really help you. The search engines will notice your files with descriptive names. Later, when someone searches for red flower images, there is a good chance that your media page will be referenced. If a viewer sees your image, they will likely view your article next.

Another factor to consider is the page load time for your article. While there is not a lot you can do to improve this factor, you can improve the time that your article images take to load. You do this by optimizing the photo before you load it into your article media section. Make the photo as small as possible, but large enough to be helpful. The size of the photo is measured in pixels. A very small image might be 100 pixels across by 100 pixels high. An image twice as large requires twice as many pixels and twice as much storage space. More importantly, a file twice as large takes longer to download to a viewer. Obviously, the number of photos is key as well as 10 photos take 10 times as long to load. Use as many photos as you need, but only that many.

Often when photos are loaded into article content sites like Infobarrel, the publishing facility allows the author to adjust the image size just prior to finalizing the article. Unfortunately, this is likely a bad practice. Adjustments to image size made in this way actually have no effect on file size or page load time. Instead, the image is adjusted by the display mechanism. Image load times are not improved, and may actually be worsened. If an image of 300 by 300 pixels is to display as 100 by 100, the file size is still three times larger than it needs to be. Page load time will be three times as much as well.

Instead of using the publishing facility to adjust the image size, use an image manipulation tool prior to uploading the file onto Infobarrel. Such free tools as "" can be used to crop the image to remove extraneous material or to highlight relevant image areas. They can also be used to scale the image down to the required size. Importantly, image tools make the file size smaller as the image is reduced in size. This improves the resultant load time.

Another very helpful tool is an image optimizer such as Dynamic Drive's online application. This tool takes your image by either a file upload or an Internet URL if it is already live somewhere. By adjusting the sharpness of the image, the application can make images smaller. If you click the box to display all results, you can see the effects of the image adjustments.

Here is the same image as the top of this article but rendered at 70% clarity:

Optimized photo 70Credit: Javrsmith


Here is the same image rendered at 10% clarity:

Article photo 10Credit: Javrsmith


It is your responsibility as an author to determine which of the image versions you should use on your article. You do this by trying the optimizer and comparing the resulting images. Can you live with reduced clarity in order to save space which speeds page load time? It will depend on the image. Very complicated images with a lot of close up detail, will need a lot of clarity. Very large images need clarity as well. Smaller or less distinct images will not suffer as much.

The amount of space saved by image optimizing can be quite significant. The sample image used in this article is a 3200 pixel by 2400 pixel photograph taken by an ordinary 8 megapixel camera. The original file, called "IMG358.JPG", is 3.8 megabytes in size. This image might take 12 seconds to load on a web browser if the viewer has a fast Internet connection.

The image used at the top of the article was scaled down to 640 by 480 pixels. The file size dropped to 247 kilobytes, or 6.5% of the original image size. It loads in slightly less than 1 second.

The image used above at 70% clarity saves 68% off the top image's size. At 78.5 kilobytes, this image loads in half a second.

Finally, the image used above at 10% clarity is a reduction of 84% from the article image size, barely 1% of the original image size as created by the camera. Examining the image, we see that it is quite grainy when optimized this much. It would likely not be useable for an Infobarrel article, especially when shown at the large size that it is above.

Here is the same image scaled down by Infobarrel:

Article photo 10Credit: Javrsmith

At this size, it is not all that bad. It is certainly recognizable as a country scene. You may not be able to identify the setting correctly but someone from the area in England might be able to. While the 10% size shown in the larger photo above might not be acceptable to you there, at this smaller size, it might be. As you can imagine, the amount of file space it saves is significant. Such savings really improve page load time so it may be well worth it to use files even at 10% clarity sometimes.

As an Infobarrel author, you should do what you can to improve your articles. Adding photos is important but helping these load quickly should be your goal as well. As you can see, you can have good images and fast load times if you use the tools that are freely available.

Here is the same image rendered at 10% clarity: