The skinny on images in web pages and email

[November 2008] Large pictures or photos take a long time to send and receive over the Internet. They make emails and web pages slow. Most people hate slow web pages and clogged up emails.

Optimise photos or other images to get your message across more easily. Read on...

Pixels are heavy.

The pixels that make up every image are 'heavy', so every pixel you remove reduces the 'weight' of the image.

This Tip gives you 3 techniques to trim the 'fat': 1] crop, 2] resize, 3] jpg. It also shares an 'insider's tip' on how to get someone else to do the work for you, and for free!

The instructions apply for images in both email and web pages.

Prepare: Always work on a copy.

If your images are precious, and maybe even if they are not, always edit a *copy* of the image and keep the original safe. When you optimise an image you change it forever.

Prepare: How big is my photo?

Take a photo, suck it into your computer, and then examine it. Chances are it is *at least* 450Kb in file size. The dimensions may be around 2000 pixels wide by 1500 pixels high, or more.

Windows users: Right click and view Properties. Mac users: Control click and Get Info (look under both General and More Info).

A handy rule of thumb when you make a web page is to keep any individual image to no more than about 400 pixels on the longest side, and probably less than around 25Kb in file size. If you need a bigger picture then link to it from a smaller 'thumbnail' image. Your visitors will thank you.

Step 1: Crop the picture.

Many photos can be improved by cropping out excess 'stuff' from around the edges. This also helps focus attention on the main subject. Whenever you crop an image you reduce both the file size and the number of pixels that make it up.

Step 2: Make the image size smaller.

Straight out of your camera a photo may measure more than 1500 pixels on each side. That's way too big for most people to be able to see the whole picture at once.

800 pixels maximum is a good size for a large version of an image on the web. Inside a web page or an email 400 pixels, or even 200 pixels may be quite sufficient.

There's a bit of an art to choosing a size. The best way is to try a few different sizes and balance out what looks best but 'weighs' least.

Step 3: Save the image as a jpg.

The jpg format (pronounced jay peg) takes advantage of the power of optical illusion. It actually throws away some of the pixels --- ones you won't notice. This makes the file size smaller. The jpg format is also one of the few file types that all web browsers and most email programs can handle.

Three trim techniques.

The above 3 steps can transform a huge 500Kb image into a 20Kb image, suitable for use in a web page or email message. But how do you do it?

My friend Flickr.

There are several options involving high or low cost software, but here's a free trick: use Flickr.

For example, I snapped a photo with my cellphone. It 'weighed' 570Kb, and measured 2,000 * 1,500 pixels. I uploaded it to Flickr and clicked the Edit Photo link. I used the buttons Flickr provided to crop and resize my photo, as well as to improve the exposure, then I saved the image.

Finally I downloaded one version at 800 pixels by 696. That version was 171Kb. I also downloaded a version at 240 pixels * 209. That one was 35Kb.

While I could achieve much better results with Photoshop (at more than $1,000), using Flickr's tools was free, and the file sizes were acceptable. See and compare two photos of my bike at www.flickr.com/photos/tikouka/with/2900690103

In the next Tip I'll show you how to create the HTML code for an image.

Panui tips contributed by Miraz Jordan, http://knowit.co.nz