Как пользоваться
- Перетащите файл .jpg или .jpeg в область загрузки, нажмите на неё, чтобы выбрать файл, или вставьте изображение.
- Чтобы сохранить файл в точности как есть, оставьте в списке «Преобразовать в» значение «Исходный формат». Чтобы уменьшить его, выберите JPEG или WebP и снизьте качество.
- Если фотография крупнее, чем будет отображаться, ограничьте её ширину в параметре «Макс. ширина».
- Скопируйте нужный результат, например тег img для страницы или чистый Base64 для API, или скачайте его в виде файла.
Кратко о JPEG
JPEG — стандартный формат для фотографий. Он использует сжатие с потерями, отбрасывая детали, которые глаз почти не замечает, и не поддерживает прозрачность. Файлы имеют расширение .jpg, .jpeg или иногда .jfif, но тип MIME всегда image/jpeg; image/jpg не является зарегистрированным типом, хотя многие браузеры его допускают. Data URI для JPEG начинается с data:image/jpeg;base64,/9j/ — это закодированный маркер начала изображения.
Как уменьшить фотографию перед кодированием
Именно на фотографиях Base64 обходится дороже всего: JPEG размером 200 КБ превращается примерно в 270 КБ текста. Сильнее всего на результат влияют две настройки:
- Макс. ширина. Если уменьшить ширину вдвое, число пикселей сократится в четыре раза. Фотография с телефона шириной 4000 пикселей редко нужна в таком размере.
- Качество. При значениях около 70–80% изображение на экране обычно выглядит так же, как оригинал, а весит намного меньше. При очень низких значениях появляются блочные артефакты.
Преобразование в WebP с похожим качеством часто даёт ещё меньший результат. Следите за размером после кодирования при каждой настройке и выбирайте самый маленький результат, который ещё выглядит хорошо.
Метаданные EXIF
Фотографии с камер и телефонов содержат метаданные EXIF: модель камеры, дату и время съёмки, а иногда и координаты GPS. Без преобразования результат Base64 содержит исходные байты вместе с метаданными, и любой, кто его декодирует, сможет их прочитать. Именно это нужно, когда важен точный файл, например если API проверяет хеш или считывает дату съёмки.
При преобразовании браузер заново кодирует пиксели, и данные EXIF не переносятся. Результат становится меньше и больше не выдаёт, где была сделана фотография.
Когда data URI для JPEG оправдан
Хорошо подходят крошечные размытые заглушки (изображение шириной 20–40 пикселей, встроенное в страницу, пока полная фотография подгружается отложенно), миниатюры в ответах JSON и HTML-экспорт в одном файле. Главным изображениям страниц и галереям место в отдельных файлах, которые браузер может кешировать.
# Python
import base64
with open('photo.jpg', 'rb') as f:
uri = 'data:image/jpeg;base64,' + base64.b64encode(f.read()).decode('ascii')Часто задаваемые вопросы
JPG и JPEG — это одно и то же?
Да. Более короткое расширение .jpg появилось в системах, где допускалось только три символа. Это один и тот же формат с типом MIME image/jpeg.
Снижает ли кодирование Base64 качество JPEG?
Нет. Base64 представляет байты файла без потерь. Качество меняется, только если выбрать преобразование: тогда изображение заново кодируется с заданным качеством.
Может ли у data URI для JPEG быть прозрачный фон?
Содержит ли строка Base64 место съёмки моей фотографии?
Может содержать. Если в метаданных EXIF исходного JPEG есть данные GPS и вы кодируете файл без изменений, координаты попадут в строку. При преобразовании изображения метаданные EXIF удаляются.