Фрагмент файла unlock_001.jpg
Компания Apple имеет огромный опыт в разработке веб-технологий, но сейчас попала в абсурдную ситуацию. Если зайти на страницу с описанием дизайнерских инноваций iPhone, то можно увидеть странное: видеоролик с анимацией разблокировки «айфона» закодирован с помощью нескольких JPEG-файлов необычного вида.
Возникает вопрос: как вообще это работает? И зачем прибегать к подобным ухищрениям, если можно использовать стандартный тег <video>.
Объяснение простое. Оказывается, на iPhone тег <video> работает только в полноэкранном режиме, так что Apple не может его использовать для вставки видеороликов на странице. Кроме того, Apple использует исключительно видео H.264, а его поддерживают не все браузеры, что неприемлемо для промо-странички.
Раньше Apple решала эту проблему, создавая JPEG для каждого фрейма анимации, в результате чего двухсекундная анимация занимала 5 МБ. Теперь они осуществили оптимизацию: анимация iPhone 5 объёмом всего лишь один мегабайт состоит из пяти файлов:
www.apple.com/iphone/design/images/unlock/unlock_manifest.json
www.apple.com/iphone/design/images/unlock/unlock_keyframe.jpg
www.apple.com/iphone/design/images/unlock/unlock_001.jpg
www.apple.com/iphone/design/images/unlock/unlock_002.jpg
www.apple.com/iphone/design/images/unlock/unlock_endframe.jpg
Алгоритм работы описан в файле ac_flow.js и основан на том, что обновляется только часть картинки для экономии трафика. В файлах
unlock_001.jpg и unlock_002.jpg содержатся эти обновляемые фрагменты изображения. В файле unlock_manifest.json указаны координаты, чтобы позиционировать части. Чтобы JPEG-артефакты отдельных фрагментов не испортили общую картину, Apple использует блоки размером 8х8 пикселов, как это делает кодек JPEG. Вышеупомянутые файлы unlock_001.jpg и unlock_002.jpg, фактически, используются как непрерывный поток блоков 8х8. Инструкции для обработки потока указаны отдельно в формате base64, который приходится декодировать: 
Каждая инструкция состоит из пяти байт, первые три байта указывают координаты цели в canvas, а последние два байта — сколько блоков туда поместить. Например, инструкция
AAxAC означает, что нужно взять два блока (AC) и разместить их в позицию 49 (AAx).С таким алгоритмом сборки видео нет возможности повторного использования блоков, но зато сам манифест получается вполне лаконичным.
via dbloom
