Приветствую вас, html-верстальщики. Сегодня я расскажу Вам почему и нужно кодировать маленькие картинки (a-la иконки) в base64 и сохранять код в CSS файле. Но, сперва, немного теории.
Base64 - это специальный метод кодирования информации в 64-разрядный код (6 бит). Этот метод широко используется в приложениях электронной почты для кодирования бинарных данных. Закодированные данные записываются в виде спецсимволов, букв английского алфавита и цифры.
Храните мелкие картинки, которые нельзя засунуть в спрайты, в data:image base64 в CSS — это экономит кучу запросов к вебсерверу.
Кодировать изображение в base64 удобно с помощью нашего онлайн сервиса кодирование изображений в base64. Для этого откройте нужное изображение или просто перетащите его на кнопку (если ваш браузер поддерживает функцию drag & drop) и Вы получите код для вставки изображения в HTML страницу или стиль для вставки в CSS файл. После этого, просто скопируйте полученный код в нужное место и наслаждайтесь двумя запросами к вебсерверу (html + css), вместо трех (html + css + изображение):
<!-- HTML файл -->
<img src='data:image/ТИП;base64,КОД'>
<!-- CSS файл -->
.some_style {
background-image: url(data:image/ТИП;base64,КОД);
}
При этом вместо «ТИП» будет тип изображения (png/jpeg/gif), а вместо «КОД» — строка в base64.
- уменьшение числа запросов к вебсерверу
- простота обновления, по сравнению со спрайтами
- картинки будут показаны даже если в браузере пользователя включена настройка «Не показывать картинки» (что может быть полезно для навигационных кнопок, в виде картинок)
- изображения в base64 не кешируются
- увеличение результативного объема изображения (примерно на 22%)
Base64 не поддерживает Internet Explorer 7. С другой стороны, кто его сейчас использует?