Why do web pictures look blocky on my computer, but not on someone else's?

Home » Web » Web Site Management

Summary: Some techniques used to speed up your web surfing experience can do so at the cost of image quality. We'll look at how, why and what you might do.

My problem is that pictures of people in web pages look very blocky; you can actually see the pixels. I've checked all my settings, and they appear correct. I use IE, and Firefox, and its the same in both. Yet, if I go to my friends house everything looks fine on his computer. Any suggestions?

Two words: internet acceleration.

And another word: compression.

My guess is that your ISP is doing the second to achieve the first in order to provide you with a faster web experience.

But as you're seeing, that speed comes at a price.

•

First we need to talk about image compression.

The most common format for photos is "jpeg", or "jpg". Jpeg compression is what's called a "lossy" format. That means that if you take a perfect image and convert it to jpeg format, it's no longer perfect. Depending on a few things, you might be able to notice subtle, or not so subtle differences between the original and the jpeg version.

So why do it? File size.

Consider these three photo:

1:
2:
3:

Each are the same 320x228 image, saved as jpeg images.

A 320x228 image has 72,960 pixels. At 24 bits per pixel (the highest color depth usually used by consumers), or three bytes per pixel, that results in a file that's 218,880 bytes in size without compression.

Photo #1 above is actually 117,441 bytes because it's been compressed as part of the conversion to jpeg file format. Jpeg allows you to choose size versus quality, and photo #1 was saved with "maximum quality", which also implies a larger file size.

Photo #2 is that same image saved with roughly equal weighting between size and quality. The resulting file size is 60,782 bytes, but as you can see, the visual quality of the image has degraded noticeably.

Finally, photo #3 is the same image saved with "maximum compression" selected. You can see that while this is still somewhat recognizable, it's seriously degraded to the point of uselessness. And surprisingly the image is still 58,807 bytes in size. Smaller than photo #2, but that extra space saving certainly isn't worth it given the results.

Why does this all matter?

One of the ways that internet acceleration technology works is very simple: they re-compress images. When you browse the web and request a web page, the accelerator re-compresses some or most of the images you're about to download to a lower quality before you actually download them. Lower quality means smaller size, and smaller sizes mean faster downloads.

Particularly if you're seeing the same images show up at much better quality on a friends computer using a different accelerator, or not using one at all, then I'm guessing that this is happening to you.

You should have some way to control this. Exactly how I can't tell you, because that'll vary based on what ISP you use, or what acceleration technology is in use. If it's not obvious, I'd recommend contacting them and asking.

Just remember that you'll be making that tradeoff: do you want the pictures to download faster, or look better?

Related:

• Ask Leo! - Choosing an ISP: How do I choose a good ISP?

• Ask Leo! - Can my ISP monitor my internet usage?

Article 11441 | Posted May 1, 2007