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

Ответ 1

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

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

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (загрузить)
• http://www.greywyvern.com/code/php/binary2base64 (из ссылки с небольшими учебниками ниже)

Ответ 2

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

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/

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

Я попытался создать онлайн-концепцию инструмента анализатора 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 данных.

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

Антонин

Ответ 9

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

Источник

Ответ 10

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

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

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

Ответ 11

Спасибо за информацию здесь. Я нахожу это вложение полезным и особенно для мобильных устройств, особенно с кэшированным файлом 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));

?>

Ответ 12

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

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

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