Как браузеры определяют размеры изображений в формате GIF?

Question

Я заметил, что GIF отображается с отступом в FireFox 5 и IE 8. Когда я просматривал размер изображения через FireBug, я заметил, что он был на несколько пикселей больше, чем ожидалось.

Ожидаемая высота: 160px против фактической высоты: 171px

Когда я открывал GIF в редакторе изображений, редактор отображал правильные размеры, однако, когда я запускал ImageMagick identifier, я получал следующую информацию:

newGif.gif GIF 200x160 200x171+0+5 PseudoClass 256c 30kb 

Если я изменил геометрию до 200x160 + 0 + 0, изображение отобразится так, как я ожидал в FireFox. FireFox и IE 8, казалось, ссылались на геометрию страницы изображения, а не на размеры! Является ли мой анализ правильным, и если да, то верно ли это для всех типов изображений или только для GIF?

Обновлено, я включил изображение для вашего удовольствия от просмотра! Это изображение отображается как 200 x 171 для меня в FF, но на самом деле оно составляет 200 x 160 при загрузке и просмотре в графической программе.

Answer 1

Заголовок этого файла GIF не соответствует его телу.

Размеры изображения хранятся в 6-9-м байтах, и из снимка экрана вы можете видеть, что размеры в заголовке составляют 00C8 x 00AB, что составляет 200x171, но его фактический размер составляет 200x160

.Так что это изображение не является действительным.Не существует стандартизированного поведения для разбора недопустимых GIF-файлов, и поэтому существует такая несогласованность.

Скорее всего, Firefox предварительно выделяет место для изображений перед их полной загрузкой, когда изображение полностью загружается, оно помещается в центр предварительно выделенного пространства.и поскольку предварительно выделенное пространство составляет 200x171, а фактическое изображение составляет 200x160, вы увидите границу.

РЕДАКТИРОВАТЬ: После просмотра справочника по формату GIF кажется, что GIF это разрешает.Таким образом, изображение является действительным.Итак, вот что на самом деле происходит: формат GIF состоит из нескольких блоков.Существует блок заголовка и один или несколько (, если изображение является анимированным ) блоков изображения ( могут быть и другие блоки, но они не связаны с проблемой ).Блок заголовка содержит некоторую информацию об изображении, включая его ширину и высоту.Однако каждый блок изображения имеет свою ширину и высоту.Так что же происходит с изображением, о котором идет речь, что оно имеет основной размер изображения 200x171, но один кадр размером 200x160.Поэтому большинство программ и библиотек для редактирования, которые не поддерживают анимированные GIF-файлы, извлекают первый кадр и отображают его размером 200x160, а браузеры и редакторы, поддерживающие анимацию, должны отображать его в полном размере 200x171.

PS Каждый блок изображения имеет верхнюю часть изображения и левую позицию изображения.Похоже, что позволяя фреймам быть меньше, чем canvas, и позволяя перемещать позицию фрейма на холсте, разработчики GIF пытались сбрить пару байтов анимированных файлов GIF.Интересно, воспользуется ли кто-нибудь из современных графических редакторов этим преимуществом ... вероятно, нет ...:)

1. Порядок байтов в формате GIF

Answer 2

Если вы сохраните изображение и щелкнете правой кнопкой мыши -> Свойства, будет указано, что оно составляет 200x160, что также примечательно при предварительном просмотре изображения в окнах. Черные полосы добавляются к изображению, что странно. Если вы откроете его в MS Paint (только для демонстрационных целей), вы заметите, что изображение заполнено черными полосами, и когда вы посмотрите на файл-> свойства, оно говорит, что изображение теперь 200x171.

Наиболее вероятный сценарий состоит в том, что заголовок файла говорит, что он 200x160 (на что смотрят окна / браузеры и т. Д. Для быстрого определения размера изображения), тогда как фактический блок изображения составляет 200x171. Черные полосы не отображаются в браузерах, так как они, скорее всего, прозрачны, но, поскольку MS Paint и предварительный просмотр окон не поддерживают прозрачность, черные полосы отображаются в них. Кроме того, в mspaint найден правильный размер, потому что данные заголовка выброшены, а свойства показывают вам свойства их структуры данных, теперь удерживающие блок изображения для редактирования изображения, аналогично, если вы загружаете изображение в mspaint, измените изображение, чтобы удалить черные полосы, сохраните, а затем поместите эту картинку в браузер, тогда отступы исчезнут.

В большинстве случаев при загрузке изображения в файл изображения требуется только горизонтальное разрешение изображения, а блок изображения просто читается для горизонтального разрешения для каждой вертикальной строки изображения, когда вы читаете конец блока изображения, вы находитесь в конце изображения, поэтому при загрузке изображения с него не обязательно учитывать вертикальное разрешение. Вот почему изображение выглядит нормальным и не обрезается по нижнему краю.

Что касается того, почему это изображение не дополняется в других браузерах. Я могу только предположить, что это заполнение изображений с помощью границ является стандартом того типа, которого они привыкли ожидать в файлах изображений, и когда они сталкиваются с блоком изображения, размер которого превышает размер заголовка файла, они обрезают его по направлению к центру блока изображения, чтобы в меру своих способностей

Answer 3

Я подозреваю, что GIF - это анимированный формат, поэтому он может содержать несколько изображений, расположенных в разных положениях геометрической рамки. Поэтому браузер должен зарезервировать место для всего.