Mobify chief architect and co-founder Peter McLachlan has presented some new research into the use of data URIs and how they impact speed on mobile devices.
In his article, McLachlan explained that a “key rule to high performance web design is to make fewer HTTP requests,” especially on smartphones, “where high latencies are the norm”.
Data URIs (where images are embedded directly in the document rather than being called separately) have been considered best practice for reducing said requests — at least under certain circumstances.
According to McLachlan’s latest research, on measuring the performance of “hundreds of thousands of mobile page views”, loading images “using a data URI is on average [six times] slower than using a binary source link such as an img tag with [a] src attribute”.
The conditions behind the Mobify experiment were outlined in full within the article, including the use of a 17.8k PNG, which commenter Larry Garfield suggested wasn’t something he’d usually do "under normal circumstances".
However, McLachlan noted in his conclusion that the experiments he performed weren’t designed to negate the use of data URIs. Instead, the article appeared to show clearly how data URIs should be used infrequently for small images, along the lines of long-standing best-practice advice.
He also added that, if you’re thinking of using data URIs, it’s worth considering CSS sprites instead, which will be “more performant in most cases”.
