Стоит ли вставлять изображения как data / base64 в CSS или HTML

Чтобы уменьшить количество запросов на сервере, я встроил некоторые изображения (PNG и SVG) как BASE64 прямо в CSS. (Это автоматизировано в процессе сборки)

как это:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

Это хорошая практика? Есть ли причины избегать этого? Есть ли какие-то основные браузеры, в которых нет поддержки URL-адресов данных?

Бонусный вопрос: имеет ли смысл делать то же самое для CSS и JS?

Это хорошая практика? Есть ли причины избегать этого?

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

У него есть ряд заметных недостатков:

• Совершенно не работает в IE6 и 7.

• Работает только для ресурсов размером до 32 КБ в IE8 . Это предел, который применяется после кодирования base64. Другими словами, не более 32768 символов.

• Он сохраняет запрос, но вместо этого раздувает HTML-страницу! И делает изображения не кэшируемыми. Они загружаются каждый раз, когда загружается содержащаяся страница или таблица стилей.

• Кодировка Base64 увеличивает размер изображений на 33%.

• Если они обслуживаются в gzip-архиве, data:изображения почти наверняка будут сильно загружать ресурсы сервера! Обычно для сжатия изображений требуется очень много ресурсов процессора, при очень небольшом уменьшении размера.

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

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

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

Конечно, это взлом. без сомнений. так же, как спрайты - это хак. В идеальном мире это не понадобится, до тех пор это возможная практика, если вам нужно исправить следующее:

1. Страница с несколькими изображениями, которые не так легко "спрайтовать".
2. Путь к серверам туда и обратно является узким местом (подумайте о мобильных устройствах).
3. скорость (на уровне миллисекунд) действительно важна для вашего варианта использования.
4. Вам все равно (как и следовало бы, если вы хотите, чтобы Интернет двигался вперед) об IE5 и IE6.

мой взгляд.

Это плохая практика. Некоторые браузеры не поддерживают URI данных (например, IE 6 и 7) или поддержка ограничена (например, 32 КБ для IE8).

См. Также эту статью в Википедии для получения полной информации о недостатках URI данных:

• Схема URI данных

Недостатки

• URI данных не кэшируются отдельно от содержащихся в них документов (например, файлов CSS или HTML), поэтому данные загружаются каждый раз при повторной загрузке содержащихся документов.
• Контент необходимо перекодировать и повторно встраивать каждый раз при внесении изменений.
• Internet Explorer до версии 7 (примерно 15% рынка по состоянию на январь 2011 г.) не поддерживает.
• Internet Explorer 8 ограничивает URI данных максимальной длиной 32 КБ.
• Данные включены в виде простого потока, и многие среды обработки (например, веб-браузеры) могут не поддерживать использование контейнеров (например, multipart/alternativeилиmessage/rfc822 ) для обеспечения большей сложности, например метаданных, сжатия данных или согласования содержимого.
• URI данных в кодировке Base64 на 1/3 больше, чем их двоичный эквивалент. (Однако эти накладные расходы уменьшаются до 2-3%, если HTTP-сервер сжимает ответ с помощью gzip)
• URI данных затрудняют программному обеспечению безопасности фильтрацию содержимого.

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

Data-uri работают в IE6 / 7 (вам просто нужно обслуживать mhtml файл этим браузерам).

Единственное преимущество, которое я получил от использования data-uri, заключалось в том, что мои фоновые изображения отображались сразу после загрузки таблицы стилей, в отличие от постепенной загрузки, которую мы видим в противном случае.

Приятно, что у нас есть эта техника, но я не буду ее слишком часто использовать в будущем. Я рекомендую попробовать, просто чтобы вы знали сами

Я более склонен использовать CSS-спрайты для объединения изображений и экономии на запросах. Я никогда не пробовал технику base64, но она явно не работает в IE6 и IE7. Также это означает, что если какие-либо изображения изменятся, вам придется повторно загрузить все потерянные, если, конечно, у вас нет нескольких файлов CSS.

Я понятия не имею об общих передовых методах, но я, например, не хотел бы видеть такие вещи, если бы я мог им помочь. :)

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

Есть ли причины, по которым вы считаете, что в настоящий момент на сервер поступает слишком много запросов?

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

• Крошечный, потому что кодировка Base64 увеличивает размер
• Часто используется, потому что это оправдывает более длительное время начальной загрузки.

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

Дополнительная информация собрана здесь: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/