Optimising images online

One of the graphic aspects that business site owners sometimes overlook on their website is using HTML to change the display size of an image or graphic.

Here’s an example: on a website today, I noticed a tiny image loading really slowly (even though I’m surfing the web on broadband and the rest of the page loaded quite fast).

It was a sure giveaway that the image was really large and that it had been resized (width and height settings) in the HTML coding to display much smaller.

The display size was tiny: just 186 pixels wide by 25 pixels high.

When I viewed the actual image, it was a whopping 3456 pixels wide by 2304 pixels high!

In total area, that’s 4,650 pixels at the small size vs 7,962,624 pixels at the large size. So, in effect, the display size was less than 6 percent of the uploaded image size.

That causes a few problems:

The image loads very slowly, making the website visitor’s experience worse because images aren’t displayed quickly
With the way the image was displayed (186×25), the proportions have distorted the original image to a more landscape shape (squashing the image) — which results in a poorer display
In turn, that reduces the “professional” appearance of the website (which you want to maximise)
It also means that instead of “serving” up an image of around 2kb, the image is 3.56Mb (3,567kb) — that’s a lot of data allowance being wasted (which you might need to pay for!)

Any kind of resizing will generally make the image display look like it’s of lower quality.

So what should have happened?

BEFORE the image was uploaded to the server and displayed via the HTML code, it should have been resized to the exact display size. That’s what “optimising” an image is all about: making sure it is the optimal size for how you’re going to display it.

How do you do that?

The image should be opened in an image editor (offline editors like Photoshop, Photoshop Elements, Fireworks, the free Picasa etc; or online free editors/apps like Picnik or Photoshop Express) — cropped and adjusted as required and then exported/saved at the size it will be used online (186×25 pixels).

The cropping is important so there’s no squashing/distortion of the original picture. And also, a good web graphics operator would have lightened this image a fair bit, as the original was quite dark (so it’s hard to make out what it is supposed to be).

That would then create a tiny file (under 2kb as mentioned), at the size it will be used (”100% sizing”) on the webpage.

I actually cropped, lightened and resized the image as a test, and the resulting optimised image turned out to be 1.75kb.

So why does this kind of problem happen?

Usually because it’s a non-experienced person who has edited and uploaded the changes to the website. I can tell from this file that it was taken with a high end Canon EOS 350D camera — which is why such a large image (around 8 megapixels) was produced.

They then grabbed the image, included it in the page design, resized it within the HTML to the tiny size, and uploaded the image and new page coding (and probably wondered why it took so long!).

In the middle, they simply missed the step to properly prepare the image (optimise it).

An optimised image means page loading is faster, visitors are not slowed down by an image “taking forever” to display and there’s no excess data usage on the server (potentially saving 100’s of Mb of download data).

In this case, it’d save around 3,565kb for EVERY visitor to the home page — even with just 100 visitors per day (which is probably a conservative estimate for the site in question), that would add up to over 10.6 GIGABYTES of data saved every month!

For all of these reasons — make sure YOUR images are optimised on your web pages!

20 April 2008 | Filed Under Web Tips