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

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

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

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

  1. Это уменьшит количество HTTP-запросов при загрузке страницы, что повысит производительность
  2. Если CDN отсутствует, это уменьшит объем трафика, генерируемого с помощью файлов cookie, отправляемых вместе с изображениями.
  3. CSS-файлы могут быть кэшированы
  4. CSS-файлы могут быть сжаты

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

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

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

  • тестирование с изображением: http://fragged.org/dev/map-shot.jpg - 133,6 Кб

  • тестовый URL: http://fragged.org/dev/base64.html

  • выделенный файл CSS: http://fragged.org/dev/base64.css - 178.1Kb

  • GZIP-кодировка на стороне сервера

  • результирующий размер, отправленный клиенту (тест компонентов YSLOW): 59,3 КБ

  • Сохранение данных, отправленных клиентскому браузеру размером: 74,3 КБ

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

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

14.07.2009 08:25:35
Есть ли тестовые прогоны? Было бы интересно, насколько сжатие может компенсировать тот факт, что вы base64 его кодируете.
Dykam 14.07.2009 08:39:24
опубликовал результаты теста, которые также доступны в
Dimitar Christoff 18.02.2011 15:35:39
Хороший вопрос. Просто хотел добавить, что он не работает для IE7 и ниже. Но есть некоторые обходные пути. Вот хорошая статья об этом jonraasch.com/blog/css-data-uris-in-all-browsers
MartinF 29.06.2011 14:46:32
Добавление большего количества PRO:ограничений кеша для сотовых устройств ... CON:некоторые изображения следует рассматривать как контент, а не как простую презентацию, и, таким образом, они лучше подходят для тегов HTML IMG, чем фоновые изображения CSS.
one.beat.consumer 9.04.2012 17:44:06
@DimitarChristoff: я был фанатом встраивания маленьких иконок в base64 из-за его относительной простоты (по сравнению с агрессивными спрайтами) и был рад принять размер надбавки. Спасибо за указание на то , что это не всегда так (т.е. сжат GZIP base64 код вставки может быть лучше с точки зрения абсолютной величине активов, а)
o.v. 10.11.2012 01:54:32
12 ОТВЕТОВ
РЕШЕНИЕ

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

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

166
11.09.2016 11:49:33
Нет загрузки, перетаскивания: bennedich.github.com/web-playground/experiment/…
bennedich 27.10.2012 03:20:56
Вот хороший вариант, который я обычно использую для преобразования изображений в base64: duri.me
Chris Andersson 29.11.2012 09:00:22
у less была функция data-uri, которая вставит
Luke Page 26.07.2013 12:19:20
Это хорошая идея, если вы хотите иметь минимальную защиту для этих изображений, чтобы они не * кэшировались или не могли быть загружены нажатием правой кнопки мыши -> save
vsync 9.06.2014 14:59:01
«Это плохая идея, если вы хотите, чтобы ваши изображения и информация о стиле кэшировались отдельно» - ничто не помешает вам хранить все изображения в отдельном файле .css.
magritte 24.09.2014 12:46:08

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

23
14.07.2009 08:44:16
Это просто означает, что у вас должен быть один класс css для элемента для ссылки на фоновое изображение, и другой класс css для ссылки на смещения в этом изображении для использования в этом элементе.
Duncan Beevers 1.10.2010 19:22:11
у вас не должно быть НИКАКИХ классов на элементах, которые описывают, как материал представлен - эти классы должны быть хорошо названы и семантически (это не всегда возможно, но хорошо бы использовать), если несколько элементов используют одно и то же изображение, и вы хотели бы закодируйте это изображение в CSS, просто оставьте изображение вне объявлений и используйте позднее правило css для объявления и встраивания изображения для нескольких селекторов / классов.
Adam Tolley 28.10.2012 23:08:11
Если вы снимаете для семантических классов, а также хотите получить данные изображения только один раз, у вас может быть отдельный стиль, в котором перечислены все соответствующие селекторы, а затем смещения, определенные в стилях для каждого селектора. Конечно, для очень маленького изображения во многих местах список селекторов может быть больше, чем данные ...
Leo 25.04.2013 12:09:55
Чтобы избежать нескольких классов и указать спрайт-лист только один раз, вы можете использовать селектор атрибутов:[emoji] {background-image: url(data:image/png;base64,qwedfcsfrtgyu/=);} [emoji=happy] {background-position: -20px 0px;}
Chinoto Vokro 17.12.2016 09:25:21

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

3
11.02.2011 14:35:13

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

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 были довольно низкими (25 КБ на файл), но увеличиваются (100 КБ) для новых версий Mobile Safari. Поэтому обязательно следите за общим размером файла при включении URI данных.

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

55
22.02.2017 19:35:52

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

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

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

21
7.07.2011 15:36:23
Мне нравится это в теории. Кто-нибудь может придумать аргументы против?
Rob 31.03.2014 22:02:24
Я просто гуглил это сам, чтобы выяснить, хорошая ли это идея, и пришел сюда. В моем случае изображения - это всего лишь пользовательский интерфейс, и я подумал, что это будет хорошей идеей. Не уверен, что это лучше, чем использование CSS-спрайтов, но я чувствую, что легче управлять, если вы внесете изменения в будущем. Хотелось бы узнать, есть ли у кого-нибудь что-нибудь против этого?
Craig 20.03.2018 23:26:08

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

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

4
3.08.2011 22:31:37

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

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

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

20
16.01.2012 08:33:44
Хороший вопрос - мобильный / отзывчивый, хотя я не уверен в 10%, откуда вы берете эти данные?
Dimitar Christoff 16.01.2012 09:51:39
Это правильно. Самая медленная вещь на любом мобильном устройстве - открытие / закрытие http-соединений. Минимизировать их рекомендуется.
Rafael Sanches 16.02.2012 19:03:16
Несмотря на результаты w3, в каком-то тесте я сделал размер изображений увеличенным на ~ 25% :(
Fabrizio Calderan 28.09.2012 13:13:07
Я предполагаю, что это может поднять до 33%, если просто невозможно застегнуть это.
Léon Pelletier 8.12.2012 09:29:15
на мобильном 10% - ничто по сравнению с созданием http-соединений
Rafael Sanches 10.07.2013 19:36:23

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

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

Оно может:

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

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

Антонин

3
24.06.2013 20:17:41

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

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

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

2
31.07.2013 18:15:54

Вы можете закодировать это в 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
31.01.2014 21:22:32

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

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

?>
0
27.03.2014 02:48:23

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

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

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

0
9.11.2017 12:54:24