Many websites offer a method to resize images after the image has been uploaded.

Some systems are really quite good, but others leave a lot to be desired in the quality of the image after being resized.

Some only give the illusion of being a smaller image instead of actually resizing the image.

When images are resized correctly before being uploaded to your website, graphics are more crisp, your website is faster to load for visitors, you get more out of your web quota and it takes much longer before you need to worry about exceeding your bandwidth. All really great things!

The concepts covered in this brief overview are:

• Image Quality/Compression: The higher the quality, the larger the file size of the image. The more compressed an image is, the lower the file size but also the lower the quality. Simple images compress well with little visible quality loss, while bright, detailed photos will not.
• Image Resolution: The visual dimensions of the image. The common measurement on the web is pixels.
• File Size: The file size of the image (and other files on your computer) affects how much disk space the file takes up, on your computer, on your web host, and the amount of data that is transferred to visitors viewing your website.
• Disk Space: This is the amount of space that is available on a system, for example, your computer or your web host. Files, including images will take up an amount of this. For this topic, we will be focusing on the Disk Space that is available to you on your hosting service.
• Monthly Data Transfer/Bandwidth Limits: This is often incorrectly referred to as "Bandwidth" in web hosting, I will mention it here as such since is commonly understood this way. Each time a user views information on the Internet, data transfer occurs from the web host to the viewer's device. The more data, the quicker the monthly data is used up.

What did you mean by "the illusion of resizing" earlier?

Sometimes when uploading images to websites, the website will take your image and process a change to reduce the resolution and then save this resized image on the server. Some server-side processing software is great, but often the result isn't as good as resizing done on your local computer.

At other times (most common), when uploading images to the server, the server will store the image at the size you have uploaded and choosing "resize" / "dimensions" will just visually change the size of the image. When an image is only "visually" changed, there's an instruction sent to your browser to display an image at a certain resolution, when it is actually a different resolution on the server.

I don't really understand what you mean...

That's okay, this is a concept best shown with examples!

Our 3 Example Files

We will be using 3 image files to illustrate concepts. You will see many occurances of images on this page, but the source will be one of these 3. They are all from the same photo, but saved at different resolutions before uploading to the web server:

1. image-example-1500.jpg - Click the link to have a look. If this image appers to fit your browser window and you are not running a large display, hover over the image and click it once as this will in most cases causet he image to be displayed at 100% zoom. It should take up a fair bit of screen space and is considered very large for the web.
   • Width: 1500px
   • Height: 1125px
   • File Size: 254KB
2. image-example-350.jpg - Click the link to have a look. What you should see is the image at 100% zoom and at a reasonable viewing size. Not too small, but not too large ... a suitable size to have text wrapped around the image on a webpage.
   • Width: 350px
   • Height: 263px
   • File Size: 31KB
3. image-example-100.jpg - Click the link to have a look. What you should see is the image at 100% zoom and it is relatively small. You will usually find "thumbnail" graphics around this size.
   • Width: 100px
   • Height: 75px
   • File Size: 4KB

Now, let's have a look at all 3 images at once

They have all been uploaded to the server at different resolutions but we want to display them as 350px wide on the website.

	image-example-1500.jpg is displayed at about 1/5th of it's actual size. You can think of it as taking the original large resolution image, and then squishing it to to display smaller on the fly. This is similar to what Windows Picture Viewer does on your PC to large photos straight from your digitial camera to fit them on your screen but not as smoothly. Depending on your browser, you should notice the edges of detail in the photo are a bit pixelated/jagged compared to the below image-example-350.jpg.
	image-example-350.jpg is displayed at it's actual resolution. The detail of the image is nice and clear, with smooth lines and no jagged edges.
	image-example-100.jpg has been "blown up" to 350px wide. However, the original image is only 100px wide. You can see here that the image is lacking a lot of detail as we've stretched the image out to be 3.5 times its actual resolution.

The above 3 look similar to me... How do you know whether the dimensions are "real"?

Many browsers will allow you to Right-Click the image on the screen and choose "View Image"/"View Image Source" which will open the image, by itself to view the image at its real size.

