PNG в Base64 - бесплатно, мгновенно, прямо в браузере
Конвертер PNG в Base64
До 10 МБ. Ничего не загружается — файл не покидает ваше устройство.
Используйте это в атрибуте <img src> или в CSS url().
Без префикса data: — для JSON и API.
Ваши файлы остаются конфиденциальными
Это преобразование целиком выполняется в вашем браузере. Изображение никогда не загружается, поэтому ничто из закодированного здесь не попадает ни на наш сервер, ни к кому-либо ещё.
О преобразовании PNG в Base64
PNG — формат, который встраивают чаще всего: иконки, логотипы, небольшие спрайты, те мелкие детали интерфейса, каждая из которых иначе стоила бы отдельного сетевого запроса. Кодирование в Base64 превращает такой файл в текст, который можно вставить прямо в таблицу стилей или в атрибут HTML. Хорошая ли это идея, зависит почти целиком от того, насколько файл мал.
Как преобразовать PNG в Base64
- 1 Перетащите файл .png в область загрузки.
- 2 Результат появляется сразу — ничего нажимать и ждать не нужно.
- 3 Скопируйте нужный вариант: data URI для HTML и CSS, «сырую» строку для JSON или готовое правило CSS.
Когда встраивание действительно окупается
Каждое отдельное изображение на странице стоит запроса, а у запроса есть издержки помимо переносимых байтов. Для иконки в 1 КБ эти издержки могут перевесить сам файл, так что вложить её в таблицу стилей — настоящий выигрыш. Грубое правило: встраивание помогает до нескольких килобайт и начинает вредить после десяти. Точка безубыточности не фиксирована — она смещается вместе с соединением, сервером и числом ресурсов, борющихся за канал, — но суть обмена всегда одна: вы меняете один цикл запроса на лишние байты.
Чем вы жертвуете
Тремя вещами, и вторая удивляет. Во-первых, размером: закодированный текст примерно на треть больше файла. Во-вторых, кешированием: встроенное изображение нельзя закешировать отдельно, поэтому оно заново скачивается при каждом изменении содержащей его таблицы стилей, а таблица стилей меняется куда чаще логотипа. В-третьих, браузер обязан раскодировать строку прежде, чем рисовать: для иконки это пустяк, для чего-то крупного — заметно. Прозрачность, по крайней мере, сохраняется нетронутой: альфа-канал — часть данных PNG, и Base64 копирует его байт в байт.
Для иконок сначала подумайте об SVG
Если вы кодируете плоскую иконку или простой логотип, SVG обычно окажется меньше PNG ещё до кодирования — и тем более после, ведь SVG уже текст и в Base64 не нуждается вовсе. К тому же он масштабируется под любую плотность экрана без второго файла. Берите PNG, когда в изображении есть фотографическая детализация, мягкие градиенты или эффекты, с которыми векторы справляются плохо, — и тогда уменьшайте его до кодирования, а не после. Base64 добросовестно увеличит всё, что вы ему дадите.