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

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

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

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

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 при загрузке и просмотре в графической программе.

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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