Что такое строка data:image/png;base64
Если вы встретили в коде страницы длинную строку вида data:image/png;base64,iVBORw0KG..., это картинка, закодированная в Base64 и вставленная прямо в HTML или CSS вместо ссылки на файл. Быстрее всего увидеть саму картинку так: скопировать строку целиком (вместе с data:) и вставить в адресную строку браузера. Он отрисует её как обычное изображение. Для SVG такую строку удобнее собирать отдельным кодировщиком SVG в Base64, он учитывает особенности векторного формата.
Префикс до запятой у data-URL всегда называет MIME-тип содержимого, вот самые частые:
| Префикс | Формат |
|---|---|
| data:image/png;base64, | PNG-изображение |
| data:image/jpeg;base64, | JPEG-изображение |
| data:image/svg+xml;base64, | SVG-изображение |
| data:application/pdf;base64, | PDF-документ |
| data:font/woff2;base64, | Шрифт в формате WOFF2 |
Чем URL-безопасный Base64 отличается от обычного
Переключатель «URL-безопасный» меняет два символа алфавита: + и / на - и _, а завершающие = убираются. Так строку можно безопасно использовать прямо в адресе страницы. Именно в таком виде закодированы части JWT-токенов . Если вставить такую часть сюда без включённого переключателя, декодер покажет ошибку или мусор вместо текста.
Зачем вообще нужен Base64, какие ошибки чаще всего ломают декодирование и что лежит внутри длинной строки с картинкой, разобрано в статье Что такое Base64: как раскодировать строку и посмотреть, что внутри.