Чтобы уменьшить количество запросов на сервере, я встроил некоторые изображения (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, является одним из самых больших падений производительности.
Конечно, это взлом. без сомнений. так же, как спрайты - это хак. В идеальном мире это не понадобится, до тех пор это возможная практика, если вам нужно исправить следующее:
мой взгляд.
источник
Это плохая практика. Некоторые браузеры не поддерживают URI данных (например, IE 6 и 7) или поддержка ограничена (например, 32 КБ для IE8).
См. Также эту статью в Википедии для получения полной информации о недостатках URI данных:
источник
Я использовал data-uri около месяца, и я просто перестал их использовать, потому что они сделали мои таблицы стилей просто огромными.
Data-uri работают в IE6 / 7 (вам просто нужно обслуживать mhtml файл этим браузерам).
Единственное преимущество, которое я получил от использования data-uri, заключалось в том, что мои фоновые изображения отображались сразу после загрузки таблицы стилей, в отличие от постепенной загрузки, которую мы видим в противном случае.
Приятно, что у нас есть эта техника, но я не буду ее слишком часто использовать в будущем. Я рекомендую попробовать, просто чтобы вы знали сами
источник
Я более склонен использовать CSS-спрайты для объединения изображений и экономии на запросах. Я никогда не пробовал технику base64, но она явно не работает в IE6 и IE7. Также это означает, что если какие-либо изображения изменятся, вам придется повторно загрузить все потерянные, если, конечно, у вас нет нескольких файлов CSS.
источник
Я понятия не имею об общих передовых методах, но я, например, не хотел бы видеть такие вещи, если бы я мог им помочь. :)
Веб-браузеры и серверы имеют множество встроенных средств кэширования, поэтому я подумал, что лучше всего было бы просто заставить ваш сервер указывать клиенту кэшировать файлы изображений. Если бы у вас не было много действительно маленьких изображений на странице, я бы не подумал, что накладные расходы на несколько запросов - это такая большая проблема. Браузеры обычно будут использовать одно и то же соединение для запроса большого количества файлов, поэтому новые сетевые подключения не устанавливаются, поэтому, если объем трафика через заголовки HTTP не является значительным по сравнению с размером файлов изображений, я бы не стал слишком беспокоиться о нескольких запросах ,
Есть ли причины, по которым вы считаете, что в настоящий момент на сервер поступает слишком много запросов?
источник
Я бы посоветовал это сделать для крошечных изображений, которые используются очень часто, например для обычных значков веб-приложения.
Конечно, следует помнить о проблемах с поддержкой старых браузеров. Также может быть хорошей идеей использовать возможность фреймворка автоматически встраивать изображения в URL-адреса данных, такие как GWT ClientBundle, или, по крайней мере, использовать классы CSS вместо того, чтобы напрямую добавлять их в стиль элемента.
Дополнительная информация собрана здесь: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/
источник