Конвертер изображения в Base64 — кодирование в data URI

Потому что Base64 — это кодирование, а не компрессор. Она представляет 3 байта двоичных данных четырьмя печатаемыми ASCII-символами, поэтому результат всегда примерно на 33% длиннее исходника, плюс несколько байт на префикс data:. Этот рост присущ самому формату, и нет настройки, которая бы его убрала. Если нужен файл поменьше, сожмите изображение перед кодированием — сам этап кодирования может только добавлять объём.

Встраивайте, когда ресурс маленький и нужен всегда: иконки, распорки 1×1, крошечные текстуры фона — примерно до 10 КБ. Ниже этого порога экономия на HTTP-запросе обычно перевешивает 33%-ный рост размера. Не встраивайте фотографии, крупные баннерные изображения или что-либо больше примерно 100 КБ. Крупный data URI нельзя закэшировать отдельно, его приходится перезагружать при каждом изменении страницы или таблицы стилей, и он блокирует парсер, пока не будет полностью прочитан.

Часто нет. Gmail полностью вырезает data URI из тегов img, а десктопные клиенты Outlook никогда не поддерживали их надёжно. Apple Mail и некоторые веб-почтовые клиенты их всё же отображают. Надёжный подход для писем — это по-прежнему размещённый на хостинге URL изображения или вложение CID, на которое ссылаются через cid: в src. Протестируйте в тех клиентах, которыми реально пользуются ваши получатели, прежде чем полагаться на встроенные данные.

Да, и это происходит без потерь — декодированные байты идентичны исходному файлу, включая EXIF и данные цветового профиля. Вставьте полный data URI в адресную строку браузера, и изображение отобразится. В коде это делает atob() в JavaScript или base64 -d в командной строке. Учтите, что необработанный вывод на этой странице не содержит префикса data:, так что добавьте его обратно, если получателю нужен полноценный URI.

Нет. SVG уже является текстом, поэтому Base64 лишь добавляет 33% без всякой пользы. Вместо этого вставьте разметку прямо в HTML — это также позволит CSS стилизовать фигуры, а JavaScript получать к ним доступ. Для фонов в CSS используйте SVG с URL-кодированием в url(), а не Base64 — так он остаётся компактнее и лучше сжимается gzip. Base64 для SVG имеет смысл только там, где требуется строгий URI и процентное кодирование не подходит.

В спецификациях HTML и CSS ограничения нет, и современные браузеры спокойно обрабатывают многомегабайтные data URI в атрибутах src. Практические пределы возникают в другом: адресные строки браузеров обычно обрезаются примерно на 2 МБ или раньше, некоторые настройки серверов и CDN ограничивают размер заголовков и запросов, а очень длинные строки заметно замедляют разбор. Сам инструмент не накладывает ограничения, но предупреждает выше 100 КБ, потому что именно с этого момента встраивание перестаёт быть оправданным.

Нет. Файл считывается через FileReader API браузера, который работает с локальным дескриптором файла, а получившаяся строка остаётся в памяти страницы. Ничего не отправляется по сети, и здесь нет никакого серверного компонента, поэтому инструмент продолжает работать офлайн после загрузки страницы. Копирование в буфер обмена идёт через стандартный буфер обмена браузера, а не через нас.

Все — для изображений data URI в img src и CSS url() работают ещё со времён IE8 и сегодня поддерживаются повсеместно. Более новая часть — это буфер обмена: navigator.clipboard требует защищённого контекста, поэтому по обычному HTTP или в старых браузерах страница переключается на выделение текстового поля и document.execCommand('copy'). Если оба способа не сработают, вы увидите сообщение с просьбой выделить и скопировать текст вручную.