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

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

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

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

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

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

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

WebP

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

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

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

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

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

Десктопные

Мобильные / Планшеты

HEIF

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

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

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

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

Настольные

Mobile / Tablet

FLIF

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

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

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

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

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

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

JPG

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

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

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

GIF

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

PNG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Пожалуйста, оставьте ваши мнения по текущей теме статьи. За комментарии, подписки, лайки, дизлайки, отклики огромное вам спасибо!