тест для использования строки base64 вместо изображения, уменьшающей запросы http

Question

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

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

Есть ли эталон, который я должен использовать, например, если base64 больше, чем на 150%, я не должен его использовать и т.д.?

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

Answer 1

Кодировка Base64 всегда использует 4 выходных байта на каждые 3 входных байта. Он работает, используя по существу 6 битов каждого выходного байта, сопоставленных с символами, которые безопасны для использования. Таким образом, вы всегда увидите увеличение на 133% для всего, что вы кодируете с помощью base64, округленное до последней порции в 4 байта. Вы можете использовать сжатие gzip ваших ответов, чтобы вернуть часть этой потери.

Answer 2

Мы надеемся, что ваши файлы HTML и CSS распакованы.Я проверил это на фотографии JPEG: я закодировал в base64 и распаковал его, и результат был довольно близок к исходному размеру файла изображения.Так что никакой разницы нет.

Если вы все делаете правильно, вы получите меньше запросов на страницу, но примерно с тем же размером страницы с кодировкой base64.

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

Answer 3

Это работает только в нескольких браузерах.Я бы не рекомендовал это.Специально для мобильных браузеров.

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

Взгляните на это, чтобы найти несколько простых способов повысить производительность сайта:1006 *

Answer 4

Для кодирования Base64 требуется очень близко к 4/3 от исходного числа байтов, поэтому изрядное количество меньше 150%, больше, как 133%.

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