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

https://stackoverflow.com/questions/1124149

13-09-2019
|

Вопрос

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

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

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

Это уменьшит количество HTTP-запросов при загрузке страницы, тем самым повысив производительность
Если CDN отсутствует, то это уменьшит объем трафика, генерируемого файлами cookie, отправляемыми вместе с изображениями
Файлы CSS могут быть кэшированы
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.1Кб
Серверная сторона кодирования GZIP
результирующий размер отправляется клиенту (YSLOW тестирование компонентов): 59,3Кб
Сохранение данных, отправленных в клиентский браузер: 74,3 Кб

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

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

Решение

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

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

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

Другие советы

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

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/

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

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

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

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

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

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

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

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

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

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

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

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 данных

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

Антонин

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

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

Окей запрос 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 в вашем path это вызывает скрипт 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.Поскольку они уже хороши и загружены в архив после сжатия.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow