: From which file size is it worth to implement images as Data URI? As the title says: for site speed up sake it is good to implement small images like Data URIs directly into HTML source

@Correia994

To anwser this question first a little background:
HTTP works on top of TCP. When the browser opens a connection it sends a TCP packet with the HTTP request to the server.
Because TCP has TCP slowstart the server can at most send 10 packets back, totalling 14KB to the browser. After that it has to wait for an acknowledgement from the browser before it can send additional packets.

So if you want the browser to be able to render a page quickly you have to make sure that everything it needs, fits inside 14KB.

Now what does a browser need to start rendering. It starts with HTML obviously. But if the page requires css, it will not start rendering anything(it will just show a blank page) untill the css downloaded and parsed.
Synchronous javascript is another thing that blocks the browser.

So if you want a page to render really fast make sure you send back everything in the first response and even then in the first 14KB of the response.
This means inlining css in the HTML. If you can make the javascript load asynchronous, if it must be synchronous, do it as late as possible in the page.
If it must be synchronous and in the head then it must be inlined as well.

Now determine the size of the HTML with inlined css(and maybe javascript). Make sure to determine the size of it gzipped.

Now to anwser your question:
If you now have room to spare, you can inline small images as data-uri. Just make sure you keep the gzipped total under 14KB.

NOTE: inlining can as a technique for optimizing the critical path may become obsolete as HTTP/2 becomes the norm and webservers start supporting SERVER-PUSH.

Vote Up Vote Down