What will the browser load faster a 1000px x 1px image, or 1px by 1000px image

Question

It seems that since the image is just a chunk of data that it will be the same, but I'm not conclusive on this because I'm not sure how the browser actually renders the image.

Also, what image format for an image of a single color will load the fastest?

Answer 1

Also, what image format for an image of a single color will load the fastest?

If you're going to load a single color, chances are that using an element with background: #HEX; will be somewhat faster, as you won't be in need of loading the actual image.

Edit#1:

I created two black jpg-images, 1000x1 and 1x1000 - both ended up the same size (399 bytes).

Further on, I created a 1000x1 png-image, as well as a 1000x1 gif-image (both filled with black) - turns out the sizes were as following:

PNG-image: 96 bytes
GIF-image: 63 bytes

Winner: The GIF-image, with 33 bytes less data than the PNG-image. If you load 1000 images like the ones used in the test, the overhead using the PNG-format will amount to 33 000 bytes (or 32.22 kilobytes if you prefer that format).