Насколько быстрее использовать изображения inline/base64 для веб-сайта, чем просто ссылку на жесткий файл?

Question

Насколько быстрее использовать base64/line для отображения изображений, чем против просто ссылки на жесткий файл на сервере?

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

Я не смог найти ни одного показателя производительности.

У меня есть несколько проблем:

• Вы больше не получить пользу от кэширования
• Не является base64 намного больше по размеру, чем какой размер файла PNG/JPEG?

Давайте определим «быстрее», как в: время, необходимое для пользователя, чтобы увидеть полный ОКАЗАННЫХ веб-страницу HTML

Answer 1

Вы больше не получить выгоду от кэширования

Будет ли это важно, зависит от того, насколько вы зависите от кеширования.

Является ли base64 A LOT большим по размеру, чем размер файла PNG/JPEG?

Формат файла/алгоритм сжатия изображений один и тот же, я принимаю его, т. Е. Это PNG.

Используя Base-64, каждый 8-разрядный символ представляет 6 бит: поэтому двоичные данные разлагаются на отношение 8-к-6, то есть только около 35%.

Answer 2

Насколько быстрее это

Определение 'быстрее'. Вы имеете в виду производительность HTTP (см. Ниже) или производительность рендеринга? не

Вы больше не получить выгоду от кэширования

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

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

Answer 3

«Быстрее» является твердая вещь, чтобы ответить, потому что есть много возможных интерпретаций и ситуаций:

Base64 кодирование расширится изображение на треть, что позволит увеличить пропускную способность использования. С другой стороны, в том числе и в файле, будет удалена еще одна поездка GET на сервер. Таким образом, труба с большой пропускной способностью, но с низкой задержкой (например, подключение к спутниковому интернету), скорее всего, загрузит страницу со встроенными изображениями быстрее, чем если бы вы использовали разные файлы изображений. Даже на моей (сельской, медленной) линии DSL сайтам, которым требуется много поездок в оба конца, требуется намного больше времени для загрузки, чем те, которые являются относительно большими, но требуют лишь нескольких GET.

Если вы делаете кодировку base64 из исходных файлов с каждым запросом, вы будете использовать больше CPU, разбивая ваши кэши данных и т. Д., Что может повредить время отклика серверов. (Конечно, вы всегда можете использовать memcached или такой, чтобы решить эту проблему).

Выполнение этого, конечно же, предотвратит большинство форм кеширования, что может сильно повредить, если изображение просматривается часто - скажем, логотип, который отображается на каждой странице, который обычно может быть кэширован браузером (или прокси-сервером кеш, как кальмар или что-то еще) и запрашивается один раз в месяц. Это также предотвратит использование многими веб-серверами оптимизации для обслуживания статических файлов с использованием API-интерфейсов ядра, таких как sendfile (2).

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

Answer 4

Я провел сравнение двух HTML-страниц, содержащих 1800 однопиксельных изображений.

Первая страница декларирует изображения, как встроенные:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"> 

Во втором, изображения ссылаются на внешний файл:

<img src="img/one-gray-px.png"> 

я обнаружил, что при загрузке многократно превышающих один и тот же образом, если он объявляется inline, браузер выполняет запрос для каждого изображения (я предполагаю, что base64-декодирует его один раз на изображение), тогда как в другом сценарии изображение запрашивается один раз для каждого документа (см. сравнительное изображение ниже).

Документ с встроенными изображениями загружается примерно в 250 мс, а документ со связанными изображениями составляет 30 мс.

(Испытано с хромом 34)

Сценарий HTML-документа с несколькими экземплярами одного и того же встроенного изображения не имеет особого смысла априори. Тем не менее, я обнаружил, что плагин jquery lazyload по умолчанию определяет встроенный заполнитель для всех «ленивых» изображений, для которых установлен его атрибут src. Затем, если в документе содержится много ленивых изображений, может произойти ситуация, подобная описанной выше.