При внедрении изображения его байты помещаются в HTML, CSS или другой документ. Он может сделать небольшой артефакт автономным, но также связывает изображение с доставкой и кэшированием этого документа. Принимайте решения на основе всего рабочего процесса, а не предполагая, что меньшее количество URL-адресов всегда означает более быструю страницу.
Создайте правильную обертку
Данные изображения PNG URI начинаются с data:image/png;base64,, за которым следует представление исходного файла Base64. JPEG требуется image/jpeg; WebP потребности image/webp. Переименование типа MIME не приводит к преобразованию байтов. Если получателю требуется JPEG, перекодируйте изображение перед созданием его данных URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">Заполнитель выше не является рабочим изображением; замените его полным выходом кодировщика. Если выходные данные уже содержат data: префикс, не добавляйте еще один. Сохраняйте окружающие кавычки сбалансированными и избегайте разрывов строк, введенных редакторами форматированного текста.
Рассчитайте реальный размер
Закодированная часть требует четырех символов на каждые три входных байта, округленных до полных групп. Префикс Data URI добавляет немного больше. Для файла размером 30 000 байт одна только полезная нагрузка составляет 40 000 символов. Сжатие HTML может изменить передаваемый размер, но браузеру все равно необходимо проанализировать документ и декодировать изображение. Измерьте реальную страницу, а не только исходный файл.
Отдельно поданное изображение можно кэшировать и повторно использовать независимо на разных страницах. Встроенное изображение привязывается к каждому документу, содержащему его. Поэтому большие повторяющиеся иллюстрации — плохие кандидаты для автоматического встраивания. Небольшие одноразовые значки в автономном отчете могут оказаться разумным компромиссом.
Проверьте пункт назначения
Политика безопасности контента может ограничивать data: изображения. Почтовые клиенты могут удалять или отклонять встроенный контент. Предварительный просмотр файла в вашем браузере не доказывает, что приложение получателя отобразит его. Проверьте именно тот экспорт, почтовый клиент или последующую систему, которую вам необходимо поддерживать.
Для временного локального предварительного просмотра Blob URL часто позволяет избежать создания большой строки Base64. Отмените URL, когда его представление будет удалено. Для экспортированного автономного HTML могут подойти данные URI. Сохраните замещающий текст и размеры в любом случае. Вопросы синтаксиса и браузера описаны в MDN: URL-адреса данных.