Кодировщик изображений Base64

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

Хорошие кандидаты для встраивания:

• Иконки до 2 KB, экономит один HTTP-запрос при незначительном перерасходе.
• Почтовые шаблоны - Поддержка URI данных различается между почтовыми клиентами. Проверьте целевые программы и при необходимости используйте CID-изображения или размещённые файлы.
• Заглушки для первого экрана (LQIP), встраиваем размытую версию низкого качества, полное изображение подгружается позже.
• SVG, используемые один раз, data URI с корректным процентным кодированием иногда короче Base64. Зарезервированные символы нужно кодировать, а недоверенный SVG всё равно остаётся активным содержимым.

Плохие кандидаты:

• Большие изображения, увеличение на 33% для изображения в 500 KB даёт 166 KB лишнего.
• Изображения, повторно используемые на разных страницах, встраивание отключает кеширование браузера между страницами.
• Критический CSS, встраивание тяжёлых изображений раздувает критический путь рендеринга.

Ожидаемый размер

Формат Data URI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

• схема data:
• тип MIME
• индикатор ;base64,
• закодированные байты

SVG: особый случай

SVG является текстом, но сравнение размера с Base64 зависит от содержимого и объёма необходимого процентного кодирования. Для варианта без Base64 используйте data:image/svg+xml, и корректно кодируйте зарезервированные символы. Распространённый параметр ;utf8 не является стандартным и не заменяет процентное кодирование. Инструмент не показывает SVG в предпросмотре и проверяет лишь его структуру UTF-8, поэтому недоверенный SVG остаётся активным содержимым, а Base64 не очищает его.