Let me start by stating:

• I’m not a web-designer.
• I’m a hack at Photoshop.
• I’ve fumbled with Pixelmator and Acorn.
• If your working in Windows, I can’t help you.

I build a lot of web site concepts and write a fair number of blog posts. Regardless of which I’m working on, I like my sites to look good and open quickly. The key to both of these goals is to use nice screen-optimized images.

If you just take the picture you snapped with the 8 megapixel camera in your new iPhone and upload it to your site, it may look great, but the file size will be gigantic. Large images load slowly and that will annoy your visitors.

What’s the problem?

Large image sizes allow you to print large photos. According to the handy Design215 Megapixels Chart, a photo taken by an 8 megapixel camera has a pixel resolution of 3264×2448 and will look very nice when printed as an 8×10 inch photo at 300ppi (pixels per inch). What does that mean? It means your image will look nice when printed. The more megapixels, the more you can enlarge the printed photo without it looking pixelated or blurry.

The thing is, most computer screens only display 72ppi, which would, if my math is correct, display your 8 megapixel image at around 42×32 inches. That is considerably bigger than my monitor, or for that matter, my dining room table. This is a ridiculous size, of course, so you will probably specify that WordPress (or whatever) constrain the image to fit on a normal web page at, say, 300×219 pixels. What happens to all that extra detail and size? Nothing. Your site visitors will have to load your entire giant image yet it will display the same as if it were a less detailed, much smaller image.

Why not just use a less detailed smaller image in the first place?

Because that doesn’t make you want to buy a new camera. Sorry, I mean, great idea! Here is what you do: [Read more…]