Preparing Pictures for the Web

A woman who had been to one of my seminars at SCORE wrote the other day:
“I am in the process of having a web designer build my site. However, she mentioned that the product pictures that will be on the site need to be made “web ready” (72 dpi, RGB color, and no larger than 800 pixels wide or tall). Is this a service that you offer? Or do you know someone who could do this for me? ”

Now, I work by the hour as well as the project, so I don’t have any problem with helping her out. Dealing with product images for a web site is an ongoing challenge for small businesses, particularly craft oriented business where the product and the pictures are produced by the owner. Her question (and I’ve seen it before with several clients of my own), raises several issues.

What does web-ready mean?

Yikes! This baby picture is huge!
Yikes! This baby picture is huge!

All of us have received those baby pictures in our email where the image is so large, it takes 5 minutes to open and all you see is a giant eye. This is how the image came off the camera. Different cameras produce different size pictures, the more megapixels, the bigger the image. The primary purpose for these giant images is so you can print them. Print likes high resolution. Web images need to be at a lower resolution and as small as file size as you can manage. No one want to wait 5 minutes for your pictures to download on your site. So, web ready means pictures that have been cropped to the size that will be used on the web page and “saved for web” at the low resolution of 72ppi (pixels per inch) – the resolution that your computer monitor is. Size is determined by pixels; a rule of thumb might me that thumbnails are not bigger then 150 px in either direction, “medium” images no bigger than 300 px and “large” no bigger than 800 px. Most websites are between 750 and 1024 px wide.

Photoshop is the most commonly used program to get an image web-ready, but it’s lighter version Elements, Gimp and my favorite little share-ware program Irfanview all have the ability to help you re-size images. For more information on resolution, file management and other image related web topics you can check out my article Creating Graphics for the Web.

Find Those Images!

Along with getting the images web-ready by sizing them correctly, paying attention to how the files are named and described will go a long way to optimizing your site for search engines.

Titles – no one knows what dsc0012.jpg is but everyone will know what sparkly-butterfly-barrette.jpg is. Naming your images to match what they are or what your customer might be searching for will go a long way to helping them find you.

“Alt tags” – along with the file title, every web image has the opportunity to have an alt tag or alternate description attached to it. This serves 2 purposes; for those who don’t have the image, (cell, screen readers) they know what it’s supposed to be and like above it helps the searchers find you. Use keyword rich descriptions in your alt tags. If you’re handing off the images to a designer, give them the image descriptions along with your regular page copy.

DYI

If you are running your own craft based business and taking product pictures is going to be an essential and ongoing part of your business, then I really do recommend finding a class or tutor and investing in a decent camera and software. Of course, you can hire a photographer to do all of this for you, but if saving money in the long term is your goal, making the up front investment and learning to take and edit your product images yourself will save you real money when it comes time to have your site built and updated.

Like with most things it all comes back to time and money and how much your time is worth. If you spend 20 hours doing something I could do in 5, was it worth it? Many people only look at what something costs, but don’t factor in what their own time is worth.

I’m not a real advocate of doing everything yourself when it comes to web design. After all, I’d like to have enough clients to pay my bills, I’d rather have my car serviced by someone who has been trained and really knows what they’re doing and if you’re running your own business, that should be where your expertise lies. I do think however that understanding enough about how images and files are prepared for the web so that you can talk intelligently to a designer and even do some of the repetitive work yourself is a good thing.

Further Resources

The Secrets to Optimizing Your Site for Image Search

Creating Graphics for the Web

Glossary of Web Terms