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

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

467 голосов
/ 14 июля 2009

Я смотрел на источник пользовательского скрипта 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-файлы могут быть GZIPPED

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

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

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

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

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

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

  • Серверная кодировка GZIP

  • полученный размер отправлен клиенту (YSLOW тестирование компонентов): 59,3Kb

  • Сохранение данных, отправленных клиентскому браузеру: 74.3Kb

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

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

Ответы [ 12 ]

0 голосов
/ 09 ноября 2017

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

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

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

0 голосов
/ 27 марта 2014

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

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

?>
Страница:
...