[РУКОВОДСТВО] Встраивание изображений с помощью Base64

// Что такое data URI?

Data URI — это схема, которая позволяет встраивать небольшие файлы, например изображения, прямо в HTML или CSS. Это способ включить содержимое файла в сам документ, а не ссылаться на внешний файл.

Формат data URI для Base64-кодированного изображения такой: `data:[MIME_тип];base64,[данные]`

// Как встроить изображение в HTML

Чтобы встроить изображение в HTML, используйте тег `<img>` с data URI в качестве атрибута `src`:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="A Base64-encoded image">

// Как встроить изображение в CSS

Вы также можете встраивать изображения в CSS с помощью функции `url()`:

.my-element {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...");
}

// Плюсы и минусы

**Плюсы:**

- **Меньше HTTP-запросов:** поскольку изображение встроено, браузеру не нужно выполнять отдельный запрос для его загрузки. Это может повысить производительность для небольших изображений.

- **Переносимость:** HTML- или CSS-файл становится самодостаточным, что бывает полезно, например, для шаблонов писем.

**Минусы:**

- **Увеличение размера файла:** Base64-кодирование увеличивает размер данных изображения примерно на 33%.

- **Кеширование:** data URI являются частью документа, поэтому браузер не может кешировать их отдельно.

- **Читаемость:** большие Base64-строки могут усложнить чтение вашего кода.

// Когда использовать встраивание изображений в Base64

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