If you have a website, and you have even 1 picture on it, you need to resize the picture for the web. I know that you can go in the html code and limit the size of the picture as it’s shown on the webpage, but that does nothing to reduce the file size of the image.
You need to reduce the file size of the image. Let me explain why:
If the original image, is 2400×1900 pixels, taken on a 7 Megapixel camera, that image can easily be 5 MB in size. If connected over an average high speed cable modem, that 5 MB image will take anywhere between 30-90 seconds to load.
If someone is looking at a series of photos, how many times do you think they’ll be willing to wait 30-90 seconds for a picture to load before moving on? Even if they stay, what kind of user experience is that?
Limiting the size of the picture, in the html code, only limits how the picture is displayed on the page. It does not change the file size of the picture.
So, how do you fix it?
Fortunately, there’s an easy fix for this. Here’s how you do it using Photoshop CS4:
- Open the image in Photoshop CS4.
- Go to the File Menu and select “Save for Web & Devices…”
- The image will open in a new window where you can resize the image by toggling the pixel count in the field on the lower right, as well as let you change other settings.
- I suggest setting the image size to no bigger than 800×600. This image size will suit most web pages, but you can certainly pick a smaller size if it suits you better. There’s no need to change anything else in this window.
- Select Save, give the image a new name.
- Upload the new, smaller file size image to your website.
Most, if not all other image editing applications have a similar menu.
Look for it and use it.
There are even some websites that allow you to crunch and resize images online, so you don’t even really need image editing software on your computer.
Going back to our sample, that same 5 MB picture, compressed for the web, saved at 800×600, is now only 47 KB in size and will load in under 3 seconds over the same connection.
The best part, is that most users will not notice the difference in quality between the large, slow loading picture and the small, fast loading one.
They will however, notice the difference in how fast your site loads.
If you want, you can even put a link for someone to view/download the high quality image, but there’s no need to load a high quality/ large file size and slow loading image by default.
