What Size Should My Images Be?

"Image Size" usually means two things:

  1. First is the dimensions of the image such as 150 x 100 pixels.
  2. Then there is the file size of the image in bytes.

Image Dimensions

In this article, I only discuss images that you will add into your web page content.

The content section of typical web pages is about 500-600 pixels wide therefore your images need to fit inside that.  As for the height, let it scale along with the width to preserve the image's aspect ratio.

Image Dimensions Example: This image is about 500 x 300 pixelsImage Dimensions Example: This image is about 500 x 300 pixels

 

How to find the dimensions of an existing image

The easy way is to put your mouse over the picture then right-click and select properties (works in Internet Explorer and Firefox).

Image Property Example: The property dialog box.Image Property Example: The property dialog box.

 

Image File Size

The image file size needs to be as small as possible.  Remember that every byte of your web page must be download to a visitor's browser.  Big images will take too long and disrupt the flow of the web page loading.

In general keep the file size under 100 Kilobytes. Even better, less than 50K.  The file size is directly related to the dimensions so a big picture will have a larger file size.

Additionally, JPEG files allow for varying quality so reducing the quality of the picture can help too.