Почему изображения — это важно?
Изображения являются практически самым основным типом информации в интернете, после текста, естественно. Они могут выступать, как самодостаточные информационные блоки либо дополняющие контент вставки, как фрагменты оформления сайта либо составляющие элементов интерфейса… Словом, они повсюду. Но даже такие простые вещи, как изображения, требуют особого внимания.
В этой статье речь пойдёт не о важности визуальной составляющей изображений, а о важности правильного подбора их формата, размера и качества. Вкратце мы расскажем, как сочетать отличное качество изображения с минимальным его весом, и для чего это нужно.
1. Подбираем формат
Существует различное множество форматов изображений: jpg, jpeg, png, gif, raw, svg, bmp, ico, tiff, webp и др. Каждый из них, по сути, отличается друг от друга лишь алгоритмом сжатия данных и возможностью поддержания прозрачности. И, между прочим, далеко не каждый из этих форматов поддерживается всеми браузерами.
Для простоты можно выделить 3 самые распространённые группы изображений:
- Изображения без прозрачности
- Изображения с прозрачностью
- Иконки
Изображения без прозрачности
В эту группу входят обычные растровые изображения (фотографии, слайды, галереи, фоновые картинки
Наиболее распространённые форматы
- JPG (JPEG) .— наиболее оптимальный
Поддерживает 16 млн. цветов. Имеет небольшой размер файла. - PNG .— много весит
Поддерживает 16 млн. цветов. Имеет большой размер файла. Поддерживает прозрачность. - GIF .— низкое качество
Поддерживает всего 256 цветов. Имеет небольшой размер файла. Поддерживает прозрачность. - WebP . — набирающий популярность формат
Поддерживает 16 млн. цветов. Имеет минимальный размер файла. На данный момент имеет неполную поддержку браузерами.
Изображения с прозрачностью
В эту группу входят растровые изображения, элементы которых могут быть полностью либо частично прозрачными.
Наиболее распространённые форматы
- PNG . — наиболее оптимальный
Поддерживает 16 млн. цветов. Имеет большой размер файла. - GIF . — низкое качество
Поддерживает всего 256 цветов. Имеет небольшой размер файла. - WebP . — набирающий популярность формат
Поддерживает 16 млн. цветов. Имеет минимальный размер файла. На данный момент имеет неполную поддержку браузерами.
Иконки
В эту группу входят растровые и векторные изображения (логотипы, айдентика, операторы, мессенджеры, элементы интерфейса
Наиболее распространённые форматы
- SVG . — наиболее оптимальный
Векторная графика (при увеличении размера изображение не теряет качество). Имеет минимальный размер файла. - PNG . — много весит
Растровая графика (при увеличении размера изображение теряет качество). Имеет небольшой размер файла. - ICO . — устаревший формат
Используется сейчас исключительно для favicon. Имеет большой размер файла.
2. Выбираем размер
Существует расхожее мнение, что чем большего размера картинку загрузить, тем выше будет её качество. Это не так!!! Она просто будет намного больше весить.
Использование растровых изображений, чья ширина превышает 2000 px, очень плохо сказывается на показателях сайта. Более 70% интернет-трафика приходится на мобильные устройства, а им такие размеры просто ни к чему. Это приводит к «пожиранию» мобильного трафика клиентов и снижению баллов в Google PageSpeed Insight.
Что насчёт компьютеров? Большее количество сайтов ограничивает свой контент по ширине т.н. контейнером, чья ширина, как правило, не превышает 1500 px на самых широкоформатных мониторах.
В админ-панели своих проектов для удобства клиентов мы чётко прописываем требования для добавляемых изображений.
3. Оптимизируем качество
Размер изображения (ширина и высота) — не единственные показатели, влияющие на вес файла. Немаловажным фактором является его качество (количество пикселей на дюйм). Зачастую в изображениях используется излишне высокая плотность пикселей, что приводит к неоправданному «разбуханию» их веса.
В интернет-пространстве есть уйма программ и сервисов, которые позволяют исправлять, или «оптимизировать», эти оплошности. В результате такой обработки изображение визуально абсолютно не теряет качества, но может существенно сократить размер занимаемой им памяти.
Каждому своему клиенту мы настоятельно советуем перед загрузкой изображений на сайт прогонять их через один из следующих сервисов оптимизации:
Планируете разработать новый сайт? И хотите, чтобы он был современным, высокотехнологичных и удобным в использовании? Мы уверенны, что да, и готовы помочь сделать для вас именно такой сайт! Заполняйте форму ниже и ждите нашего ответа:
