Должен ли я вставлять изображения в качестве данных /base 64 в CSS или HTML?

Ответ 1

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

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

Он имеет ряд заметных недостатков:

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

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

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

• Базовое кодирование изображений размером bloats на 33%.

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

Ответ 2

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

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

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

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

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

мой взгляд.

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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