Resizing Images BEFORE Uploading to Your Website
Doing It Right
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 Illusion of Resizing
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.
This is a concept best shown with examples!
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.
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.
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.
Are These Dimensions "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
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.
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.
Performance & 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.
How Can I Resize My Images?
Irfanview is a free image editing software we recommend: http://www.irfanview.com
When you have downloaded and installed the software, open up Irfanview.
- Go to "File" -> "Open"
- Browse to the image you wish to resize.
- Select it. and click "Open"
- It's a good idea (at least to start off with) to always view the image in its original size.
- 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.
- Go to "View" -> "Original Size"
- You will now see the 100% in thee Status Bar.
- Go to "Image" -> "Resize/Resample"
- Make sure that "Preserve aspect ratio" is ticked.
- 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.
- Click "OK"
- Go to "File" -> "Save as..."
- Give your file a name and choose a location to save it on your computer.
- In the "Save as type" dropdown box, choose JPG (there are other image formats as well).
- A window should have popped up titled "JPG/GIF" save options,
- 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).
- 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!