It was quite visible on Dial-Up ages: Images would load painfully slow… from the top to the bottom. I can only imagine the frustration of a Teenage boy “studying”, only to find out that the image was cropped. Is there a reason for that? I mean, the image would load just fine if it loaded from left to right or whatever. Is is just the sequence of data that is written the same way as words? Or is there technical / logical reason for that?
A digital image on your screen is always a rectangular array of pixels, which can, for technical matters, be processed in any geometrical manner. So any reason why your download shows up line-by-line from the top will eventually boil down to “that’s the way we read a printed page”.
There were interlaced GIF’s which would draw lines at various places down the page early on , and then fill then in. Like top, middle, bottom, top ,middle, bottom…
Well as it turns out, few people bother to set that on, or to add it into their sofware,
so mostly the jpegs are linear not interlaced.
Historically, CRT screens scanned from top left. So when a graphics buffer was designed, it would usually address the on screen pixels in the lower quarter plane coordinate space. From there it is a short step to defining the screen coordinates this way, and thence to populating image files in the same manner.
As noted, it is possible to create compression formats that fill the image differently. Especially loading a coarse resolution version, and incrementally improving the resolution in stages. Jpeg supports this in the progressive format. Creating images in this manner had more popularity in the early days of the Internet, for much the reason the OP suggests. They are still supported, but the advent of higher bandwidths seems to have left most people unaware of the option to create them. Which is a pity.
I don’t think it is a pity at all! In fact some sites do still do this - the image first appears entire but blurry, and gradually get sharper! I hate it! It hurts my eyes as they involuntarily try to focus the blurry image. I have to look away or shut my eyes until it has loaded properly. There is no such problem with images that load from the top. (I have a 30Mbps connection, but some sites still take a few seconds to load their images.)
For those willing to forego compression, the Windows BMP format can, and often does, store pixels bottom-to-top. Apparently this reflects the in-memory layout.
In the GIF89a standard, there are fields for Image Left Position and Image Top Position to specify relative orientation of the image wrt the screen orientation. So one can encode an image upside-down or right-left or both.
Sometimes one came across such an alternately encoded image. Some decoders would be thrown off and display the image upside-down.
I believe similar fields exist for jpeg and tiff images. It’s custom, not a requirement.
Curiously, for a given compression ratio (image quality), I was finding that selecting “progressive” for jpegs tended to create slightly smaller file sizes. If server space is tight, one might do whatever they can to make best use of it (gotta upload all three thousand of those 20MP wedding pictures).
There’s a few different things at work here, most of which have been touched on. First, very few images you’ll see online are just bitmaps, what you’re likely to see on a given webpage are jpg or gif. It’s been a while since I was working with jpg compression, but the general idea is that it takes groups of pixels (IIRC 8x8 blocks), performs various steps to cut out unimportant information (FFT frequency filtering, quanitzation, etc) and then compresses what’s left. This can be exploited to have the data load in a few different methods, whether it is each block or line one at a time, from low-resolution to high resolution, or perhaps some other method. Regardless, it has to store the data somehow, and with imagines, generally the (0,0) point is the top left.
That all said, I think websites will have a tendency to encode in that way so that particularly low bandwidth visitors can start to see some information right away and have a visual indicator of how far along. Why not show some of the data in real time as you can? And if so, whether it loads top to bottom, bottom to top, or left to right is arbitrary, so basically, why not just start from the beginning to the end? As someone mentioned, you can change that, but that might cause issues, plus it would mean putting in the extra effort of figuring out for each image what the “ideal” load direction would be, so I imagine that they just would leave it alone.
I just did some checking about jpeg formats. The older standard encoding: JFIF, doesn’t seem to have an orientation flag. But the newer one: EXIF used by cameras in particular, does.
That’s a good idea: the camera might be rotated relative to the object and it helps if the proper “right side up” can be embedded.
So if someone took a picture using a digital camera that has an orientation sensor (like many smart phones), then the bottom might be seen to load first on a slow loading web page.
Don’t get me started on ‘Lazy Load’ websites, or the equally foul ‘Infinite Scroll’ whereby a page goes on forever like a dusty road.
BMP ! There’s a word that takes one back, used to be part of the Web, like blinking marquees and hit counters.
In many programming languages, coordinate 0,0 refers to the top left corner. So, most data handling routines (including image transfer and compression) will try to provide data for that coordinate first.
Coördinate system orientation is not really part of a language, rather it is part of the OS. QuickDraw, the original Macintosh graphic engine, was that way, but for some reason in NeXT/OS X, they switched the origin to the bottom left, like a traditional Cartesian graph. Luckily, the programmer is provided an option to reverse the Y ascent, making scroll views much easier to deal with.