why is it that when a digital picture is loading on a monitor it shows up blurry and then clear instead of showing up top to bottom like a printed out picture?

287 views

why is it that when a digital picture is loading on a monitor it shows up blurry and then clear instead of showing up top to bottom like a printed out picture?

In: Technology

This is a stylistic choice that web designers put in. They store two copies of the picture — one extremely low quality (and therefore low file size and fast to load), and the original or high quality version. They will quickly load the low quality one and put a huge blur on it, and then progressively unblur it as the high quality version loads, until they finally switch to it.

This is something you do when you want to prevent people from thinking that the site isn’t loading. If you just displayed nothing until the picture loaded, you might find some users thinking it’s broken and mashing the refresh button, making the whole process take longer. By including this lazy-loading mechanism, users can “see” their picture loading, so they’re less likely to assume there’s a problem.

The general idea is that you have a “preview image” that’s more compressed and/or a smaller resolution, which leads to a smaller file size than the original. The loss of details isn’t noticed because the blur effect is added. This all allows for extra time for the original image to download in the background and then is swapped in for the blurred preview image.

It’s a technical choice.

The vast majority of digital pictures online are JPEGs.

JPEG offers two different ways of encoding and ordering the data in the file:

* A **baseline** JPEG will load from top to bottom like a printer. (Fun fact: You can make one load from bottom-to-top or side-to-side if you want.)
* A **progressive** JPEG will load a very low-quality version of the image and then successively higher quality ones.

I think it’s also possible, in Javascript and CSS code, for an author to make a webpage intentionally load very low quality versions of images that are off-screen, and only load the higher quality versions when you scroll down to them.