Является ли вложение данных фонового изображения в CSS в качестве хорошей или плохой практики Base64?

Я смотрел на источник почерка greasemonkey и заметил в своем css следующее:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

Я могу понять, что greasemonkey script хочет связать все, что может, в источнике, а не размещать его на сервере, что достаточно очевидно. Но так как я раньше не видел эту технику, я рассматривал ее использование и, по-видимому, привлекателен по нескольким причинам:

  • Это уменьшит количество HTTP-запросов при загрузке страницы, тем самым повысив производительность
  • Если нет CDN, это уменьшит количество трафика, генерируемого через файлы cookie, отправленные вместе с изображениями
  • Файлы CSS могут быть кэшированы
  • Файлы CSS могут быть GZIPPED

Учитывая, что IE6 (например) имеет проблемы с кешем для фоновых изображений, кажется, что это не худшая идея...

Итак, это хорошая или плохая практика, почему бы вам не использовать ее и какие инструменты вы бы использовали для кодирования изображений base64?

update - результаты тестирования

Приятно, но он будет немного менее полезен для меньших изображений, я думаю.

ОБНОВЛЕНИЕ: Брайан МакКуад (Bryan McQuade), разработчик программного обеспечения Google, работающий на странице PageSpeed, заявил в ChromeDevSummit 2013, что данные: uris в CSS считается анти-шаблоном рендеринга для предоставления критического/минимального CSS во время его беседы #perfmatters: Instant mobile web apps. См. http://developer.chrome.com/devsummit/sessions и помните об этом - фактический слайд

+455
источник поделиться
12 ответов

Это не очень хорошая идея, когда вы хотите, чтобы ваши изображения и информация о стиле сохранялись отдельно. Кроме того, если вы кодируете большое изображение или значительное количество изображений в ваш файл css, браузеру потребуется больше времени, чтобы загрузить файл, покидающий ваш сайт, без какой-либо информации о стиле до завершения загрузки. Для небольших изображений, которые вы не собираетесь часто менять, если это когда-либо, это прекрасное решение.

для генерации кодировки base64:

+154
источник

Этот ответ устарел и не должен использоваться.

1) Среднее время ожидания на мобильном телефоне в 2017 году значительно быстрее. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) Мультиплексоры HTTP2 https://http2.github.io/faq/#why-is-http2-multiplexed

"URI данных" обязательно должны быть рассмотрены для мобильных сайтов. HTTP-доступ через сотовые сети обеспечивает более высокую задержку на запрос/ответ. Таким образом, есть некоторые варианты использования, при которых помехи изображениям в виде CSS или HTML-шаблонов могут быть полезны для мобильных веб-приложений. Вы должны измерять использование в каждом конкретном случае - я не сторонник того, что URI данных должны использоваться повсюду в мобильном веб-приложении.

Обратите внимание, что у мобильных браузеров есть ограничения на общий размер файлов, которые можно кэшировать. Пределы для iOS 3.2 были довольно низкими (25K на файл), но становятся больше (100K) для более новых версий Mobile Safari. Поэтому следите за тем, чтобы ваш общий размер файла был включен при включении URI данных.

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

+55
источник
другие ответы

Связанные вопросы


Похожие вопросы

Если вы ссылаетесь на это изображение только один раз, я не вижу проблемы с его вложением в ваш файл CSS. Но как только вы используете несколько изображений или должны ссылаться на него несколько раз в своем CSS, вы можете использовать одну карту изображения, вместо этого вы можете обрезать свои отдельные изображения (см. CSS Sprites).

+23
источник

Одна из вещей, которые я предлагаю, состоит в том, чтобы иметь две отдельные таблицы стилей: Один с вашими обычными определениями стиля и другой, который содержит ваши изображения в кодировке base64.

Вы должны включить базовую таблицу стилей перед стилем изображения, конечно.

Таким образом, вы убедитесь, что вы регулярно загружаете таблицу стилей и применяете ее как можно скорее к документу, но в то же время вы получаете прибыль от сокращенных http-запросов и других преимуществ, которые дает вам данные-uris.

+20
источник

Base64 добавляет около 10% к размеру изображения после GZipped, но это перевешивает преимущества, связанные с мобильным телефоном. Поскольку существует общая тенденция с адаптивным веб-дизайном, настоятельно рекомендуется.

W3C также рекомендует этот подход для мобильных устройств, и если вы используете конвейер ресурсов в рельсах, это функция по умолчанию при сжатии вашего css

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

+19
источник

Я не согласен с рекомендацией создать отдельные файлы CSS для не-редакционных изображений.

Предполагая, что изображения предназначены для целей пользовательского интерфейса, это стилизация слоя презентаций, и, как уже упоминалось выше, если вы используете мобильный интерфейс, определенно хорошая идея сохранить все стили в одном файле, чтобы его можно было кэшировать один раз.

+4
источник

В моем случае это позволяет мне применить таблицу стилей CSS, не беспокоясь о копировании связанных изображений, поскольку они уже встроены внутри.

+3
источник

Я попытался создать онлайн-концепцию инструмента анализатора CSS/HTML:

http://www.motobit.com/util/base64/css-images-to-base64.asp

Он может:

  • Загрузка и анализ файлов HTML/CSS, извлечение элементов href/src/url
  • Обнаружение данных сжатия (gzip) и размера по URL-адресу
  • Сравните исходный размер данных, размер данных base64 и размер данных gzipped base64
  • Преобразуйте URL (изображение, шрифт, css,...) в схему URI базы данных64.
  • Подсчитайте количество запросов, которые могут быть защищены URI данных.

Комментарии/предложения приветствуются.

Антонин

+3
источник

Вы можете закодировать его в PHP:)

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 That’s sort of a "quick-n-dirty" technique but it works. Here is another encoding method using fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Источник

+3
источник

Принеся немного для пользователей Sublime Text 2, есть плагин, который дает код base64, который мы загружаем изображения в ST.

Вызывается Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64

PS: Никогда не сохраняйте этот файл, сгенерированный плагином, потому что он будет перезаписывать файл и будет уничтожен.

+2
источник

Спасибо за информацию здесь. Я нахожу это вложение полезным и особенно для мобильных устройств, особенно с кэшированным файлом css встроенных образов.

Чтобы облегчить жизнь, так как мои редакторы файлов не справляются с этим, я сделал несколько простых сценариев для работы с портативными/настольными редакторами, поделись здесь, если они будут полезны для кого-либо еще. Я застрял с php, поскольку он обрабатывает эти вещи напрямую и очень хорошо.

В Windows 8.1 говорят ---

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

... там как администратор вы можете установить ярлык для пакетного файла в вашем пути. Этот командный файл вызовет php (cli) script.

Затем вы можете щелкнуть изображение правой кнопкой мыши в проводнике файлов и отправить в пакетный файл.

Открой запрос Admiinstartor и дождитесь закрытия окон командной оболочки черным.

Затем просто вставьте результат из буфера обмена в свой текстовый редактор...

<img src="|">

или

 `background-image : url("|")` 

Следующее должно быть адаптировано для других ОС.

Пакетный файл...

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

И с php.exe в вашем пути, который вызывает php (cli) script...

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>
0
источник

Насколько я исследовал,

Использование: 1. Когда вы используете спрайт svg. 2. Когда ваши изображения имеют меньший размер (макс. 200 мб).

Не использовать: 1. Когда вы больше изображений. 2. Иконы как svg. Поскольку они уже хороши и gzipped после сжатия.

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос