Preparing Image Files Before Uploading with WordPress

Summary

If you upload very large images to your website, your website will slow right down when those images are viewed by your visitors.
The solution is to learn how to optimise (trim images down to size) before you upload them.

This article explains the two factors that control how big your image files are and provides links to some free / low cost tools you can use to optimise your images.

File Dimensions and File Size

Images have file dimensions (width and height, in pixels) and file size (Kilobytes KB or Megabytes MB). You can think of these as size and ‘weight’ if you like.

  • The image you see below is 350 pixels (px) wide and 233 px high and ‘weighs’ 20KB.
  • Click on the image to see the larger version, you’ll see the 800 px wide version which ‘weighs’ 80KB.
Grapes

350px wide Grapes - click to see 800px version

As your web page is usually going to have a content area of up to 984px, sizing your ‘large’ images to around 800 px wide should be quite adequate for a normal website.

In terms of overall monitor widths, most of your web visitors have computer monitors that are at least 1,024 px wide (more than 98%). Some may have very large monitors – 1,280 px, 1,440px, 1,680 px, 1,920 px or even larger.

Click the thumbnail for this next image and you’ll be looking at a 2,000px wide image that ‘weighs’ 120Kb. Chances are it will have to shrink down to fit your monitor (if not, I’m jealous). Make sure you maximise your browser before you click the thumbnail:

200 px Grapes - click to see 2,000 px Grapes!

200 px Grapes - click to see 2,000 px Grapes!

Images from digital cameras or from stock photo libraries can be very large, both in dimensions and ‘weight’. 4,000 px wide is not uncommon, and the file size can be from 2Mb up to 10Mb.

Clearly these images are far wider than most monitors can display, and the ‘weight’ would cause delays while the large files download.

These problems can be avoided if you prepare your images to ensure the dimensions are no larger than required, and the file sizes are reasonable for your purposes. As you can see from the examples above, your choices are pretty wide.

Preparing images involves reducing the physical size and file size, while still leaving the images looking good. Nobody wants tiny, grainy images on a website, and it isn’t necessary.

Inspecting size of images

To see how big your image files are, use Windows Explorer or the Mac Finder and inspect the file. On a Mac, you can view directly in the Finder:
grapes-file-information

From this you can see the image file (grapes-file-information.png) is 2,000 px wide by 501px high, and is 120KB

Dimensions – Physical size

For most websites, make sure your file is no wider than the width of your webpage.

If you are planning on displaying images with Shutter Reloaded in full screen mode (such as the wide image shown above), you might want to plan for your full size images to be 1,024 px, 1,280px or even wider. Larger images will be automatically resized downwards to fit them in the monitor resolution of each visitor.

When you upload an image, WordPress will automatically create:

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

You can therefore always choose to use your full size image, or the Medium or Thumbnail. These default file sizes can be changed under Dashboard, Settings, Media.

File size

This is the most important part of preparing an image for your website. Images with a large file size take longer to download to a visitors browser and 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 Tools

If you load images to your computer and are familiar with shrinking them before emailing, then a very quick way to optimise images can be to just email them to yourself before uploading to WordPress.

Otherwise yuou need a program to crop and resize image files. You can download and use these:

In most cases image management programmes will let you reduce image quality by a percentage. If you are dealing with large, hi resolution images, you can usually drop them to around 30% of original quality and not be able to see much (if any) difference. Experiment for yourself.

Here are some screen shots showing ImageWell and Picturesque reducing the file size to 30% of the original.
reducing-picturesquereducing-imagewell

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.

Could you tell the difference if you didn’t know which was which? And yet your website visitors would certainly know the difference if you litter your website with large files.

Grapes - 2,000 px wide at full quality 880KB

Grapes - 2,000 px wide at full quality 880KB


Grapes - 800 px wide at full quality 196KB

Grapes - 800 px wide at full quality 196KB


Grapes - 800px wide at reduced quality 80KB

Grapes - 800px wide at reduced quality 80KB

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.