<img class="send-me-acme" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUeAFjZAAAAAQAAhq+CAMAAAAASUVORK5CYII=" alt="Send me to build ACME I want" />This chapter’s example is from a South African website, and I replaced the three pages of image code with a 1×1 pixels “spacer,” and one word with “ACME.”
Although these three pages of code won’t catch your eye now, there is no good reason anymore to use Base64-encoded images—data images—directly embedded in production HTML.
Why?
For one, peers have done a bit of math to look at how much data images actually save with the HTTP request that they allow to skip, and what overhead data images come with.
For another, we can detect general pros and cons. Note the pros of data images:
- fewer HTTP requests (one each),
…as well as the cons:
- larger payload (
dataimages are a little bigger than their “regular” counterparts), - impaired code understanding (even with tooling and syntactic sugar, the respective code is harder to read in comparison with the embedding of regular images), and
- increased need for tooling (to generate and integrate the respective images).
For these reasons as well as improved support of HTTP/2 have we (the field of web development) only for a brief period of time (roughly from 2010–2015) made more use of data images. Unless you have good reasons to use them, avoid them.
Case in point:
<img src=acme.png alt="Send me the ACME I want?" class=send-me-acme>