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

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

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

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

It will reduce the amount of HTTP requests on page load, thus enhancing performance If no CDN, then it will reduce the amount of traffic generated through cookies being sent alongside of images CSS files can be cached CSS files can be GZIPPED

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

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

update - results of testing

testing with image: http://fragged.org/dev/map-shot.jpg - 133.6Kb

test URL: http://fragged.org/dev/base64.html

dedicated CSS file: http://fragged.org/dev/base64.css - 178.1Kb

GZIP encoding server side

resulting size sent to client (YSLOW components test): 59.3Kb

Saving of data sent to client browser of: 74.3Kb

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

UPDATE: Bryan McQuade, a software engineer at Google, working on PageSpeed, expressed at ChromeDevSummit 2013 that data:uris in CSS is considered a render-blocking anti-pattern for delivering critical/minimal CSS during his talk #perfmatters: Instant mobile web apps. See http://developer.chrome.com/devsummit/sessions and keep that in mind - actual slide

 one.beat.consumer09 апр. 2012 г., 19:44
Добавление большеPRO: ограничения кеша на сотовых устройствах ...CON: некоторые изображения следует рассматривать как контент, а не как простую презентацию, и поэтому они лучше подходят для тегов HTML IMG, чем фоновые изображения CSS.
 MartinF29 июн. 2011 г., 16:46
Хороший вопрос. Просто хотел добавить, что он не работает для IE7 и ниже. Но есть некоторые обходные пути. Вот хорошая статья об этомjonraasch.com/blog/css-data-uris-in-all-browsers
 o.v.10 нояб. 2012 г., 02:54
@DimitarChristoff: я был фанатом встраивания маленьких иконок в base64 из-за его относительной простоты (по сравнению с агрессивными спрайтами) и был рад принять размер, превышающий размер. Спасибо за то, что указали, что это не всегда так (т. Е. Вложение gzipped base64 также может быть лучше с точки зрения абсолютного размера активов)
 Dimitar Christoff18 февр. 2011 г., 16:35
опубликовал результаты теста, также безуспешно на моем блогеfragged.org/…
 Dykam14 июл. 2009 г., 10:39
Есть ли тестовые прогоны? Было бы интересно, насколько сжатие может компенсировать тот факт, что вы base64 его кодируете.

Ответы на вопрос(12)

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

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

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

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

 20 янв. 2012 г., 05:33
 10 июл. 2013 г., 21:36
на мобильном 10% это ничто по сравнению с созданием http-соединений
 Dimitar Christoff16 янв. 2012 г., 10:51
Хороший вопрос - мобильный / отзывчивый, хотя я не уверен в 10%, откуда вы берете эти данные?
 08 дек. 2012 г., 10:29
Я предполагаю, что он может подняться до 33%, если просто невозможно сжать его.
 16 февр. 2012 г., 20:03
Это правильно. Самая медленная вещь на любом мобильном устройстве - это открытие / закрытие http-соединений. Минимизация их рекомендуется.

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

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

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

кторных изображений.

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

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

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

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

Источник

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

 01 окт. 2010 г., 21:22
Это просто означает, что у вас должен быть один класс css для элемента для ссылки на фоновое изображение, и другой класс css для ссылки на смещения в этом изображении, которые будут использоваться для этого элемента.
 25 апр. 2013 г., 14:09
Если вы снимаете для семантических классов, а также хотите получить данные изображения только один раз, у вас может быть отдельный стиль, в котором перечисленыall соответствующие селекторы, а затем смещения, определенные в стилях для каждого селектора. Конечно, для очень маленького изображения во многих местах список селекторов может быть больше, чем данные ...
 29 окт. 2012 г., 00:08
у вас не должно быть НИКАКИХ классов на элементах, которые описывают, как материал представлен - эти классы должны быть хорошо названы и семантически (это не всегда возможно, но хорошо использовать), если несколько элементов используют одно и то же изображение, и вы хотели бы закодируйте это изображение в CSS, просто оставьте изображение вне объявлений и используйте более позднее правило css, чтобы объявить и внедрить изображение для нескольких селекторов / классов.
 17 дек. 2016 г., 10:25
Чтобы избежать нескольких классов и указать спрайт-лист только один раз, вы можете использовать селектор атрибутов:[emoji] {background-image: url(data:image/png;base64,qwedfcsfrtgyu/=);} [emoji=happy] {background-position: -20px 0px;}
Решение Вопроса

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

что касается генерации кодировки base64:

http://b64.io/ http://www.motobit.com/util/base64-decoder-encoder.asp (upload) http://www.greywyvern.com/code/php/binary2base64 (from link with little tutorials underneath)
 20 февр. 2013 г., 17:17
Другой я нашел с исходным кодом.grmlin.github.com/bacss64
 09 июн. 2014 г., 16:59
это хорошая идея, если вы хотите иметь минимальную защиту для этих изображений, чтобы ониwouldn't* быть кэшированным или может быть загружен нажатием правой кнопки мыши - & gt; спасти
 26 июл. 2013 г., 14:19
у менее была функция data-uri, которая встроит изображениеlesscss.org/#reference
 27 окт. 2012 г., 05:20
Нет загрузки, перетаскивания:bennedich.github.com/web-playground/experiments/…
 29 нояб. 2012 г., 10:00
Вот хороший вариант, который я использую для преобразования изображений в base64:duri.me

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

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

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

 01 апр. 2014 г., 00:02
Мне нравится это в теории. Кто-нибудь может придумать какие-либо аргументы против?
 21 мар. 2018 г., 00:26
Я просто гуглил это сам, чтобы узнать, хорошая ли это идея, и пришел сюда. В моем случае изображения - это всего лишь пользовательский интерфейс, и я подумал, что это будет хорошей идеей. Не уверен, что это лучше, чем использование css-спрайтов, но я чувствую, что легче управлять, если вы внесете изменения в будущем. Хотелось бы узнать, есть ли у кого-нибудь что-нибудь против этого?

L:

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

Оно может:

Download and parse HTML/CSS files, extract href/src/url elements Detect compression (gzip) and size data on the URL Compare original data size, base64 data size and gzipped base64 data size Convert the URL (image, font, css, ...) to a base64 data URI scheme. Count number of requests which can be spared by Data URIs

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

Антонин

This answer is out of date and shouldn't be used.

1) Average latency is much faster on mobile in 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) HTTP2 multiplexes https://http2.github.io/faq/#why-is-http2-multiplexed

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

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

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

 23 дек. 2013 г., 22:46

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

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

Под Windows 8.1 говорят ---

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

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

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

ОК, запрос 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));

?>

Ваш ответ на вопрос