MJPEG, MPNG, MGIF, MSVG

Я вчера показывал вам «телевизор» про фестиваль в Самаре. Сделано очень просто — уменьшил все сделанные там снимки до 66×44 и сконвертировал их в анимированный ГИФ. Мелковато, конечно, но что делать — ГИФ не очень-то предназначен для фотографических изображений и размер анимации сильно растёт с увеличением размера кадра. Для фотографий в интернете принято использовать формат JPEG.

У JPEG есть свой формат анимации, если так можно выразиться, а точнее — скорее простенький формат видео, так как формат анимации, в моём представлении, помимо кадров должен содержать себе какую-то метаинформацию о кадре, например, задержку перед появлением следующего кадра. Этот формат — разновидность MJPEG (motion JPEG).

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

В данном случае, MJPEG — формат стримминга (потоковой подачи) видео. Собственно, это даже не формат, а простое соединение JPEG и специального заголовка «multipart/x-mixed-replace», которым может применяться для стриминга чего угодно. Можно, например, подавать не JPEG, а PNG и «изобрести» формат видео MPNG, а то и M(JPEG+PNG+GIF), картинки разных форматов можно перемешивать в любых пропорциях.

Смысл этого заголовка — содержимое которое пришло раньше заменяется тем, что пришло позже. То есть MJPEG — это просто последовательность картинок, у которых этим заголовком указано — когда приходит следующая картинка, ею надо заменить предыдущую. Внутри выглядит это вот таким образом.

Content-type:  multipart/x-mixed-replace;boundary=СТРОКАРАЗДЕЛИТЕЛЬ

--СТРОКАРАЗДЕЛИТЕЛЬ
Content-type: image/jpeg
Content-length: 232311

…бинарное содержимое первой картинки…

--СТРОКАРАЗДЕЛИТЕЛЬ
Content-type: image/jpeg
Content-length: 47474

…бинарное содержимое второй картинки…

СТРОКУРАЗДЕЛИТЕЛЬ надо выбирать так, чтобы она не встретилась в бинарных данных изображения.

Браузерам этот заголовок достался от фирмы Нетскейп, которая когда-то (ещё в версии 1.1) добавила её поддержку в свой браузер. «Микрософт», будучи конкурентом «Нетскейпа», поддержку заголовка в браузер не внедрила. Остальные браузеры заголовок понимают, но каждый немного по-разному.

Например для «Оперы», нужно выдавать данные с задержкой, то есть показали один кадр, ждём пару секунд, ничего с сервера не отдаём, потом следующий. Иначе, «Опера» «хитрит» — показывает следующий кадр, не дожидаясь загрузки предыдущего. Если канал хороший, то мы увидим только последний кадр.

«Файрфокс» единственный, кто хорошо справляется с тем, что кадры могут быть разных размеров — он отображает их правильно, «Опера» масштабирует по первой картинке, «Хром» и «Сафари» глючат — иногда пропускают кадр, иногда ничего не показывают, иногда показывают нормально.

Самое приятное в этом формате — что все современные браузеры считают его картинкой, то есть тег IMG его преспокойно показывает.

Любопытно, что браузеры позволяют сжимать содержимое всего файла и даже каждого кадра отдельно, то есть можно в заголовке кадра поставить «Content-encoding: gzip» и сжать кадр гзипом. Это полезно, если захочется сделать MSVG, например. Ведь SVG-изображения хорошо сжимаются.

Так что, если вы задумались сделать аналог какого-нибудь хостинга анимированных ГИФ и вам наплевать на «Эксплорер» (я посмотрел, девятая версия не поддерживает), сделайте ещё и поддержку MJPEG/MPNG.