Search code examples
imagepagespeedcss-sprites

Image sprite vs loading 13 images


I'm looking to find out what is faster.

The server delivering 13 images or delivering a sprite that's 2 times the size of the total images size at 290kb.

I'm speeding up a free wordpress blog I've just had sitting there for many years.


Solution

  • This depends on the version of the HTTP protocol you are using.

    • With HTTP/1 and HTTP/1.1 it was often faster to combine multiple ressources (images, CSS, JavaScript) into a single file as the overhead to establish a connection could be avoided. In addition with HTTP/1 and HTTP/1.1 request and response headers are always uncompressed.

    • With HTTP/2 and HTTP/3 multiplexing multiple requests over a single TCP connection is possible, which reduces latencies as it emiminates the connection overhead. In addition all HTTP headers are compressed.

    If your server supports HTTP/2 or HTTP/3 it should be faster to serve all 13 images separately. All major browsers support the new protocols for quite some time. To check if your server supports HTTP/2 or HTTP/3 you can use the DevTools of your browser, where you can enable a protocol column in the network tab, or just use one of the various specialized online tools out there. If your server does not support the newer protocol versions, I suggest upgrading to add support.