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:
- Photoshop – File > “Save for Web and Devices…”
- Pixelmator – Share > “Export for Web…”
- Acorn – File > “Web Export”
Usually, it’s best to save photos as jpg files as the jpeg format handles color transitions well. Once you choose an appropriate size for the new image, you can consider reducing the number of colors. Typical options are 256, 64, 32, 16, and 4 colors. A photo of a white cloud against a blue sky might look great using only 16 colors, whereas a landscape scene may not. Just try each and see where it starts to look crappy, then choose the next larger one. Easy!
For graphics or images with hard edges or transparency, however, it’s best to use the png format. (PNG has largely replaced the older gif format for such purposes.) For example, I wanted to use a photo of a pie with a transparent background for a new site. I found a 2MB photo including a pie on my laptop and I painstakingly erased everything but the pie, leaving a transparent background. (I just wasn’t happy with the results from the Magic Wand Tool, if you must know.) As I mentioned, photos look best in jpg format, but jpg does not allow transparency. so I adjusted the size to what I wanted and saved the file as a 113KB png file. I tried this in all three apps and achieved similar file sizes.
2MB (2000K) to 113K is a pretty good reduction! Still, it made the page load too slowly for my liking. Since I’m displaying my floating pie masterpiece on the home page of a site used to register domain names (which has the potential of lots of page views) I wanted to squeeze it down even further. On the other hand, if I was just adding the image to a blog post, I might have just used the 113KB file. Or maybe not.
I told you all of that to tell you this
While all the software tools I mentioned would easily resize a png image, I could only figure out how to reduce the quality (i.e. number of colors) in Photoshop. I played with “Posterizing” (Image > Adjustments > Posterize…) as suggested by this site and even converted the file to jpg, reduced the colors, then exported it back to a png. Both techniques worked to reduce the size, but frankly, the results looked amateurish. I’m sure a professional designer could get better results using any of these tools, but as I stated at the beginning, that ain’t me.
Run the resized png file through two free and simple to use tools: ImageAlpha then ImageOptim. I realize this may not be the climactic finish I lead you to expect, but dare you sneer at the elusive simple — and even more rare — free solution? Try this:
- Download and open ImageAlpha
- Download and open ImageOptim
- Drag the image file onto the ImageAlpha window
- Drag new smaller image onto the ImageOptim window
Done. Upload the now tiny file to your website.
Results: 23KB image that looks almost as good as the 113KB original.