Федулина Елена Геннадьевна
+7 (921) 755 62 74
Звоните прямо сейчас
Site registration
Register your website right now.
Register website
Подписка на обновления блога
Хотите оперативно получать новости и полезные материалы из блога? Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* To be filled in
I Agree To Terms of Service
Social networks
Все, что необходимо знать веб-дизайнеру о форматах изображений

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

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

October 19, 2016 at 1:28 pm

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

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

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

JPEG

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

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

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

PNG

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

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

GIF

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



Подписка на обновления блога
Хотите оперативно получать новости и полезные материалы из блога? Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* To be filled in
I Agree To Terms of Service

More articles

Как заказать сайт правильно и не ошибиться?
Как заказать сайт правильно и не ошибиться?
Как много хороших фильмов!
Как много хороших фильмов!
5 принципов работы с клиентами
5 принципов работы с клиентами

Go up
array(5) { ["id"]=> int(0) ["ip"]=> string(12) "44.212.94.18" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "464ab09ce2facb99721a4093845dcb96" }