Следвайте този работен пример, след което адаптирайте същите контроли към вашето собствено изображение. Отворете Конвертор на изображение към Base64.
Изберете изображение и прегледайте неговата идентичност
Отворете конвертора „Изображение към Base64“. Изберете изображение или опитайте пример. Примерът използва 512 × 512 пикселно favicon-orbit.png, което съдържа 202,491 байта. Редакторът показва изображението над неговия код, за да можете да потвърдите, че сте избрали желания актив.
PNG, JPG, WebP, GIF, BMP и AVIF се поддържат, когато браузърът ви може да ги декодира за визуализация. Максималният размер на файла е 25 MB, с ограничения от 60 мегапиксела и 16,000 пиксела на страна. SVG маркировка не се приема от този растерен конвертор.
Инструментът чете оригиналните байтове на файла. Той не използва визуализацията, за да преизгради изображението, да го преоразмери или да го компресира повторно. Следователно съществуващите метаданни и GIF анимация се запазват в кодираните данни.
Преди кодиране използвайте „Преоразмеряване на изображение“ или „Компресор на изображения“, ако имате нужда от по-малък актив. Самият Base64 не намалява размера на изображението.
Изберете представянето, което вашият проект очаква
Отворете „Настройки“ и изберете HTML изображение под „Формат на кода“ за този пример. Резултатът е img таг, съдържащ Base64 data URL. Атрибутът alt първоначално е празен; напишете полезен алтернативен текст, когато изображението предава информация.
Data URL започва с префикс като data:image/png;base64, последван от кодираните данни. Plain Base64 съдържа само данните. CSS фон обвива data URL в декларация background-image. Тези представяния обслужват различни цели, затова копирайте формата, изискван от вашето приложение, вместо да променяте само името на файла.
Панелът с код се актуализира веднага след като промените „Формат на кода“. Иконата за копиране копира текущото представяне и дава потвърждение за споделено копиране. Когато достъпът до клипборда е блокиран, кодът се избира за ръчно копиране.
Пълният HTML img таг не е същото като data URL. Използвайте само стойността на src, когато полето изисква URL.
Примерът в това ръководство
Опитайте примерен файл: favicon-orbit.png, 512 × 512 пиксела, 202,491 байта. Изберете HTML изображение под „Кодов формат“. Изберете „Старт“ и изтеглете favicon-orbit-base64.txt.
- Оригинален PNG
- 512 × 512 пиксела · 202,491 байта
- HTML текстов изход
- 270,029 байта
- Кодиране
- Оригинални байтове; без повторна компресия
Изтеглете кода и разберете неговия размер
Изберете Старт, след това Изтегляне. Примерът записва favicon-orbit-base64.txt, съдържащ HTML код на изображение. Неговите 270,029 байта са по-големи от 202,491-байтовия източник. Сравнението в статията показва реалното начало на изтегления текст, съкратено само за по-добра четливост.
Base64 обикновено преобразува три изходни байта в четири текстови знака, добавяйки около една трета преди малката обвивка. Вграждането на малка икона може да направи документа самостоятелен, но поставянето на големи низове с изображения в HTML или CSS също увеличава документа и пречи на изображението да бъде кеширано като отделен файл.
Кодирането не е криптиране. Всеки с пълния Base64 низ може да възстанови оригиналното изображение. Третирайте кода със същата грижа като източника, ако той съдържа лична информация.
Съкратеният откъс в тази статия е с обяснителна цел. Използвайте пълния изтеглен TXT или копирайте целия код от инструмента.
Често задавани въпроси
Ще намали ли кодирането качеството на изображението?
Не. Кодирането запазва оригиналните байтове. То не преоразмерява, не компресира и не пречертава изображението.
Защо низът Base64 е по-голям от изображението?
Base64 представя три входни байта чрез четири текстови знака, така че обикновено добавя около една трета преди обвивка или префикс.
Запазват ли се GIF анимациите?
Кодирането запазва оригиналните GIF байта, включително анимацията. Прегледът може да покаже статичен кадър, докато кодираните данни запазват всички кадри.
Безопасен ли е Base64 за тайни изображения?
Base64 не е криптиране. Пазете низа поверителен, ако основното изображение е поверително. Самият конвертор го обработва локално във вашия браузър.
Превърнете правилното изображение в правилния код.
Опитайте примерен файл или използвайте свой собствен и прегледайте резултата, преди да споделите.
