Это встраивание фона в CSS в base64 хорошая или плохая практика?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

можно:

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

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

Антонина

вы можете закодировать его в 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);
?>

источник

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

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

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

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

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

под Windows 8.1 скажем---

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

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

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

Ok 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)...

<?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));

?>

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

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

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