Technology in terms you understand. Sign up for the Confident Computing newsletter for weekly solutions to make your life easier. Click here and get The Ask Leo! Guide to Staying Safe on the Internet — FREE Edition as my thank you for subscribing!

Blurry images: why do images on some web pages start out blurry and then clear up?

Question:

My images are coming through ‘blurred’ when I first call them in; and only
start to clear after maybe 1 or 2 seconds when they get progressively clearer
until reaching the correct resolution. Do I need to download something from
somewhere to enable my images to come straight in at maximum resolution?

It’s not your problem, and there’s nothing you can, or need, to do about
it.

In fact, in classic software parlance: it’s not a bug, it’s a feature!

Let me explain why.

Become a Patron of Ask Leo! and go ad-free!

Jpeg image files (typically files ending in “.jpg” or more rarely “.jpeg”),
can be created to display in two different ways: “Standard” or “Progressive”.
When displayed, a standard jpeg will typically be drawn from the top down, one
line at a time. A progressive jpeg, on the other hand, will display over the
entire image area, but in several passes – each one with more detail than the
last.

It’s that last type of image you’re probably seeing. And as you can probably
see, it’s not something you control – whomever created the image elected to
encode it this way.

The question of course is: why?

The surprising answer: bandwidth.

The question is if you’re downloading an image over a low connection (or
even downloading a large image over a fairly fast connection), how soon will
you realize that the image isn’t worth waiting for?

“It’s all a matter of … how much the image creator
wants you to see, and how quickly.”

Let’s say the image is downloading and you’ve received 1/4 of the image
data. For a standard jpeg, that means you’ll see roughly the top quarter of the
image. For a progressive jpeg, that means you might see the entire image, but
it’ll be “out of focus”.

For some images that standard format top quarter, in focus, will be enough
for you to know what the rest of the image is going to be. For other images
it’s not. For some images that first progressive format “out of focus” image is
enough. For other images it’s not.

It’s all a matter of how much you want to see, and how quickly. Or rather,
how much the image creator wants you to see, and how quickly.

The good news is that a) the size of the same image encoded either standard
and progressive isn’t all that different, and b) the result when they both
complete downloading is the same.

And with internet download speeds increasing all the time, the actual
difference is rarely important – most images display before you even realize
that they’re one or the other.

Do this

Subscribe to Confident Computing! Less frustration and more confidence, solutions, answers, and tips in your inbox every week.

I'll see you there!

11 comments on “Blurry images: why do images on some web pages start out blurry and then clear up?”

  1. As I recall, the older GIF format has the same ability, only it was called “interlaced”. First, you get every 8th line. Then you get the lines halfway between them, resulting in every 4th line. Then another pass gives you every other line. And finally, the last lines are filled.

    Reply
  2. Gotta second Ken. When I first saw the title, I thought this would be about interlaced .gif files.

    But it’s not just about bandwidth, it’s about page load time. IIRC, under certain circumstances, portions of a page will not render until all of the elements for that portion are downloaded. If you have a standard .gif or .jpeg in that portion, the browser waits until the entire file has downloaded. But if you have a progressive .jpeg or interlaced .gif, the browser starts rendering the page as soon as it has the data needed for the first display pass on the graphics.

    So if you’ve got a slow server, a lot of users on dial-up, and/or a graphics heavy page, it actually allows them to view non-graphical parts of the page faster by using interlaced .gif and progressive .jpeg, because the browser doesn’t have to wait as long to render sections of the page that contain the files.

    Reply
  3. Why are all of the pictures, no matter what site I am on come up blurry? If I click on a single picture and say veiw original, then that one picture clears up….but even images, like the one on this page of the tip jar…is blurry!
    can someone please help?
    thank you

    Reply
  4. —–BEGIN PGP SIGNED MESSAGE—–
    Hash: SHA1

    Quite often that happens because of web or internet “accelerators”
    offered by some ISPs. They make pictures smaller and faster to download
    by compressing them more, at the cost of clarity. I think most
    accelerators have ways of adjusting that tradeoff, but you’ll need to
    check with your ISP.

    Leo
    —–BEGIN PGP SIGNATURE—–
    Version: GnuPG v1.4.6 (MingW32)

    iD8DBQFF6bWgCMEe9B/8oqERAlyjAKCEHmcVVcViyH8UCSNJ42w5jMVUKgCdGrob
    +wIgYb0zbxM+Emk6mA6IQTk=
    =nSGg
    —–END PGP SIGNATURE—–

    Reply
  5. Dear Mr.Leo,
    I have a problem related to the subject. Since last couple of months, the jpeg images either downloded or in a webpage show up hazy and are not getting corrected. Image remains blurred (with big tiles). I tried resolving the issue by reinstalling IE6 and then installing IE7. Problem remains.
    Is there any solutin without formatting and reinstallin g windows?
    Please suggest a solution.
    Thank you.

    R K Nair

    Reply
  6. I have a problem related to the subject. Since last couple of days, the jpeg images either downloded or in a webpage show up hazy and are not getting corrected. Image remains blurred (with big tiles). I tried resolving the issue by reinstalling IE6 and then installing IE7. Problem remains.
    Is there any solutin without formatting and reinstalling windows?
    and i faced this problem when i downloaded the plugins for 3D animation.thank you.

    Reply
  7. A response to R K Nair (two articles above):

    I have the same problem. The jpg shows (and remains) up blurry on some browsers, and is clear on others. After spending lots of time looking for an answer, bur finding none, I switched over to png format. Now the problem’s gone, and all images are clear on all browsers (as far as I know).

    Still, it would interst me to know how to get a jpg to be correctly displayed on all internet browsers.

    Reply
  8. please help. my pictures on the web and facebook and hotmail are blurred, how can we unblur them all, it tells me to ctrl F5 to make it clear and sharp to each page/picture. i cant keep on doin it to every picture. please help!!!!

    Reply
  9. Hi my pictures are blurry on facebook, if i hover the mouse over the picture it says shift+R improves the quality of this image.Ctrl+F5 reloads the whole page. its so annoying because when i do this it doesnt work..?
    whats wrong please can you help thanks!.

    Reply

Leave a reply:

Before commenting please:

  • Read the article.
  • Comment on the article.
  • No personal information.
  • No spam.

Comments violating those rules will be removed. Comments that don't add value will be removed, including off-topic or content-free comments, or comments that look even a little bit like spam. All comments containing links and certain keywords will be moderated before publication.

I want comments to be valuable for everyone, including those who come later and take the time to read.