Хитрый способ создания анимированного jpeg'а


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

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

    Под хабракатом находится сжатая версия вот этой гифки tfirma.name/public/leprosorium.ru/cosss_gif/0004w00e.gif
    Оригинал весит 6 мегабайт, сжатая версия — 1,3 мегабайта.

    Осторожно! Данное решение имеет существенный недостаток, который выражается в высокой загрузке процессора (около 25%). Происходит это только во время загрузки файла, около 1-2 секунд, потом все возвращается в норму.




    Работает это очень просто. Делается большой спрайт в формате jpeg. Внутри svg спрайт вставляется в base64. Анимация происходит средствами svg. Никаких скриптов.

    Из минусов только вот этот баг с загрузкой процессора + неподдержка формата svg некоторыми браузерами.
    Тормоза возможно связаны с декодированием base64 и (мне, по крайней мере) не доставляют больших неудобств.

    Плюсы очевидны (по сравнение с gif): более быстрая загрузка, глубина цвета не ограничена 256 цветами, что в свою очередь позволяет избежать эффекта постеризации, написать сборщик в данный «формат» довольно простая задача.

    Хотелось бы получить фидбек на тему взлетит/не взлетит, возможные улучшения + просто потешить свое ЧСВ :)

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 73

      +3
      Могут быть проблемы на мобильных платформах. На моем iPad картинка не видна совсем.
        +3
        Да, сафари, почему-то не отображает картинку. Это пичалька (
          +1
          Отображает, если открыть в новом окне (OS X 10.8, правда, не мобильная версия).

          Судя по комментам ниже, это — бага в WebKit.
          • UFO just landed and posted this here
            • UFO just landed and posted this here
            +2
            В андроидовом хроме проблем не наблюдаю:) Разве что планшет раскочегарился прилично…
              0
              подтверждаю, Хром Андроид работает
                0
                Android Opera 16.0.1212.65583 тоже прекрасно себя ведёт
            +2
            Как раз вчера читал хорошую статью на эту тему.
            http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html
            Анимации работающие через canvas. Работают на любых платформах + маленький вес.
              0
              Забыл указать что они создаются из скриншотов, и больше подходят для слайд-шоу показа работа программы чем для развлекательных анимаций.
              +2
              У меня в хроме картинка не видна, обновления окна не помогают, при этом если открыть картинку в отдельной вкладке то видно все хорошо. При этом потребление памяти и процессора заметно больше тех, которые были бы если поставить гифку.
              Порядка 15% cpu, при этом при замене на гифку это значение падает. с учетом памяти сложнее. Обычно вкладка хабра занимает порядка 70Mb, эта вкладка 130Mb, в случае с большей по размеру гифки потребление тут же падает где то до 120Mb, но тут вероятно еще сборщик мусора не прошелся. Так что на мой взгляд, не взлетит. Кстати проблемы с отображением могут быть связаны с какими нибудь настройками безопасности касательно SVG с других доменов. Не знаю даже.
                0
                Какая система у вас?
                  0
                  OS X 10.8 + Chrome 28
                +7
                gif при компрессии анимации сохраняет только изменения в кадре, у вас — вся картинка целиком, было бы хорошо, если в вашем методе будет хотя бы дельта с точностью до блока 8х8px (для jpeg). Еще рекомендую посмотреть на это.
                  +2
                  FF v25 в w8. 4ядерный проц грузит на 30%.
                  А в хроме все отлично.
                    +2
                    FFv25, сколлинг на этой странице очень тормозит.
                      0
                      FF 25.0, Виста.
                      Сожрало одно ядро полностью, при этом анимация не плавная, а в виде слайд-шоу, часть кадров попросту выбрасывается.
                      Перезагрузка страницы с отключённой картинкой и закрытие таба не помогли разгрузить проц, пришлось закрывать браузер целиком.
                      +2
                      Firefox 17.0.8 ESR упал где-то через минуту.
                      Смотрю в диспетчера задач — потребление памяти растёт где-то на 20 мегабайт в секунду :)
                      Четырёхъядерный Core i5-2500K @ 3.3 GHz загружен ровно на 25%.
                      После нажатия Esc анимация прекращается и память освобождается до ~330 МБ.
                        0
                        Firefox 25 на i7 продержался минут 5.
                        +1
                        Просветите дикаря, плиз — а чем все эти гифки так хороши, что люди видеоформаты не используют? Я как-то далек от этого, но вроде ж не логично…
                          +6
                          Видеоформаты не циклятся из коробки, видеофайл невозможно вставить в качестве изображения. Совместимость опять же. Так и получилось, что в 2013 году анимированные изображения имеют по 256 цветов.
                            0
                            То есть, выходит, банальная кривость интерфейсов — то, что разные вконтакты не разрешают вставлять, скажем, видео размером до пары мегабайт так же тривиально, как картинку? А цикл по умолчанию там включить во флеш-плеере всяком ожно, насчет HTML5 — не помню, но тоже можно вроде…
                          +7
                          Наоткрывал из RSS сразу несколько топиков не глядя, и думаю, что это у меня так браузер тормозит…
                            +3
                            Во время работы анимации загрузка 1 из 8 ядер FX8120 на 95% (Opera 12.15).
                            Память при загрузке страницы оперой +100Мб, затем -40Мб по началу анимации.
                            При скроллинге страницы, вводе текста в поля, браузер весьма ощутимо подтормаживает, в том числе при фокусе на иных вкладках при открытой в фоне анимации.

                            Мне кажется, в этом виде технология не взлетит.
                              0
                              Я явно вижу какую-то не такую анимацию, в чём может быть проблема?
                                0
                                В сафари не работает.
                                +8
                                Больше костылей! Разных костылей!

                                Как на счет APNG?
                                  –2
                                  Сжатие не подходит, для подобного растра. + Не работает хотя бы в хроме.
                                  Было бы круто разработать формат на подобие этих, только с нормальным сжатием и потом зафорсить плагины для его декодирования. Флеш же как-то стал стандартом.
                                    +1
                                    WebP поддерживает анимацию. Но я не знаю, как у него со сжатием (т.е. сжимаются ли только отдельные кадры или всё изображение как целое).

                                    Новость на habrahabr.
                                  0
                                  25-я лисица, линукс икс64, загрузка одного из ядер — 90% всё время.
                                  да, и расход памяти все больше и больше расходуется.
                                  • UFO just landed and posted this here
                                      0
                                      А у меня анимация моргает белым в начале анимации, что очень раздражает. Win 7 x64 Chrome 30.0.1599.101 m
                                        0
                                        Это косяк в самом файле, я его уже поправил, но картинка лежит не на моем хостинге, поэтому обновить не могу.
                                        0
                                        Win 7, Firefox 25 — если прокрутить эту страницу сильно вниз, то все ок, а если оставить картинку видимой, то тормозит прокрутка даже соседних вкладок
                                          0
                                          Zoom на 150% (мой дефолт для хабрахабра) ломает картинку в хроме. С меньшим зумом отображается правильно.
                                            0
                                            Забавно, но у меня на 175% все отлично работает.
                                              0
                                              150%, хром, винда — все хорошо.
                                                0
                                                Ubuntu 12.04 Chrome 28, и при зуме и без нормально ворочается, а вот фаерфокса хватило на 5 минут, память скушал оперативно.
                                                +1
                                                Тормозит почище flash в старой (нехромой) Opera. При этом и ноут вроде неслабый i5-450 с 6 Gb памяти.
                                                  +5
                                                  Хитрый способ подвесить браузер одной картинкой.
                                                  (Opera 12 x64, Core i7, 16 Gb, загрузка ядра 100%, все вкладки ощутимо притормаживают)
                                                    0
                                                    Какая ОС?
                                                  +1
                                                  А вы не пробовали вставить картинку линком?
                                                  <svg> <image x="20" y="20" width="300" height="80" xlink:href="https://d339vfjsz5zott.cloudfront.net/SVG-Spinner/svg-spinner.png" /> </svg>
                                                    +1
                                                    Пробовал, тогда проблема с цп решается, но это ведь не выход :)
                                                      +1
                                                      Почему не выход?
                                                        0
                                                        Ну «на крайняк». Потому что так будет не 1 файл, а 2.
                                                    0
                                                    Opera Next 18, Win7 SP1, Core i5 3450, 24 Gb 1600. Сжатая версия проигрывается вдвое быстрее оригинальной, так должно быть? Для проверки скачка проца открыл в ФФ — дотянуло с 9 до 37%, там сжатая играется вообще как слайд-шоу из 5 фреймов.
                                                      0
                                                      Да, в сжатой фреймрейт отличается.
                                                      0
                                                      На хроме версия 30.0.1599.114 Ubuntu 13.04 (30.0.1599.114-0ubuntu0.13.04.2) анимация отображается чуток быстрее чем оригинал.
                                                        0
                                                        Яндекс браузер (13.10.1500.9151) — не работает вообще, пустое белое поле.
                                                          0
                                                          Windows 8.1 + Chrome 30.0.1599.101 m — всё отлично.
                                                            +1
                                                            Я вот не могу понять, чем этот способ лучше JS анимации или CSS3 анимации?
                                                            Тем что хранится всё в одном файле?
                                                            Так на одном файле, с помощью base64, можно реализовать и на JS, и на CSS3.

                                                            Давайте быть честными — бредовый способ.
                                                              0
                                                              Как раз таки тем, что JS не используется и можно выкладывать как обычный гиф через img
                                                              –1
                                                              Данное решение имеет существенный недостаток, который выражается в высокой загрузке процессора (около 25%). Происходит это только во время загрузки файла, около 1-2 секунд, потом все возвращается в норму.

                                                              Что я делаю не так? У меня процессор стабильно грузится на 25-30%. Продолжается это все время, пока открыта эта вкладка (когда ее закрыл, загрузка тут же упала до 1%).
                                                                +1
                                                                Как раз не так давно видел такую ссылку: stackoverflow.com/questions/13316354/svg-frame-based-animation Сам не пробовал, но утверждается, что первый пример нормально в Хроме работает.
                                                                  0
                                                                  Ну вот, как всегда уже кто-то догадался первым :)
                                                                  0
                                                                  Opera next 18.0.1284.26
                                                                  Windows 8.1.
                                                                  Анимация какая-то ускоренная. Но проц ведет себя как и память отлично. Ничего не увеличивается, не тормозит
                                                                    +1
                                                                    Windows 8, последний Хром — все нормально. Анимация работает без заминок.

                                                                      0
                                                                      В FireFox под Ubuntu интересный эффект: часть страницы с картинкой прокручена на верх, компьютер работает без признаков жизни. стоит только показать картинку на экране — тут же начинает заводиться куллер.
                                                                        +1
                                                                        еще как вариант можно использовать MJPEG, проц так не жрет помойму, восновном нагрузка на канал и сервак, но и трафа поменьше так как не кодируется в base64
                                                                          0
                                                                          А можно подробнее? Насколько я понимаю MJPEG это всего лишь метод сжатия. Т.е. отдельный проигрыватель все равно необходим?
                                                                            0
                                                                            по сути это неприрывный jpeg, то есть сервер не отдает content length и тем самым браузер не обрывает соединение. Работает нативно во всех современных браузерах, тупо передается ссылка в img

                                                                            из неприятных особенностей, браузеры не очень хотят закрывать соединение, почти не лечится… на сколько я понял официальная бага
                                                                          0
                                                                          Opera 12, нагрузка постоянно около 25% (Core i5-2410M). При этом вроде как грузит и видеоядро…
                                                                          А почему бы не использовать анимированные png?
                                                                            0
                                                                            То же самое. Opera 12, постоянная нагрузка 15% Core i7. Страница очень тяжело скролится.
                                                                            А почему бы не использовать анимированные png?

                                                                            Сжатие?
                                                                            +2
                                                                            Мне пришлось в настройках Firefox выставить permissions.default.image=2, чтобы написать этот комментарий.

                                                                            Отображение картинок, грузящих машину настолько сильно, считаю багом.
                                                                            Использование их в дизайне — хороший пример software bloat.
                                                                              +1
                                                                              Какой ужас… Эта ерунда повесила мой браузер. Автор, не надо нам таких анимаций нафиг.
                                                                                +1
                                                                                FF25 при просмотре области поста с картинкой явно тупит браузер. Не знаю чем это измерить, но например при прокрутке вниз это хорошо видно. Как только анимация пропадает из обзора — сразу всё становится ок
                                                                                  +1
                                                                                  Win7 32bit, Opera 12.16.
                                                                                  Загрузка 50% (от 2 ядер по 2ГГц), молотит не переставая. Браузер еле дышит.
                                                                                  Теоретически — интересно, а практически — уже сказал…
                                                                                    0
                                                                                    Такая же ситуация. Когда открыл этот пост первый раз, вообще завис браузер и стал набирать память, вырубился сам где-то на 1Гб. Теперь работает, но потребляет 100% CPU, то есть 1 ядро из двух.

                                                                                    Firefox 17, Linux 32bit.
                                                                                    0
                                                                                    У меня такое ощущение, что только винда+хром справляется с этим хорошо. Есть пару мыслей как с этим можно разобраться.
                                                                                      0
                                                                                      nope. Linux + Chrome 30.0.1599.114 (229842) Всё ок, хотя на стыке есть пустой кадр.
                                                                                      0
                                                                                      А чем <video> не подходит? Поддерживается теми-же браузерами, что и SVG, работает лучше в плане производительности?

                                                                                      Еще вариант – тот-же jpeg с css-анимацией (step)?
                                                                                        0
                                                                                        video в комментарий вы просто так не вставите, в отличие от img. В этом вся соль, чтоб была достойная замена gif, сослался на картинку и она всем видна сразу. А в своем блоге/постах можно все что угодно придумать хоть video, хоть js/css.

                                                                                      Only users with full accounts can post comments. Log in, please.