Является ли вложение данных фонового изображения в 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, то это уменьшит количество трафика, генерируемого через cookies, отправленные вместе с изображениями
  3. Файлы CSS могут быть кэшированы
  4. Файлы CSS могут быть GZIPPED

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

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

update – результаты тестирования

  • тестирование с изображением: http://sofru.miximages.com/css/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

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

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

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

    поскольку генерирует кодировку base64:

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

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

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

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

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

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

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

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

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

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

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

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

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

    Антонин

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

    Вы можете закодировать его в PHP 🙂

     "> Or display in our dynamic CSS.php file: background: url("https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/data:image/gif;base64,"); 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():  

    Источник

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

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

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

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

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

    В Windows 8.1 говорят —

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

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

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

    Ok Admiinstartor, и дождитесь закрытия окон командной оболочки.

    Затем просто вставьте результат из буфера обмена в свой текстовый редактор …

      

    или

      `background-image : url("https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|")` 

    Следующее должно быть адаптировано для других ОС.

    Пакетный файл …

     rem @echo 0ff rem Puts 64 encoded version of a file on clipboard php c:\utils\php\make64Encode.php %1 

    И с php.exe на вашем пути, который вызывает скрипт php (cli) …

      

    https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice/|

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

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

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

    Давайте будем гением компьютера.