In the early days of the web, one of the more exciting discoveries was the ability to add imagery to a webpage. While the page was still only static, it gave PR firms and marketers a new avenue to promote their brand. For a while, “brochure websites” were common, with many top companies testing the waters.

Today, images are everywhere on the web. They’re used for company logos, online auctions, application screenshots/tutorials, and personal photo collections. Unfortunately, I still see many people not taking enough time to really consider the photos they’re uploading. Specifically, I see these errors on blogs and news releases, many times from brilliant people who are hurting their articles!

While not everyone is a graphics expert, there are great tools out there to help you avoid the three major pitfalls I see. Most creative types use Adobe Photoshop or Image Ready. Pixlr is an online image editor that can help you with these problems – and it’s free.

1. Incorrect image values – The image’s width and height values are incorrect, resulting in a “squished” or “stretched” photo.



2. No breathing room – The image does not have any “breathing room”, nudging right up against adjacent content.
3. Poor image quality – No one wants to look at a fuzzy photo. Keep it sharp.
   

How can we solve the problem?

1. For our incorrect image values problem, simply find out the correct width and height of the image. On a Windows machine, you can find this out in an explorer window or by hovering over the local image file. On Mac, right-click/ctrl-click image and Get Info. Then, input the image’s correct width and height values into your CMS or HTML code.
   
2. The no breathing room scenario is most common. An easy fix would be to have a local resource modify your CSS file to allow for spacing around your callout images. This can be tricky as you might not always want this spacing on every image in the future. Pixlr can help here. What we’ll do is add some whitespace around the image, giving it the illusion of space. Load the webpage for the Pixlr application and you’ll notice it looks very similar to Adobe Photoshop’s layout. Simply open the photo from your computer or from a web URL via File > Open. Now, let’s expand the image’s canvas. In other words, we’re going to make the photo slightly wider and taller, filling the extra space with white. Click Image > Canvas Size and it will bring up the canvas controls. Here, you’ll add in new width/height values along with setting the anchor position. The anchor position will tell Pixlr which side of the image to expand. I want to extend my canvas 15 pixels on the top and right, increasing the size to 315px by 214px so I will set my anchor position to the bottom right:
3. Poor image quality means “get a new image!” You won’t be able to rescue the quality here so it’s best to try to revisit your original source for the image. If you have nothing locally, try to pull the image off its respective website by saving it down or using the popular ScreenGrab! addon for Firefox.

Looking for a more abstract photo? Here are a couple great resources:

• Flickr
• stock.xchng

Written by Marcel Moreau