Preparing Image Files Before Uploading with WordPress

Images have physical size (width and height, in pixels) and filesize (in Megabytes).

It is best to prepare your images before uploading to your website so the images aren’t too big. If they are too high/wide, they will usually be resized automatically (and sometimes won’t look right). And if the file is too large, it will take a lot longer to download (particularly for slower connections).

Preparing images reduces the physical size and file size, while still leaving the images looking good - see sample images at the end of this article.

To see how big your image files are, use Windows Explorer of the Mac Finder and inspect the file.

Physical size

Images from a digital camera will often be several thousand pixels wide.

For most websites, make sure your file is no wider than the width of your webpage. 760px is a useful guide if you don’t know what this is.

When you upload an image, Wordpress will automatically create:

• a Medium Sized version (300px wide by default)
• a Thumbnail (125px wide by default)

You can therefore always choose to use your full size image, or the Medium or Thumbnail.

File size

This is the most important part of preparing an image for your website. Images with a large file size take longer to upload, and worst of all, slow down your website.

For most ‘full page’ web images, you want the image to be 80Kb-100Kb at most. If the image is only part of a page (e.g. half the width of a blog post), then 20Kb-30Kb is usually fine.

Dropping image quality to 30-50% of the original usually doesn’t make any difference you can pick with the naked eye. Try it and see.

You can drop 2-3Mb images to 80kb-120kb and not really be able to see any change in quality.

Image Preparation Programs

You need a program to crop and resize image files - these can be downloaded:

• FastStone or PIXresizer (both free) if you are using Windows
• Picturesque or ImageWell if you are using Mac (both around $30). Watch the ImageWell videos to learn how to use it.

Sample Images

There are 3 versions of the same image shown below - click the medium size version of each to see the full version.

• First version 2,000 px wide by 1,333 px high. This is wider than most screens, so your browser will probably resize this one for you automatically to fit your window. It is 880KB in filesize.
• Second version resized to 800 px wide by 533 px high (will fit your screen) - just reducing the physical size (no drop in quality) drops the file size to 196KB
• Third version leaves it at 800 px wide but drops the file quality so the filesize is only 80KB.

Can you really tell the difference?

By the way, the *original* original version of this image is 11.5MB and 4,368 px wide. Really useful if you need to print the image, but no use at all for the web.