Try this on all 3 of the above images. Whenever you "View Image" and the source shown is bigger or smaller than what you see on the website page, you'll know that you have been viewing an image at something other than its actual resolution.

I can see that enlarging the small image looks poor, but the larger images look OK when shrunk down.

Right. Although in some cases you can tell that the image quality has dropped (when changing the display size up), in others it isn't that obvious (when changing the display size down).

The other important aspect of displaying images at their actual dimensions is their file size. The larger the resolution and more details that are in an image, the bigger the size of the file.

• image-example-1500.jpg is 253 KB
• image-example-350.jpg is 31 KB
• image-example-100.jpg is 4 KB

In terms of Disk Space:

1500.jpg takes up approximately 8.5 times more disk space than 350.jpg which means if you have many images stored on your web server at this size, your disk space will become full a lot quicker.

When your disk space is full, you cannot upload any more files to the server. Also, if your web host is also running your email, if the disk space is full you will not be able to receive any more email until space is cleared.

In terms of Monthly Data Transfer limits:

As mentioned above, 1500.jpg takes up approximately 8.5 times more disk space than 350.jpg. Apart from the space it takes up sitting on the server, this is the same amount of data that is transferred to visitors when the image is viewed.

If 100 visitors viewed 1500.jpg, they will have used up 25,300KB (or approximately 25MB) of your monthly transfer limit. If 100 visitors viewed 350.jpg instead, they would have used 3,100 (or approximately 3MB) of your monthly transfer limit.

This is an important value as when your monthly transfer limit is exceeded, your website will not be viewable. Instead, an error message appears to your visitors along the lines of "Bandwidth Exceeded". You will then either have to wait out the month or negotatiate a bandwidth increase with your web host.

In terms of Performance and Speed:

So we have now covered the impact of file size on Disk Space and Monthly Data Transfer Limits. The other part relates to website performance and speed.

The larger the file size of an image, the longer it will take to be downloaded by visitors and the slower your website will be to load and cumbersome to use.

Make your website fast and easy to use, and you will reach a wider audience.

Okay, okay, I get it. But HOW do I resize images on my computer first?

What you will need to resize computers is software for image manipulation. There are some great name brands out there for complex image work (Photoshop, Illustrator, Fireworks) but there are also free options that will do the job.

Irfanview is a free image editing software we recommend: http://www.irfanview.com

When you have downloaded and installed the software, open up Irfanview.

1. Go to "File" -> "Open"
2. Browse to the image you wish to resize.
3. Select it. and click "Open"
4. It's a good idea (at least to start off with) to always view the image in its original size.
   1. Irfanview may open the image at 100% zoom (where it will likely be large) or zoomed out. You can tell the level of zoom by looking at the bottom of the Irfanview window in the Status bar. The 3rd section along is a % value.
   2. Go to "View" -> "Original Size"
   3. You will now see the 100% in thee Status Bar.
5. Go to "Image" -> "Resize/Resample"
6. Make sure that "Preserve aspect ratio" is ticked.
7. In the "Set New Size" section, choose "300 pixels" as the width (or larger/smaller depending on your needs). As you are preserving the aspect ratio, the height is automatically adjusted to fit.
8. Click "OK"
9. Go to "File" -> "Save as..."
10. Give your file a name and choose a location to save it on your computer.
11. In the "Save as type" dropdown box, choose JPG (there are other image formats as well).
12. A window should have popped up titled "JPG/GIF" save options,
13. On the "Save Quality" slider, choose 70 (this means 70% quality, usually a good balance between keeping image detail and compressing the image to reduce the file size).
14. Leave all other options alone and click "Save" to finish saving your file.

You're all set now. Upload this image to your web server and use as per normal.

You should notice it's a lot quicker to upload than if you'd uploaded the original large image too!

In Summary

• Resizing an image locally before uploading to the server:
• Looks better on screen
• Will not take up unnecessary disk space
• Will not chew through your monthly data transfer (especially if your website has many visitors)
• Will aid fast loading of your website across a wider audience

Please note that images are not the only factor affecting site performance, disk space and data transfer. However, they are often the most common cause of slow loading websites and do not require a lot of technical know-how to fix.