Руководство для разработчиков

Изображение Base64 в HTML, CSS и JavaScript

Практические примеры встраивания данных изображений Base64 во фронтенд-код с заметками о производительности и размере файла.

Примеры для копирования HTML, CSS и JS Заметки о производительности

4.8 / 5 124 оценок

Что такое data URI изображения Base64?

Data URI объединяет MIME-тип и содержимое Base64 в одной строке. Обычный формат выглядит как data:image/png;base64,iVBORw0KGgo...

Вы используете значение data image base64, когда хотите ссылаться на изображение без отдельного URL файла. Браузер читает текст и отображает изображение напрямую.

Примечание: запросы html to base64 обычно относятся к кодированию самого HTML-файла. Это руководство сосредоточено на размещении данных изображений Base64 в HTML, CSS и JavaScript.

Изображение Base64 в HTML-теге img

Используйте data URI в атрибуте src, когда нужен самодостаточный HTML-фрагмент с шаблоном base64 img tag.

Базовый пример img tag base64

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1x1 pixel" />

Замените образец значением из конвертера «Изображение в Base64».

Фоновое изображение Base64 в CSS

Используйте закодированные изображения для небольших иконок, заглушек и декоративных фонов с шаблоном background image base64.

CSS background-image

.icon { width: 24px; height: 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="); background-size: cover; }

Держите data URI в CSS небольшими, чтобы таблица стилей быстро загружалась и разбиралась.

Преобразование изображения в Base64 с JavaScript

Генерируйте Base64 в браузере, когда нужны рабочие процессы convert image to base64 javascript для загрузок, предпросмотра или вызовов API.

Пример FileReader

function fileToDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); }

Результат включает префикс data URI и закодированное содержимое. Это распространённый подход image to base64 javascript.

Пример Canvas

const dataUrl = canvas.toDataURL('image/png'); const base64 = dataUrl.split(',')[1];

Используйте вывод canvas, когда изображение уже нарисовано на элементе canvas.

Примеры изображений Base64

Строки PNG и GIF Base64 распространены для крошечных UI-ресурсов, таких как иконки, заглушки и точки загрузки.

JPEG Base64 часто начинается с /9j/, когда вы просматриваете только закодированные символы без префикса.

Когда в документации упоминается строка image to base64, обычно имеют в виду либо сырые закодированные символы, либо полный data URI. Оба формата встречаются в реальных проектах.

Используйте наши страницы конвертеров, чтобы создать base64 image example или image base64 example из ваших файлов вместо использования текста-заглушки.

Связанные конвертеры

Изображение в Base64 PNG в Base64 JPG в Base64 SVG в Base64

Плюсы и минусы изображений Base64

Плюсы

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

Минусы

Результат Base64 image encode больше исходного файла, его сложнее кэшировать как отдельный ресурс, и он плохо подходит для больших фотографий.

Часто задаваемые вопросы

Вставьте полный data URI в атрибут src тега img. Вы можете скопировать готовый фрагмент из конвертера «Изображение в Base64».

Используйте Base64 в CSS для очень небольших ресурсов, таких как иконки. Избегайте больших значений background image base64, потому что они увеличивают размер таблицы стилей.

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

Используйте FileReader с readAsDataURL для загрузок или canvas.toDataURL, когда изображение уже нарисовано на canvas. Оба метода возвращают строку, которую можно разделить или вставить напрямую.