FLIF – новый формат файлов со сжатием изображения без потерь

Содержание статьи

Знакомьтесь FLIF – очередной формат изображения.

Сейчас существует очень много различных форматов изображений. Лишь несколько из них находятся в постоянном использовании. Остальные имеют узкую сферу применения. Технологии не стоят на месте. Продолжают разрабатываться новые форматы, которые во многом превосходят старожилов. Самый популярный формат Jpeg уже давно не является самым удобным для хранения файлов. Есть форматы с большей компрессией и меньшини потерями качества. Взять хотя бы Jpeg 2000, но по какой-то причине он не получил широкого распространения. В 2010 году компания Google выпустила новый формат WebP, который обещал ускорить интернет благодаря уменьшению размеров файлов без существенных потерь качества. Формат исправно делает своё дело, но он так и не получил широкого распространения. В 2014 году известный программист Фабрис Беллар представил формат BPG. Он упаковывал файлы такого же качества как и JPEG, но имел размер в 2 раза меньше. Открытие, которое снизит нагрузку на сервера и освободит жёсткие диски пользователей, но, опять же, формат не слишком широко распространён.

Теперь есть новый претендент на звание лидера по отношению качества изображения и его размера. Он называется FLIF.

В теории новый формат выглядит впечатляюще. Файлы, упакованные в этот формат, имеют размер в среднем на 35% меньше, чем в формате PNG, на 37% меньше, чем JPEG 2000, на 15% меньше, чем WebP и на 22% меньше, чем BPG.

Формат может работать со снимками в оттенках серого, RGB, RGBA, отображает 16-битную глубину цвета, имеет чересстрочное и нечересстрочное прорисовывание и поддерживает анимацию.

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

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

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

Еще один интересный атрибут FLIF – это его прогрессивность. Для отображения снимка нужно скачать лишь часть файла. Тогда фотография отобразится в виде миниатюры или снимка предварительного просмотра. После клика по изображению загрузка продолжится и тогда прорисуется целый файл с полной детализацией. Также FLIF быстрее загружается и его этапы прорисовки более качественные, чем у PNG.

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

Наконец, FLIF совершенно бесплатный. Он разрабатывается под лицензией GNU General Public License. Он может быть доступен любому пользователю и не обременён патентами на программное обеспечение. С точки зрения недостатков стоит отметить одну вещь, которая пока непонятна. Какова скорость конвертации и обработки данного формата. На сайте формата заявляется, что скорость кодирования и декодирования не слишком высоки, чтобы быть невероятными. По этому вопросу нет никакого сравнения с существующими форматами, и мы не можем понять, он так же кодируется как знакомые нам форматы или медленнее.

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

Какая разница между сжатием изображений с потерями и без потерь

Table of Contents

Просто и понятно

Если вы читаете этот материал, то, скорее всего, уже кое-что знаете о сжатии изображений. Но понимаете, что этого недостаточно для ответа вопрос, который возникает у каждого новичка: в чем разница в таких понятиях, как сжатие изображения без потерь и соответственно сжатие изображений с потерями?

Речь идет о сжатии изображения без потерь в качестве. Значит вебмастеру не удастся максимально уменьшить размер файла. Но даже так положительный эффект от оптимизации будет налицо.

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

Достаточно хорошее объяснение? На первый взгляд — да, но реальные различия между сжатием изображений с потерями и без потерь не лежат на поверхности, ведь в вопросе сжатия много деталей.

Сжатие изображения без потерь

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

Читайте также:  Leica M10-P – самый тихий затвор и впервые сенсорный экран

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

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

С другой стороны, это преимущество не имеет значения, если вы работаете с таким инструментом, как плагин Robin Image Optimizer, ведь в нем есть функция автоматического резервного копирования, встроенная в наш плагин, так что вы всегда можете восстановить оригинал, независимо от того, какой тип сжатия вы используете.

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

Преимущества сжатия без потерь:

  • Сохранить полное качество изображений;
  • Можно восстановить сжатые данные.

Недостатки сжатия без потерь:

  • Минимальное уменьшение размера файла. Поскольку объем сокращения данных относительно небольшой — эффект от сжатия изображений: повышение скорости сайта и SEO, тоже небольшой.

Сжатие без потерь, как правило осуществляется благодаря удалению информации EXIF — это метаданные об изображении: модель фотоаппарата, дата создания фото, геоданные места, где сделано фото и т.д. О влиянии EXIF на безопасность и производительность сайта мы говорили подробней. Если вы решите убрать EXIF с помощью плагина, то сначала скачайте и установите Robin Image Optimizer.

