Информация об изображении

Что такое инспектор информации об изображении?#

Перетащите изображение на эту страницу — и она сообщит всё, что браузер может о нём определить, никуда его не отправляя: имя файла, медиатип IANA, размер в байтах, размеры в пикселях, соотношение сторон (и как несократимая дробь, и как десятичное число), общее число мегапикселей и временную метку последнего изменения. Это быстрая проверка «что вообще за это файл?», за которой вы берётесь перед загрузкой, встраиванием или отладкой вёрстки, ломающейся из-за неправильной формы изображения.

Два момента в этом инструменте заслуживают пояснения. Во-первых, размеры даются в IEC-бинарных единицах (KiB, MiB) по основанию 1024, а не в десятичных SI-единицах (KB, MB) по основанию 1000 — по тому же соглашению, что и во всём этом наборе инструментов, и по тому, как память и хранилище адресуются на самом деле. Во-вторых, соотношение сторон приводится к наименьшей целочисленной форме через наибольший общий делитель, поэтому 1920×1080 выдаёт 16:9, а не 1920:1080, а рядом даётся десятичное 1.78 для использования в CSS-свойстве aspect-ratio.

Размеры берутся из naturalWidth и naturalHeight изображения — истинного размера декодированного битмапа в пикселях, а не размера отображения через CSS — поэтому миниатюра, растянутая на 100 % ширины, всё равно покажет своё реальное исходное разрешение.

Как пользоваться#

1. Перетащите изображение в пунктирную зону (или щёлкните её, чтобы открыть выбор файла).
2. Прочитайте результаты в таблице:
   • Имя файла — исходное имя файла.
   • Тип медиа — определённый MIME, например image/png.
   • Размер файла — байты плюс удобочитаемая метка IEC, например 2.4 MiB.
   • Размеры — ШxВ в истинных пикселях.
   • Соотношение сторон — сократимая дробь и десятичное значение.
   • Мегапиксели — общее число пикселей в миллионах.
   • Изменён — хранимая файлом временная метка.

Здесь нет шага загрузки и нет кнопки «отправить» — как только файл сброшен, страница декодирует его в памяти и заполняет таблицу. Перетащите другой файл, чтобы инспектировать его.

Ключевые возможности#

• Истинные исходные размеры. Читаются naturalWidth/naturalHeight, поэтому масштабирование через CSS инструмент не обманет.
• Сокращаемые соотношения сторон. Проход НОД сворачивает 3840×2160 к 16:9, 4032×3024 к 4:3 — в той форме, в какой вы реально используете их в CSS и дизайнерских инструментах.
• Байтовые единицы IEC. Единая маркировка KiB/MiB; файлы меньше 1 KiB показываются в простых байтах.
• Итог в мегапикселях. Полезно для сравнения разрешения сенсора и оценки объёма занимаемой памяти.
• Ничего не покидает страницу. Изображение читается браузерными API File и Image; нет ни сетевого запроса, ни серверного хранилища.

Разбор примера#

Перетащите фотографию с телефона с именем IMG_2026.jpg. Таблица покажет:

Этот единственный просмотр говорит, что фото — 12 MP JPEG 4:3 весом чуть меньше 4 MiB — как раз то, что нужно, чтобы решить, сжимать ли его перед вложением в письмо, и чтобы задать контейнеру aspect-ratio: 4 / 3, тогда вёрстка не «прыгнет» при загрузке.

Скриншот 1920×1080, напротив, покажет 16:9, 2.07 MP; иконка 512×512 — 1:1, 0.26 MP.

FAQ#

Почему KiB, а не KB?#

IEC-бинарные единицы (KiB = 1024 байт) соответствуют тому, как память и хранилище адресуются на самом деле; десятичные SI-единицы (KB = 1000 байт) — то, что производители накопителей используют в маркетинге. Этот набор использует IEC везде, чтобы избежать постоянной 7-процентной разницы между двумя системами.

Соотношение сторон не совпадает с привычным 16:9 или 4:3 — почему?#

Потому что изображение действительно нестандартного соотношения. Инструмент сокращает до истинных наименьших членов: 1600×900 — это 16:9, а вот 1600×899 — 1600:899, потому что 899 простое. Слегка «не такое» соотношение обычно означает, что исходник был кадрирован или пересчитан до необычного размера.

Читает ли инструмент метаданные EXIF?#

Нет — это отдельная задача. Для производителя и модели камеры, GPS, выдержки и прочих встроенных метаданных используйте инструмент EXIF. Эта страница сообщает только факты на уровне файла и пикселей.

Может ли он инспектировать изображение без файла?#

Если у вас есть data URL или вставленный base64, сначала преобразуйте его в файл инструментом Base64, а затем перетащите сюда.