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, 1000×1 and 1×1000 – both ended up the same size (399 bytes).

Further on, I created a 1000×1 png-image, as well as a 1000×1 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).