Чи вбудовані дані фонових зображень у CSS як Base64 є хорошою чи поганою практикою?

Я дивився на джерело користувальницького сценарію жирмоскі і помітив у своєму css:

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

Я можу оцінити, що сценарій жирного ключа хотів би зв'язати все, що може, в межах джерела, на відміну від розміщення його на сервері, це досить очевидно. Але оскільки я раніше не бачив цієї методики, я розглянув її використання і це здається привабливим з кількох причин:

1. Це зменшить кількість запитів HTTP при завантаженні сторінки, тим самим підвищивши продуктивність
2. Якщо немає CDN, це зменшить кількість трафіку, генерованого за допомогою файлів cookie, що надсилаються поряд із зображеннями
3. Файли CSS можна кешувати
4. CSS-файли можна GZIPPED

Зважаючи на те, що 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, що дані: uris в CSS вважається антидіаграмою, що блокує візуалізацію, для доставки критичних / мінімальних CSS під час розмови #perfmatters: Instant mobile web apps. Дивіться сторінку http://developer.chrome.com/devsummit/sesions і пам’ятайте про це - фактичний слайд

Це не дуже добре, коли ви хочете, щоб ваші зображення та інформація про стиль кешувалися окремо. Крім того, якщо ви зашифруєте велике зображення або значну кількість зображень у вашому файлі 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-запитів та інших переваг, які дають вам урис.

Base64 додає приблизно 10% до розміру зображення після GZipped, але це переважає переваги, коли мова йде про мобільний. Оскільки існує загальна тенденція щодо чуйного веб-дизайну, настійно рекомендується.

W3C також рекомендує такий підхід для мобільних пристроїв, і якщо ви використовуєте конвеєр активів у рейках, це функція за замовчуванням при стисненні css

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

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

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

У моєму випадку це дозволяє мені застосовувати таблицю стилів CSS, не турбуючись про копіювання пов'язаних зображень, оскільки вони вже вбудовані всередину.

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

Коментарі / пропозиції вітаються.

Антоніна

Ви можете закодувати його в 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).

Потім ви можете клацнути правою кнопкою миші зображення у файлі провідника та SendTo пакетному файлу.

Гаразд запит 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));

?>

Наскільки я досліджував,

Використання: 1. Коли ви використовуєте спрайт svg. 2. Коли ваші зображення мають менший розмір (макс. 200 Мб).

Не використовуйте: 1. Коли у вас великі зображення. 2. Іконки як svg. Оскільки вони вже хороші і стискаються після стиснення.