изображений CSS в базе 64
Преобразование изображений CSS в Base64
Текущие браузеры поддерживают схему Data URI, протокол, который может хранить данные по любому URL прямо в исходном текстовом файле — например, вы можете хранить изображения непосредственно в html-коде или таблице стилей css, используя кодировку Base64.Анализ CSS или HTML
Изображения CSS и схема Data URI
Каждое изображение (или любой другой файл, конечно — например, шрифты ttf) может быть встроено в файл text/css или text/html по его url-адресу, например, в html:
или в css:
фоновое изображение: URL-адрес (http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif)
Вы можете преобразовать данные и встроить данные непосредственно в текстовый файл, а исходный HTML-код будет выглядеть так:
и CSS:
background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Как видите, все представление изображения в HTML/CSS, включая тело изображения и тип контента, имеет такой же размер в байтах, как и обычный URL-адрес изображения.
Конечно, в таком очень маленьком файле — и это основная идея хранить изображения непосредственно в CSS. Файл CSS обычно содержит несколько изображений и других файлов данных очень небольшого размера, в сотых байтах.
Если вы храните данные прямо в css, вы можете сэкономить байты загрузки и выгрузки, несколько количество запросов к изображениям и время отклика страницы. И даже лучше: некоторые веб-серверы не сжимают изображения gif/jpeg/png сжатием gzip во время передачи, но файлы css сжимаются — и представление изображения в формате base64, сжатое gzip, иногда меньше, чем само изображение.
CSS url(…): В base64 или не в base64? Это вопрос.
Это выглядит очень хорошо.
Основная проблема схемы Data URI и изображений base64 такая же, как и в других хороших веб-приложениях: Internet Explorer. IE версии 7.0 и старше не поддерживает встроенные данные base64. Есть некоторые
обходные пути с использованием формата Mime/MHtml, который позволяет хранить представление изображения base 64 непосредственно в css, но теряет простоту этой идеи.