После активации плагина зайдите в его настройки. В админке WordPress нажмите «Настройки» => «Robin Image Optimizer»

В разделе «Основные настройки» нажмите на кнопку ВЫКЛ рядом с опцией «Оставить данные EXIF». Все метаданные изображений на сайте исчезнут. Поэтому свободного места на сайте может стать больше на 20%.

Сжатие изображения с потерями

Другой, более популярный способ оптимизации изображений — это сжатие с потерями. При сжатии изображений с потерями мы видим резкое уменьшение размера файла — до 90% с помощью Robin Image Optimizer и только минимальные изменения качества изображения, иногда даже незаметные. Этот факт делает сжатие изображений с потерями наиболее распространенным вариантом. К тому же бесплатно.

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

Преимущества:

  • Значительное уменьшение размера файла, что приводит к ускорению загрузки и улучшению SEO;
  • Качество изображения чаще всего сохраняется в прежнем виде, поэтому ваши изображения по-прежнему хорошо выглядят;

Недостатки:

  • Чем больше файл оптимизирован, тем выше риск заметных различий.

Так вот, тут-то у вас может созреть вопрос: как сжать изображения в WordPress в разных режимах и какие режимы существуют? Поэтому пришло время рассказать вам об основных функциях плагина Robin Image Optimizer. Его функционал позволяет сжать картинки в нормальном, среднем и высоком режиме, в том числе автоматически уменьшать вновь загружаемые картинки.

Подробнее об этом мы говорили в предыдущем материале.

Заключение

Как вы могли обратить внимание, разница между сжатием с потерями или без потерь велика в смысле конечного размера файла. но не всегда оптимизация ухудшает качество картинки. А как мы знаем, чем больше сжатие картинок, тем лучше у сайта производительность. И наоборот. Эти задачи можно легко выполнить с помощью плагина Robin Image Optimizer. Но и у этого решения, как у любого другого, есть свои недостатки. Если на сайте у вас активирована опция резервного копирования, то исходные файлы заполняют собой дополнительное место на хостинге, которое соответственно ограничено. Об это стоит помнить и заранее принять меры по хранению исходников, если вы готовы начать использовать плагин.

Сравнение новых и проверенных форматов изображений

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

Зачем нужны новые форматы изображений?

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

Эффект от новых форматов изображений будет постепенным, поскольку браузеры не сразу принимают свежие стандарты.

Новые форматы

Вот несколько кандидатов, которыми можно заменять существующие форматы.

WebP был разработан Google как альтернатива JPG. Файл в этом формате может быть на 80 % меньше, чем JPEG.

Opera и Google Chrome в настоящее время уже поддерживают его. Firefox объявил о планах по реализации поддержки этого графического формата.

Google и Facebook в настоящее время экспериментируют с этим графическим форматом. WebP уже используют около 95 % изображений на главной странице eBay. YouTube применяет формат для отображения больших миниатюр.

Для CMS существуют расширения, которые помогут добавить поддержку WebP на сайт. Например, Optimus и Cache Enabler для WordPress. Это не нарушит отображение сайта в браузерах, которые не поддерживают WebP, если предоставить резервные варианты в формате PNG или JPG.

Читайте также:  Стартуют мировые продажи Honor View 10, Honor 7X представлен в красном цвете

Эти данные по поддержке браузерами взяты с Caniuse .

ChromeOperaFirefoxIEEdgeSafari
321965Нет18Нет
iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Нет11.1Все4.2-4.373Нет

High efficiency image files имеет расширение HEIC (.heic). Ранее корпорация Apple объявила о том, что ее линейка продуктов будет поддерживать формат HEIF по умолчанию.

Помимо файлов меньшего размера HEIF обеспечивает большую гибкость, чем другие форматы. Он поддерживает неподвижные изображения и последовательности картинок. Следовательно, в одном файле можно хранить серийные снимки, кадры из видео и другие коллекции изображений. HEIF также поддерживает прозрачность, 3D и 4K.

Также файлы HEIF могут содержать свойства изображения, миниатюры, метаданные и вспомогательные данные. Измененные изображения могут быть восстановлены благодаря неразрушающим операциям редактирования. Это означает, что обрезка, повороты и другие изменения могут быть отменены в любое время.

