Web and Graphic Design HQ

One of the common mistakes made with images online, especially by new users, is to have an image used in the website in smaller dimensions than its actual size.

Say, for example, you have an image that is 2592 x 1944 pixels (that’s around the size of a high quality image from a 5-megapixel camera).

The common error that occurs relates to using this image in its full size (that’s a large file!), but using the web design software (like Frontpage, Dreamweaver) to resize the display dimensions of your choice on your web page (most often to a much smaller size). An inexperienced user can even make this mistake in more modern online editing programs like WordPress (which powers this site).

Have you ever noticed, on some web pages, how some images are quite small, may only 100 or 200 pixels in size, but take forever to display? Most often, this is a really big image, but set with a really small size in the HTML coding.

Why is this bad?

There are 3 “costs” to you in doing this…

1. Your full page takes much longer to display, so your potential to lose visitors is higher
2. If you only have limited bandwidth, you’ll either use up that allowance unnecessarily — or, worse, if you pay for all of your bandwidth, you’ll pay much more than you need to
3. The perception of your website might be lower because visitors see this error and then may question your overall reliability, especially if you’re selling via your website.

The “trick” is to resize the image BEFORE you use it on your webpage. And there’s plenty of ways to do this.

Before you start, make sure you know what size you need. If you want your image to be, for example, 350 pixels wide (and a proportional height) — then note that down.

If it’s an image you’ve taken with your own camera, you’ll likely have software that came with the camera that is “user-friendly” in resizing images. There are also 100’s of image manipulation software programs available (from the design “industry standard” giants like Adobe Photoshop (large investment) to smaller more consumer-level programs like Adobe Photoshop Elements, to free programs such as Google’s Picasa software).

Picasa is one of the free software downloads in Google’s aptly named “Google Pack” — a free collection of essential software. It’s worth checking out, and the best part is that it’s free!

The good thing about something like Picasa is that it’s easy to use — although it also has a range of surprisingly powerful features.

Resizing an image in Google’s Picasa:

When you first install the program, it can automatically index all of your images. It’s easy enough though to add folders or files, or to import images from a camera or a scanner.

When you click once on your image, an information bar at the bottom of the page gives you the actual image size and some other data.

(If you want to play around with it, double-clicking on the image puts it in its own window, where you can perform some “basic fixes”, “tuning” and “effects” — lots of things for you to explore!)

For resizing, it’s very easy: you can simply choose “Export Picture to Folder…” from the File menu.

From that window, you have the option to resize the width (the height will resize automatically) — here’s where you choose the size you need.

In some ways, the operation is pretty basic — you can use the sliding bar to choose some standard sizes, or use your mouse to highlight to pixel size and change it manually to whatever you desire (eg, 350 pixels). (You also choose the location of the folder with your “exported” picture, so remember that too!).

For a lot of users, that’s all you’ll need to get a good result — no need for lots of fancy options like in a professional-level program like Adobe Photoshop.

Once you click OK, you’re done. The image will be ready to use at the right size. This is also known as “100% size” — that is, without distorting or changing the actual dimensions.

This way, your image will display and be viewed at exactly the size you need, without wasting bandwidth or slowing down the time it takes to load your web page.