Выделяют разнообразные форматы изображений, с которыми приходится столкнуться разработчикам. С одними приходится работать регулярно, с другими – в исключительных ситуациях.
Здесь будут рассмотрены наиболее распространенные: JPEG, PNG и WebP. Каждый вид обладает определенными плюсами и минусами. При выборе того или иного варианта необходимо учитывать специфику сайта.
JPEG
Разработка JPEG была осуществлена в 1992-ом году. Основная цель создания – сжатие фото, для которых характерно большое количество оттенков и наличие плавности переходов между ними. Такой вариант часто применяется в вебе. Многочисленные яркие фото в сети выполнены именно с его использованием.
Сжатие изображения приводит к тому, что часть данных удаляется, снижаются качественные параметры, но глаз этого не ощущает.
К минусам JPEG-файла стоит отнести некую размытость картинки. Кроме того, они недостаточно прозрачны, поэтому такой тип картинки применять для формирования логотипа нельзя. Файлы .jpg применяют при создании иллюстраций товара, создают с их помощью изображения декоративного назначения.
PNG
С помощью формата PNG создаются графические картинки и логотипы. Даже многочисленное редактирование и корректировка размеров не приводит к изменению первоначальных качественных параметров картинки. В результате получаются абсолютно четкие изображения.
К существенной особенности формата стоит отнести то, что он поддерживает альфа-канал: прозрачность. Можно получить картинки с разной степенью прозрачности: как непрозрачные, так и полностью прозрачные. Его часто используют для создания прозрачного фона на логотипах и графических картинках.
PNG обладает многослойностью. Множество слоев способствует созданию интересных эффектов, на которых присутствуют тени и градиенты.
Для формата характерна поддержка разных цветовых пространств, в том числе RGB и индексированного цвета, которые обеспечивают хранение палитры оттенков. Благодаря этому формату появляется возможность хранить изображения, на которых присутствует ограниченное количество цветов. Например, это могут быть разные иконки.
К минусу данного формата относится следующее: файл обладает большим размером, а это способно приводить к замедлению процесса загрузки сайта.
WebP
Google создала WebP в 2010-ом году. Основная цель разработки – улучшить скорость загрузки и экономить место на сервере.
WebP обладает рядом преимуществ. Он способствует уменьшению размера картинки на 25-35 %. При этом качество остается отличным. Благодаря WebP поддерживается прозрачность, анимационные свойства. Такой формат подходит для тех сайтов, для которых имеет значение ускоренная загрузка. В данном случае речь идет об онлайн-магазине или о страницах сайтов с большим количество фото.
Не так давно компанией была выпущена обновленная версия — WebP Lossless. Она основана на алгоритме, позволяющем сжимать изображение, не утрачивая качественные характеристики.
Если вы осуществляете верстку с использованием легких картинок, то для того, чтобы их преобразовать в WebP, нужно воспользоваться онлайн-конвертерами.
Примеры
Convertio преобразует JPEG, PNG в WebP.
Online-Convert используется для конвертации фото, видеороликов, аудиозаписей.
Squoosh дает возможность оптимизировать изображения и создавать их в WebP.
Как определиться с форматом
Формат выбирается в зависимости от поставленных задач. Если есть необходимость в ускоренной загрузке и предстоит работа с фото, то стоит отдать предпочтение формату WebP.
Для сохранения качества графики и логотипов стоит выбрать PNG. Для картинок с большим числом цветовых решений и наличием плавных переходов стоит остановиться на JPEG.
Процедура выбора
- выявить цель сайта;
- Если присутствуют логотипы и графика, используется PNG или WebP;
- Яркие изображения декоративного характера создаются с помощью JPEG;
- Для ускоренной загрузки и работы с многоцветными картинками применяется WebP.
