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

Question

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

вот так:

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

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

Дополнительный вопрос: имеет ли смысл делать это и для CSS & JS?

Answer 1

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

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

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

• Не работает вообще в IE6 и 7.

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

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

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

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

Answer 2

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

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

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

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

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

мой взгляд.

Answer 3

Это не очень хорошая практика. Некоторые браузеры не поддерживают 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 данных затрудняют фильтрацию содержимого ПО для обеспечения безопасности.

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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

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

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

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