В чем разница между ссылкой на файл изображения в src тега img и ссылкой на встроенное изображение непосредственно в теге image?

Question

Есть ли разница между использованием <img src=pathto.png /> и <img src=data:image/png;base64,encodedpngdata... /> с точки зрения сервера?

В случае src=pathto.png будет ли сервер просто кодировать изображение и отправлять его в браузер?

Answer 1

Первый пример ссылается на внешний ресурс, указав его URI. Таким образом, это приведет к дополнительному запросу к этому ресурсу для получения данных.

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

Оба метода имеют свои преимущества и недостатки:

                        external    embedded
separate request (-)       ✓           ✗
cachable (+)               ✓           ✗
referencable (+)           ✓           ✗
compression (+)            ✓           ✗

• Данные внешнего ресурса
  Преимущество использования внешнего ресурса заключается в том, что такие ресурсы можно кэшировать и использовать в разных документах, не отправляя запросы на каждый вид этих ресурсов.
  Недостатком является то, что он принимает этот первый дополнительный запрос.

• Данные встроенного ресурса
  Преимущество встраивания данных ресурса непосредственно в документ заключается в сохранении дополнительного запроса.
  Но недостатком является то, что такие ресурсы нельзя кэшировать или ссылаться на них несколько раз в одном документе или разных документах. Также это не может быть сжато, используя deflate или gzip. Фактически, кодировка Base64 будет увеличивать размер в 4/3 раза.

См. Также первое правило Меньше HTTP-запросов из Рекомендации по ускорению работы вашего сайта .

Answer 2

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

Для встраивания его в строку требуется, чтобы данные отправлялись с каждым запросом страницы, включающим изображение (и несколько раз, если изображение используется более одного раза на странице)

Answer 3

В случае <img src="/path/to/image.png" /> сервер не будет кодировать изображение. Браузер запросит его по отдельному запросу , и сервер просто выдаст короткий заголовок, а затем данные файла по проводам. На хорошо написанном HTTP-сервере это невероятно быстрая операция, поскольку требуется лишь минимальное количество обработки. Браузер также может кэшировать изображение, чтобы не было необходимости извлекать его позже (как говорили другие).

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