base64 background

how to use small base64 code for backgrounds

HTML

<h1>Example of how we can improve speed, and avoid flicker with an embedded base64 images</h1>
<ul id="base64">
  <li>Base64 in CSS</li>
  <li>192 bytes</li>
  <li>+ no extra</li>
  <li>request</li>
</ul>
<ul id="png">
  <li>Classic background</li>
  <li>4 Kb</li>
  <li>+ extra</li>
  <li>request</li>
</ul>

CSS

h1{
    font-size:45px;
    font-family:'Open Sans', sans-serif;
    margin:20px;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
 ul {
  height:1000px;
  display:block;
  width:40%;
  margin-right:5%;
  margin-left:5%;
  float:left;
  font-family:'Open Sans', sans-serif;
  text-align:center;
  color:white;
  font-size:45px;
}
ul li:first-child {
  line-height:120px;
  font-size:60px;
}
#base64 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAReCAIAAACZ4M3vAAABD0lEQVR4Ae2WjQrCMAyE25Xfvb7sdTc5MAIH8SPqFLGBYJouyfWaEvu2XZbW2l17H8txHLLbuq43X9cvqX/na/frN2rJ5tycN63DedN14DQfx/EZansc47bj5zpcr56DeeNcFg+4qD7EFfjIzlT2JWu4P8Qrsdh0r4pPQryFrTrOV4If93yf75/x+x7z+xp+iXzGC+Dn/pAAZ6XzeU6p8Yfx3gOPOPeelGD/w4xxzv1b4imw+5sZY8hmfDD/JNYH4a/MFOcqbDhbfZ5OfV4nl/OO/V2+U+n9/7h+9lwww2QT/z4XfB0+Xzc+t+fkGXQ+V1/PD/Gn5qf5Sj2773v2v+ov+HeV0Df+HrhmHcsJMVfIEIIQs/XARgAAAABJRU5ErkJggg==);
  background-color:#e4e4e4;
  background-repeat:repeat-x;
  background-position:left top;
}
#png {
  background: #e4e4e4 url(https://cl.ly/0i211C2q3h0n/background.png) repeat-x left top;
}