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 используется заметно реже остальных форматов.



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

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

Instagram следит за твоими действиями!
Instagram следит за твоими действиями!
Новый дизайн YouTube уже доступен для избранных
Новый дизайн YouTube уже доступен для избранных
Как сделать текст читаемым? Простые решения в Photoshop.
Как сделать текст читаемым? Простые решения в Photoshop.

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