Технология data:URI

Технология `data:URI` позволяет включать изображения прямо в CSS-файл в виде данных, закодированных методом base64.

`Data:URI` заменяет технологию CSS-спрайты (объединение нескольких картинок в один файл).

Поддержка data:URI реализована в браузерах Firefox 3.x, Opera 9.x, Safari 3.x, Internet Explorer 8.x.

Пример использования:

1. <div style="width:24px; height:24px; background-image:url('data
   :image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAGXRFWHRTb
   2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATtQTFRF////////7u7W8fHd9fbm/P33+Pju
   9/f28/Ph7OzP39/e5+fm19fV6enM5+fG1dXN7u7u+/vw2trY+aAu6uvM5ebA3d3G9dyFz8/E7Oz
   p5eXg+dyj+rVM5ubY5NSb+dmb+Mhp5N3U3t231dS8zMu1/5WV0nYRqqOUy56c/La2lIlrwnJx5N
   7Lo4hbhXNi4n8QdWBGzMep0MOT/u/v055l/W9vopd2+rZe/aZF21pV0dHKuHs6xrBuxLaG+vvxv
   LOm4LVyx8SrvmwSzrum1NCq8vPgt4E2j3NArZx4/M+KpoBTvXNgs5KDSSMb39Ot+qpC+7xrwriU
   7d+v/J84+dqf5ty5sqySpY5ppp9v4NOk64QQmHNC3Ne/3d3Qvrqq+69NtIJL/Ml60tLG9Oa2/MJ
   pzMy6+rtb+6ZJ+7ZMjHhYVQAAAAF0Uk5TAEDm2GYAAAFNSURBVHjaVNLlmoQgFAZgCUFB0Z3u3u
   7u7u7u3vu/ggV0Zpzz8/3gcB7AMMKiTBcFRkdxToFpUkJyMR6JAANAOiEEY6vo0VYXrp0qRghBz
   wdRN7VD+O3Cj2APC50ot18m+57ggkp8Gh6g3L2p9ncPQjcH2hswRjC1nF87mp4fQnIAStqN6hPl
   n9Opw02Ei77BzLAR3m7cl79eLxfryMLYMZicnuqgcXH1Pjv35iJVjhELhres9c/8/tnvAZSFEFa
   BGt4Wd+nKX/zh0bW1q0C7O5CuFOKjw9rlEUSeoTzRW70txHv2Ek2XAX2W68XqdWln4zx00mVmuQ
   E86SMnpaXdcbvlJpN3wlOidjw2I0TEqQqAl9yqJUUwTuAgph+SZpKi07kf3LufEc3xyYpyHr4ho
   F4qdCL7O7z9IwD3vMCzzKHRnwKozxxVvMn/AgwARAkghN9dxhcAAAAASUVORK5CYII=')"
   ></div>

В данном примере будет отображена иконка, при этом запроса на сервер не произойдет, так как изображение уже встроено в страницу.

К сожалению, применение технологии `data:URI` существенно (до 30%) увеличивает размер страницы, сводя на нет такое преимущество, как отсутствие запроса для изображения.