Является ли внедрение данных фонового изображения в 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

"URI данных" определенно следует рассматривать для мобильных сайтов. 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-запросов и других преимуществ данные-Урис вам даст.

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 и сжатые данные в формате 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.

ОК запросу Admiinstartor, и подождать черного командной оболочки Windows, чтобы закрыть.

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

<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. Когда ваши изображения имеют меньший размер (максимум 200 Мб).

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