FLIF – идеальный формат для изображений?

    FLIF

    Как формат JPEG произвел в свое время революцию среди форматов изображений, так и новый формат FLIF обещает такого же масштаба событие для дизайнеров и веб-разработчиков.

    FLIF (Free Lossless Image Format) – новый формат файлов для изображений, обеспечивающий беспрецедентное сжатие без потерь. Файлы получаются:

    • На 14% меньше, чем WebP, без потерь
    • На 22% меньше, чем BPG, без потерь
    • На 33% меньше, чем сжатый через ZopfliPNG PNG-файл
    • На 43% меньше, чем обычные PNG-файлы
    • На 46% меньше, чем оптимизированные по Adam7 чересстрочные PNG-файлы
    • На 53% меньше, чем JPEG 2000, без потерь
    • На 74% меньше, чем JPEG XR, без потерь

    На Хабре уже опубликовано пару статей на тему FLIF. Но мы пойдем дальше: какую еще практическую пользу несет формат, кроме меньшего размера для большинства типов изображений (в частности, для типов без потерь качества)?

    Даже если взять наиболее подходящий для определенного типа изображений формат из PNG, JPEG 2000, WebP или BPG, то сжатие по FLIF оказывается в среднем на 12% лучше. А если тот же тест провести на 16-битных изображениях, которые не поддерживаются WebP или BPG, то FLIF окажется лучше на 19%.

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



    Работает для любого типа изображений


    Разные форматы сжатия лучше работают с разными форматами изображений. PNG хорошо работает с изображениями, состоящими из линий на однородном фоне. Для обычных фотографий, где можно допустить частичные потери, лучше подходит JPEG. Для медицинских изображений, где потери недопустимы, подойдет JPEG 2000.

    Недавно появившиеся форматы WebP и BPG тоже не подходят для всех случаев, поскольку у них есть свои плюсы и минусы.

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

    Например, для фотографий PNG работает недостаточно хорошо, а WebP, BPG и JPEG 2000 дают лучшее сжатие.



    На медицинских снимках PNG и WebP работают относительно плохо, а BPG и JPEG 2000 – гораздо лучше.



    На географических картах BPG и JPEG 2000 показывают очень плохие результаты, в то время как PNG и WebP дают хорошее сжатие.



    Но на всех 3-х примерах выше FLIF работает лучше остальных.

    Последовательная загрузка и без потерь


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

    Другие форматы тоже поддерживают последовательную загрузку, например PNG c чересстрочной оптимизацией Adam7, но FLIF работает лучше.

    По ссылке показано сравнение FLIF и PNG (Adam7)

    Создан адаптивным


    Разработка адаптивных сайтов, таких, которые подстраиваются под размеры экрана пользователя, является сейчас «горячей темой», и не удивительно. Сейчас к сайтам обращаются с большего числа самых разных устройств. Настольные компьютеры, ноутбуки, смартфоны, планшеты, а с недавних пор еще и «умные» телевизоры, носимые устройства типа Apple Watch и другие – разнообразие возможных разрешений экрана невероятно. HTML5 и CSS3 значительно облегчает разработку адаптивных сайтов, но одна из сохраняющихся проблем – работа с изображениями.

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

    При использовании формата FLIF на сайте нужен только один файл с изображением — на все случаи жизни. Изображение в формате FLIF может быть скачано в разных размерах из одного и того же исходного файла на сервере. Это достигается частичной загрузкой файла. Благодаря этому FLIF отлично подходит для создания адаптивных сайтов. Поскольку файл всегда один, браузер может начать скачивание его немедленно, не дожидаясь определения размера экрана. Скачивание может быть остановлено тогда, когда будет определено, что скачано достаточно большое изображение. Более того, можно продолжить скачивание с того же места, если потребуется увеличить размер, например, пользователь увеличил масштаб просмотра страницы.

    FLIF помогает более эффективно использовать ресурсы на стороне клиента, определяя требуемый размер файла в данный момент на основании чего-либо из следующего:

    • Разрешения экрана и места на экране под это изображение
    • Доступная в данный момент скорость скачивания
    • Свободное место на диске и в памяти
    • Видимо ли в данный момент это изображение на экране

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

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

    Даже если не рассматривать ширину канала как ограничитель, FLIF может упростить использование файлов во многих ситуациях. Например, большие файлы могут содержать небольшие превью-версии изображений в заголовках. В случае формата RAW на многих камерах, в файлах содержится полноразмерное «превью» с использованием формата JPEG с потерями в качестве и меньшей глубиной цвета. Кроме того, многие операционные системы создают кэшируемые миниатюры изображений. Их единственная цель – ускорить показ списка иконок, и FLIF это совершенно не нужно.

    Бесплатно и без патентов


    В отличие от таких форматов как BPG или JPEG 2000, FLIF полностью свободен от необходимости делать какие-либо отчисления и не защищается никакими патентами. FLIF использует арифметическое кодирование, но все патенты, связанные с арифметическим кодированием, утратили срок действия.

    Поддержка формата


    Пока никакие браузеры не поддерживают FLIF. Соответствующие запросы запущены в Mozilla и в Chromium.

    Из графических редакторов FLIF поддерживают ImageMagick и ExifTool.

    Для просмотра изображений можно воспользоваться XnView, плагином для Windows FLIF Windows Codec или плагином QT FLIF для QT4 и QT5.

    В заключение отметим, что формат кажется чрезвычайно интересным, как в плане банальной экономии на объеме файлов, так и более удобной реализацией адаптивного веб-дизайна. Будем надеяться, Adobe, Apple, Microsoft, Google и Mozilla поддержат этот формат как можно скорее.
    WEBO Group
    Ускорение, доступность, отказоустойчивость сайта
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 69

      +3
      Графики, графики, графики и ни одного примера реального сравнения изображений, производительности кодирования.декодирования и вот этого всего. Хотя, видео по ссылке выглядит многообещающе.
      (по ссылкам на Хабр далеко не ходил — там Ализар и его коллега)
        0
        Так с реальными примерами вау-эффекта не будет. Проблемы со скоростью кодирования, нужно подбирать изображения, чтоб был заметный эффект…
          +4
          Так это же lossless формат. Как вы себе представляете сравнение двух абсолютно одинаковых изображений?
            0
            А ну да, об этом не подумал
          +8
          Сколько уже было подобных форматов «На хх% лучше JPEG/GIF/PNG при таком же качестве», а воз и ныне там.
            +4
            Большая часть предыдущих «убийц JPEG» не обладала патентной чистотой. И естественно имела околонулевые шансы на попадание в откртые браузеры.
              +10
              Upd: посмотрел на сайте лицензию. LGPL3. Расходимся.
                +5
                Если прочесть текст рядом с лицензией, то становится очевидным, что ею покрыта только примерная реализация (reference implementation) алгоритма FLIFF. Никто не мешает написать свою реализацию, под другой лицензией.
                  0
                  Получается про лицензию на сам формат ничего не сказано? Так это еще хуже.
                    +1
                    Можно почитать тут и далее по ссылке. Но таки непонятно, да.

                    https://github.com/FLIF-hub/FLIF/issues/3
                +1
                Зато у этого кандидата в «убийцы» название звучит как дефект речи…
                  0
                  Всему opensource-сообществу давно нужна бригада логопедов.
                  0
                  WebP — открытый формат, который был ещё до BGP и FLIF, с поддержкой гиганта Google. Тем не менее, до сих пор его поддержку никто не торопится внедрять даже в браузеры.
                    0

                    Сейчас большинство «JPEG» от Гугла идёт с WebP внутри.

                      0
                      Постойте, но ведь… caniuse.com/#feat=webp
                        +1
                        иии? кроме гугловского хрома и его приспешников никто поддержку не реализовал. Реальность такова, что каждый игрок поддерживает разные форматы:
                        chrome — WEBP
                        IE — JPEG XR
                        Safari — JPEG 2000
                    +5
                    0

                    Lossless формат — идеальный формат для изображений? Что только не напишешь в погоне за просмотрами и комментариям.

                      –2
                      Для обычных фотографий, где можно допустить частичные потери, лучше подходит JPEG.

                      Преимущество FLIF заключается в том, что он хорошо работает для разных типов изображений.

                      @sunnybear, вы же разработчик WEBO, вы писали книгу по оптимизации сайтов в том числе изображений. Я не понимаю, как вы можете писать такую ахинею.

                        +3
                        Можно развернуто мысль написать? За тремя цитатами и двумя шаблонными фразами я мысли не увидел :)
                          +1

                          Jpeg — формат сжатия с потерями. Меняя уровень потерь, который мы читаем приемлемым, мы можем получить результат хоть в 10 раз меньше, хоть в 100. FLIF — формат сжатия без потерь. Там даже в названии это написано. «Без потерь» значит не то, что «он такой клевый, что когда сжимает, не появляется потерь», а что он намеренно так сжимает, чтобы потерь не было. Это принципиально другой способ сжатия, нежели в джипеге. При всем желании мы не добьемся от Флифа приемлемого размера для многих типов изображений, где много деталей, но их сохранение один-в-один не требуется. А вы предлагаете заменить Jpeg Флифом.

                            0
                            Прочитал статью еще два раза. Не увидел, кто я «предлагаю заменить Jpeg Флифом». Вы ничего не перепутали?

                            Безусловно, JPEG может быть меньше FLIF. Но речь в сравнении не об этом. WebP при сравнимой качестве сжатия с потерями дает меньший размер. FLIF в некоторых случаях может дать размер еще меньше без потери качества — когда мы можем предсказать изображение с большой точностью. И задача веб-разработки — двигаться в сторону меньших по размеру представлений информации. Иначе с Марсом будет тяжело связываться :)
                              +1
                              Прочитал статью еще два раза. Не увидел, кто я «предлагаю заменить Jpeg Флифом». Вы ничего не перепутали?

                              Я ничего не перепутал. Я же процитировал место, где вы перечисляете для чего применяются разные форматы, а потом ваши слова: «Флиф хорошо работает для разных типов изображений». И если бы только я что-то перепутал, еще несколько человек не оставило бы комментарии в ключе «убийца JPEG».

                                –4
                                Иногда слова — это просто слова, а не то, что хочется за ними видеть. Удачи!
                                  +3

                                  Комон, вы пишете техническую статью на техническом ресурсе и признаете, что ваши слова ничего не значат. Т.е. вы намеренно вводите людей в заблуждение?

                                    –6
                                    Направьте свою энергию в другое русло, не нужно меня троллить. Я написал ровно то, что написал. Прочитайте, осознайте, подумайте.
                                      +4
                                      Но мы пойдем дальше: какую еще практическую пользу несет формат, кроме меньшего размера для любого типа изображений?

                                      Всё же стоит уточнить, что не для любого, а для тех, где требуется lossless. Ну или пояснить детальнее, чему именно любого, и тогда да, придётся таки полноценно сравнить с jpeg. А ещё я думаю стоит избегать глаголов в повелительном наклонении (это я уже про комментарии).

                                        0
                                        Спасибо, теперь понятно, какая фраз читается двусмысленно. Изменил.
                                          +4

                                          Скажите, а больше вы подобных фраз в тексте не видите?


                                          FLIF – идеальный формат для изображений?
                                          Работает для любого типа изображений
                                          Преимущество FLIF заключается в том, что он хорошо работает для разных типов изображений.

                                            –3
                                            Вижу. Вас задели эти фразы? Прошу прощения.
                                            «FLIF – идеальный формат для изображений?» Это вопрос. Возможный ответ — «Идеальный формат для некоторых типов изображений». Но грамотный читатель сам должен на него ответить.

                                            «Работает для любого типа изображений.» В некоторых случаях достигается существенный выигрыш в размере. Не во всех, не всегда. Но все типы изображений можно преобразовать, чтобы понять, стоит ли использовать FLIF для них. «Полевое» использование формата даст более развернутый ответ, в каких случаях он не работает.

                                            «Преимущество FLIF заключается в том, что он хорошо работает для разных типов изображений.» Именно так. Не всегда идеально, но работает. Хорошо работает для разных типов — и PNG, и GIF, и 16 цветов, и WebP, и JPEG. Для разных. Иногда хорошо. Работает.
                                              +7
                                              Не во всех, не всегда. Но все типы изображений можно преобразовать, чтобы понять, стоит ли использовать FLIF для них.

                                              Зачем преобразовывать в Флиф фотографии, чтобы понять, стоит ли его использовать? Для фотографий он очевидно не подходит. И это не какой-то сложный синтетический случай, это на вскидку 80% существующих на земле изображений, хранящихся в файлах.

                                                –1
                                                Я не понимаю, почему фотографии обязательно сохранять с потерями?
                                                Зачем и кому это нужно? Место сейчас стоит копейки, а восстановить данные из пожатого jpeg невозможно! Почему формат сжатия без потерь не подходит для фотографий?
                                                  +4
                                                  Место сейчас стоит копейки

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

                                                  • UFO just landed and posted this here
                                                • UFO just landed and posted this here
                                  +5
                                  FLIF поддерживает сжатие с потерями. Когда это нужно.
                                  http://flif.info/lossy.html
                                    +5

                                    Вот тут надо ещё разбираться, потому что FLIF умеет и с потерями качества сжимать. При этом по заявлениям авторов при том же размере получается лучше джипега: http://flif.info/lossy.html

                                      +1

                                      Спасибо за ссылку, очень интересно. Авторы не совсем утверждают, что «лучше джипега», они говорят:


                                      In our opinion, at low qualities and for photographs, dedicated lossy formats like WebP, JPEG or BPG still produce better results. However, at very high-quality, we think lossy FLIF is a better option.
                                    0
                                    Скорее всего речь о том, что фотографии являются частью разных типов изображений.
                                +1
                                Вот почему, когда выходит очередная статья про убийцу jpg, на первое место всегда ставят степень сжатия. Это, конечно, важно, но в наше время размер файла всё больше уходит на второй план.
                                Гораздо важнее, на мой взгляд, какой функционал может предложить формат. Например, WebP предлагает просто огромное множество функционала: от сжатия с альфа-прозрачностью, до анимаций.
                                  +4
                                  WebP предлагает просто огромное множество функционала

                                  Мне так не показалось. Кол-во бит на канал фиксировано, конвертация в YCbCr обязательна, даже 2x2 chroma subsampling обязателен. Не очень-то много простора, чтобы разгуляться.

                                  • UFO just landed and posted this here
                                    0
                                    На офсайте сабжа есть и сравнение качества и про фичи типа анимации.
                                    А вот сравнения производительности я сходу не обнаружил. Да и целых две статьи (за октябрь 2015-го и сентябрь 2016-го) в разделе «публикации» наводят на мысль о нишевом характере.
                                    • UFO just landed and posted this here
                                        +2

                                        Знаешь, тут я скорее на стороне нового стандарта. Так как:


                                        1. Сейчас важнее энергозатраты на передачу изображения по сети до пользователя, куда входит:
                                          1.1 Передача сжатого изображения (т.е. нагрузка на 2/3/4/5G, расходы на расшифровывание https трафика и т.д.)
                                          1.2 Декодирование
                                        2. Вычислительные мощности последнее время серьезно выросли, а вот объем памяти на устройствах — не так. Точнее, в компьютерах он может быть вырос, однако к нам еще добавилось громадное число носимых устройств.

                                        То есть получается, что если стандарт позволяет потратиться на кодировании, но зато экономить на хранении и передачи, то это уже плюс для IT в целом.

                                          +2

                                          Ещё плюс, что в нём прогрессивная загрузка из коробки поддерживается, даже с анимацией. Скорость интернета на мобильных устройствах не всегда хорошая, плюс браузеры могут выкачивать flif-картинки частично без посредников.

                                        +2
                                        Скорость сжатия практически не важна, т.к. в основном изображения декодируют, т.е. расжимают. Вот график производительности декодирования меня больше всего интересует.
                                        Ну и также наличие альфа канала и разные режимы цвета (sRGB, Y422, ещё какие-нибудь).
                                          0

                                          Y422 — это chroma subsampling? К данном формату не имеет никакого отношения, потому что во-первых он RGB, во-вторых, loseless.

                                            0
                                            В более широком смысле — возможность иметь разное количество бит на канал.
                                            +1
                                            Скорость сжатия практически не важна, т.к. в основном изображения декодируют, т.е. расжимают.

                                            В фотоаппаратах и прочих устройствах получения снимков как раз таки важна (если этот формат позиционируется как совсем универсальный).

                                              +3
                                              В таких фотоаппаратах качество снимков c матрицы такое, что loseless и не заметишь. А для нормальных есть RAW и больше ничего не нужно.
                                            +8

                                            Чем ваша статья отличается от статьи годовой давности? Графики те же. КДПВ та же… А технических подробностей даже меньше, чем у Ализара.

                                              –5
                                              Адаптивность, плагины
                                              0
                                              Анимацию опять забыли. Не взлетит.
                                                +6
                                                Не забыли, на ней даже частичная загрузка работает: http://flif.info/animation.html
                                                  +1
                                                  Ну это, кстати, не всегда плюс. В случае достаточно длинной анимации с деталями (например, презентации или смешной гифки) может быть лучше загрузить полностью N кадров прежде чем начать воспроизведение. По той же стратегии, как загружают видео. И в таком случае FLIF вообще не подойдёт, ведь каждый кадр размазан по всему файлу. Или есть опция последовательно расположить кадры?
                                                  0
                                                  а так ли нужна анимация?
                                                    +2
                                                    Когда-то давно был такой формат gif — формат запатентованный, небесплатный, устаревший, с не самым лучшим качеством сжатия, с ограниченным количеством поддерживаемых цветов. Собрались умные люди и сделали ему замену — png, по всем параметрам лучше. Но поддержку анимации решили не делать — не так уж она и нужна, решили умные люди. Вот мы до сих пор и пользуемся для анимаций форматом gif — ещё более устаревшим, с плохим качеством сжатия, с ограниченным количеством поддерживаемых цветов. Но лучшего пока ничего нет. Пытались приделать к png костыль для анимаций — apng, но не прижилось.
                                                      +1
                                                      Я может быть вас удивлю, но видеокодеки замечательно справляются с анимацией. Настолько замечательно, что на ряде сайтов загруженые GIFки отдаются посетителям в виде mp4 — и объём раз в шесть меньше, и управляемость отличная.
                                                      Разве что совсем мелочь типа анимированных смайликов и курсоров через видео реализовать не получится.
                                                        0
                                                        Да-да, костыль на костыле, к тому же ещё и проприетарный.
                                                  +1
                                                  Все упирается в поддержку броузеров.

                                                  В свое время микрософт забила поддерживать PNG и SVG в, тогда еще очень популярном, IE — отбросила их распространение на несколько лет.
                                                    0
                                                    Не только браузеров, графических редакторов тоже. Ибо пользоваться отдельным конвертером — это не только потеря лишнего времени(не спорю, все можно автоматизировать).
                                                    +1
                                                    Пробовал его.
                                                    1) Сравнительно медленный.
                                                    2) На iOS как-то странно собрался — то изображение не сможет декодировать, то сегфолтится.
                                                      –1

                                                      Year 2017: MIP detalization reinvented.
                                                      Вопрос: почему так долго и не поздно ли уже при текущих каналах связи интернет?

                                                        +11

                                                        В былые времена на хабре в такой статье бы написали про алгоритмы внутри этого флифа.

                                                          +3
                                                          Не было такого. Иногда бывает, что кто-то пишет, но в целом уровень не меняется. Кроме синдрома «трава зеленее».
                                                          0
                                                          А есть standalone версия конвертора? Просто для ощущения масштаба и сложности. (Плюс, хочется потыкать fuzzer'ом).
                                                            +4
                                                            Я гонял FLIF на 16 битных зашумлённых рентгеновских картинках, и должен заметить, что ни о каких «На 53% меньше, чем JPEG 2000, без потерь» речи не идёт. Теорему Клода Шеннона в общем-то никто не отменял и чудес не бывает. Он жмёт, пожалуй, немного лучше чем JPEG2000 и по степени сжатия сравним с JPEG-LS (на тех картинках, что у меня). Алгоритму CALIC он скорее всего проиграет.
                                                            Но он очень медленный. Понятно, что можно много чего оптимизировать, но он даже медленнее JPEG2000, причём едва ли не в разы. Если при тесте сжатия набора картинок JPEG-LS я успевал покурить, то в случае FLIF можно успеть пообедать.
                                                            Ещё такой момент — это, похоже, near lossless алгоритм. То есть можно включить режим сжатия с потерями, но если захочется, скажем пятидесятикратного сжатия (как умеет JPEG2000), то FLIF так не сможет (по крайней мере я вроде закрутил все параметры до отказа, но сжатие с потерями там было сравнимо с JPEG-LS).
                                                            Приятный момент — он поддерживает маску регионов интереса, ну то есть можно сделать области с переменным сжатием — важные части жать без потерь, а неважные — с потерями (JPEG2000 тоже так умеет).
                                                            Есть специфические картинки, на которых он даёт может дать выигрыш (скажем, довольно большие области залиты константой), но в общем случае сравним с известными методами.
                                                              +1
                                                              Комментарий, который лучше статьи

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