IQSites - умный конструктор сайтов
+7 (812) 940-39-34
Звоните прямо сейчас
Социальные сети
Все, что необходимо знать веб-дизайнеру о форматах изображений

Все, что необходимо знать веб-дизайнеру о форматах изображений

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

19 октября 2016 в 13:28

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

Все, что необходимо знать веб-дизайнеру о форматах изображений

Рассмотрим три наиболее популярных формата: JPEG, PNG и GIF. Все они относятся к категории растровой графики. Какие параметры нам наиболее интересны? Прежде всего: разрешение картинки (кол-во пикселей по ширине и высоте), размер файла и количество цветов. Разумеется, картинки с большим разрешением в большинстве случаев имеют хорошее качество, но при этом большой размер и долгую загрузку, а значит, нам нужно стремится к максимально хорошему качеству при минимальном размере файла изображения.

JPEG

Данный формат сжимает картинки с потерей качества. Обычно, при сохранении в JPEG вас просят выбрать качество от 1 до 12, но даже в 12 будет произведено сжатие, хотя в данном случае потеря качества будет практически незаметная по сравнению с оригиналом. Данный формат плохо подходит для хранения различного рода чертежей и текста, зато идеален для полноцветных фото, изображений с плавным переходом яркости/контраста и рисунков с большим количеством разноцветных деталей.

На тему сжатия и последующего ухудшения качества, в соц. сетях можно найти не мало шуток и мемов:

Все, что необходимо знать веб-дизайнеру о форматах изображений

PNG

Формат PNG сжимает картинки без потери качества, при этом использует всю палитру цветов (в отличии от GIF). PNG часто используется веб-дизайнерами благодаря своей прозрачности, т.е при обработке картинки, в фото редакторе можно задать конкретную степень прозрачности пикселям и использовать этот параметр в различных вариациях на сайте. В итоге, данный формат отлично подходит для рисунков с прозрачностью и полупрозрачностью и изображений с резкими переходами цветов.

Все, что необходимо знать веб-дизайнеру о форматах изображений

GIF

GIF является наиболее старым форматом и поддерживает всего 256 цветов. Алгоритм выбирает наиболее используемые цвета а оставшиеся замещает похожими (из тех же 256 цветов, соответственно). Разумеется, большинство из нас знакомы с данным форматом благодаря тому, что он поддерживает простую анимацию (проигрывается несколько сменяющих друг друга кадров). Из за ограниченной палитры, в веб-дизайне GIF используется заметно реже остальных форматов.



Подписка на обновления блога
Хотите оперативно получать новости компании из корпоративного блога? Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* Поля, обязательные для заполнения
Нажимая "Подписаться", Вы принимаете условия обработки персональных данных.
Теги: Полезное

Другие статьи блога

Распространенные заблуждения по поводу Landing Page - ч.1
Распространенные заблуждения по поводу Landing Page - ч.1
Улучшаем текст при помощи HTML тегов
Улучшаем текст при помощи HTML тегов
ТОП ошибок контент-маркетинга при продвижении сайта.
ТОП ошибок контент-маркетинга при продвижении сайта.

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(11) "3.17.150.89" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "174e25d874d7539cd48a9b178646f07b" }