На момент написания этой статьи формат HEIF не поддерживался браузерами.

ChromeOperaFirefoxIEEdgeSafari
НетНетНетНетНетНет
iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
НетНетНетНетНетНет

Free Lossless Image Format (или FLIF) использует алгоритм, который на 14-74 % эффективнее по сравнению с устаревшими форматами. Поэтому FLIF отлично подходит для любого типа изображений или анимации. Файлы, сохраненные в этом формате, в среднем на 43% меньше, чем в PNG.

При тестировании FLIF часто оказывался наиболее эффективным форматом.

FLIF использует один из алгоритмов на основе арифметического кодирования. Он также поддерживает прогрессивное чередование. Поэтому изображения отображаются целиком, как только они начинают загружаться.

Современные браузеры не поддерживают FLIF. Но веб-разработчики могут получить доступ к исходному коду FLIF и использовать решение полифилла .

Традиционные форматы

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

Является наиболее часто используемым форматом изображений в интернете. JPG назван в честь Joint Photographic Experts Group . Организации, которая разработала данную технологию. Вот почему JPG еще называют JPEG.

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

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

GIF (graphics interchange format) использует алгоритм сжатия LZW, который не ухудшает качество изображения. В формате GIF отсутствует поддержка цветов (которая есть в JPG и PNG). Тем не менее, формат популярностью благодаря возможности визуализировать анимацию путем объединения нескольких изображений в один файл. Изображения, хранящиеся в файле GIF, могут последовательно отображаться для создания короткого эффекта, похожего на фильм. GIF-файлы могут быть сконфигурированы для отображения последовательности изображений заданное количество раз.

Формат PNG был первоначально задуман как преемник GIF. Он был разработан специально для представления изображений в интернете. По популярности, PNG занимает второе место после JPG.

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

Сравнение поддержки прозрачности JPG (слева) и PNG (справа).

Способы улучшения оптимизации и доставки изображений

Оптимизация изображения считается незаменимой для повышения производительности сайта. В Google Dev Gu >исчерпывающая статья на эту тему, поэтому далее будет приведен лишь краткий список советов по ускорению загрузки изображений.

Реализация поддержки новых форматов изображений

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

Использование CDN

Сеть доставки контента (CDN) ускоряет загрузку изображений, кэшируя их в своей сети распределенных серверов. Это может повысить скорость работы сайта. Особенно если ваши пользователи находятся далеко от исходного сервера.

Использование CSS вместо изображений

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

Проверьте настройки кэша изображений

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

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

Изменение размера изображений для разных устройств

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

Тесты сжатия изображения

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

Результаты сжатия изображений с помощью первых трех форматов, рассмотренных в статье.

  • Изображение 1
  • Изображение 2
  • Изображение 3

Приведенные ниже результаты значительно различаются из-за форматов изображений без потерь / с потерями.

Размер изображения 1Размер изображения 2Размер изображения 3
WebP1,8 МБ293 КБ1,6 МБ
HEIF1,2 МБ342 КБ1,1 МБ
FLIF7,4 МБ2,5 МБ6,6 МБ
JPG3,9 МБ1,3 МБ3,5 МБ
GIF6,3 МБ3,9 МБ6,7 МБ
PNG13,2 МБ5 МБ12,5 МБ

Изображения в формате HEIF оказались меньше, чем в любом другом формате. Но из-за отсутствия поддержки в настоящее время невозможно интегрировать формат HEIF в веб-приложения.

Формат WebP показал близкие результаты и при этом обеспечивает поддержку браузерами. Для пользователей Chrome или Opera изображения в формате WebP, несомненно, помогут ускорить загрузку.

PNG значительно больше, чем его аналог JPG с потерями. При оптимизации с использованием FLIF экономия составила около 50%. Это делает FLIF отличной альтернативой для тех, кому нужны высококачественные изображения с меньшим размером файла. Но формат еще не поддерживается браузерами.

Заключение

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

Данная публикация представляет собой перевод статьи « Comparing Novel vs Tried and True Image Formats » , подготовленной дружной командой проекта Интернет-технологии.ру

FLIF — новый формат сжатия изображений

Согласно результатам исследований файлы FLIF в среднем занимают места меньше

  • Чем WebP: на 14%
  • Чем BPG: на 22%
  • Чем PNG с брутфорсом через ZopfliPNG: на 33%
  • Чем обычный PNG: на 43%
  • Чем PNG, оптимизированный через Adam7: 46%
  • Чем JPEG2000 без потерь: на 53%
  • Чем JPEG XR без потерь: на 74%

Даже если из конкурентов FLIF выбирать наиболее подходящий для конкретной фотографии, он всё равно медианно эффективнее на 12 % (в среднем — на 19%, учитывая 16 битные изображения, которые не поддерживают WebP и BPG).

Преимущества FLIF

Лучшее сжатие

На графике ниже предоставлены результаты тестирования, аналогичного тестированию WebP. Вы можете видеть, что FLIF однозначно побеждает все другие инструменты, даже учитывая, что это ранняя версия – сейчас FLIF ещё эффективнее.

По горизонтали: изображения отсортированные по уровню сжатия
По вертикали: индекс размера; меньше — лучше

Работает с любыми типами изображений

С FLIF вам не нужно будет больше думать о том, какой формат для изображения подойдёт лучше, потому что лучше гарантированно подойдёт FLIF

Графики говорят сами за себя:

На фотографиях отлично себя показывают JPEG, BPG и WebP, а вот PNG выглядит бледно

На медицинских снимках себя хорошо проявляют только BPG и JPG

С изображениями географических карт лучше других себя показывают WebP, и PNG

Но в любом из трёх типов изображений FLIF на голову опережает конкурентов.

Прогрессивная загрузка

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

FLIF — свободный формат

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

Подробнее можете прочитать на официальном сайте FLIF.

FLIF – новый формат файлов со сжатием изображения без потерь

Время от времени разработчики являют миру новый формат файлов для сохранения цифровых изображений. В 2010 году Google представил формат WebP, который, как обещалось, должен был ускорить работу интернета – за счет уменьшения размеров файлов при сохранении качества картинки. В прошлом году известный программист Фабрис Беллар (Fabrice Bellard) разработал формат BPG, обеспечивающий такое же качество изображения, как JPEG, при вдвое меньшем размере файла.

Теперь же появился еще один кандидат, еще выше поднимающий планку по степени сжатия. Он называется FLIF, и эта аббревиатура означает Free Lossless Image Format (буквально – «Бесплатный Формат Изображений со сжатием Без потерь»).

На бумаге все выглядит весьма впечатляюще. При сравнении степени компрессии с другими популярными форматами файлы FLIF оказались в среднем на 37% меньше, чем JPEG 2000, на 15% меньше, чем WebP и на 22% меньше, чем BPG (во всех случаях сравнивалось сжатие без потерь).

Среди особенностей формата FLIF – цветовые профили RGB, RGBA и Grayscale, 16-битная глубина цвета, чересстрочность (interlaced) и нет, а также поддержка анимации.

Одно из важных преимуществ FLIF заключается в том, что он работает одинаково хорошо на изображениях различного типа, в отличие от других форматов сжатия без потерь. «Вероятно, вы знаете, что PNG подходит для графики, но не для фотографий», поясняют разработчики. «Для обычных фотографий, где допустима некоторая потеря качества, можно использовать JPEG, но для изображений в медицине потребуется JPEG 2000, формат без потерь. И так далее. Это не очень удобно для пользователей. Имея формат FLIF, вам не придется задумываться, какой тип сжатия применять для изображения того или иного типа. FLIF побеждает их всех, во всех категориях».

Другая важная особенность FLIF – что он поддерживает прогрессивную загрузку. То есть, вам достаточно загрузить начало файла, чтобы увидеть полную картинку (в пониженном качестве). Дозагрузка остающейся части файла все больше и больше повышает качество изображения. Следующее видео наглядно показывает, как выглядит FLIF при медленной загрузке (в сравнении с Adam7 PNG)

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

Наконец, формат FLIF абсолютно бесплатный. Он выпущен по лицензии, разрешающей безвозмездное использование и не защищен никакими патентами.

Если говорить о потенциальных недостатках формата FLIF – пока не вполне понятно, насколько быстрой получится работа с ним, в сравнении с конкурентами. «Скорости кодирования и декодирования не супервысоки», признаются разработчики, «но вполне приемлемы».

Йон Снейерс (Jon Sneyers), один из разработчиков формата FLIF, говорит, что работа продолжается и что текущая версия FLIF – не окончательная. Пока не хватает поддержки метаданных, дополнительных цветовых профилей, различных браузеров, а также вариантов сжатия с потерями.

Больше информации о формате FLIF можно найти на официальном сайте.

Оцените статью
Добавить комментарий