Which is the fastest way to load images on a webpage?

I'm building a new site, and during the foundation stage I'm trying to assess the best way to load images. Browsers have a limit of 2-6 items it can load concurrently (images/css/js). Through the grapevine I've heard various different methods, but no definitive answer on which is actually faster.

Relative URLs:

backgro开发者_JAVA技巧und-image: url(images/image.jpg);

Absolute URLs:

background-image: url(http://site.com/images/image.jpg);

Absolute URLs (with sub-domains):

background-image: url(http://fakecdn.site.com/images/image.jpg);

1. Will a browser recognize my "fakecdn" subdomain as a different domain and load images from it concurrently in a separate thread?
2. Do images referenced in a @import CSS file load in a separate thread?

---

The HTTP 1.1 spec suggests that browsers do not open more than two connections to a given domain.

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

So, if you are loading many medium sized images, then it may make sense to put them on separate FQDNs so that the 2 connection limit is not the bottleneck. For small images, the need of a new socket connection to each FQDN may outweigh the benefits. Similarly, for large images, the client network bandwith may be the limiting factor.

If the images are always displayed, then using a data uri may be fastester, since no separate connection is required, and the images can be included in the stream in the order they are needed.

However, as always with optimizing for performance, profile first!

See

• Wikipedia - data uri

---

For lots of small images, social media icons being a good example, you'll also want to look into combining them into a single sprite map. That way they'll all load in the same request, and you just have to do some background-positioning when using them.