Предыдущая Сколько можно заработать на вёрстке сайтов
10 ноября 2020

Оптимизация цветовой палитры в веб-дизайне

Цвет в веб-дизайне

Причиной сокращения количества цветов в изображении является уменьшение размера файла. Небольшой размер файла предполагает увеличение скорости передачи пакетов данных. Приходится иногда пожертвовать качеством картинки ради достижения оптимальной скорости передачи данных в Интернете. Можно выбрать из стандартных палитр или создать свою собственную. Не забывайте: чем меньше используемый набор оттенков, тем меньше соответственно размер файла.

Выбор цвета в web

Из всего множества выбираем только определенные цвета - те, что принадлежат так называемой Web-безопасной палитре. Стандартные тона будут корректно отображаться в браузере. Web-безопасная цветовая гамма состоит из 216 вариантов, которые поддерживаются как операционной системой Mac, так и Windows. Из-за того, что этот набор является общим для обеих операционных систем, его использование в своей графике, позволяет не волноваться за качество отображения картинки. Например, при создании работы, содержащей только четыре цвета, стоит их брать из Web-безопасной палитры. В противном случае есть риск, что браузер использует для отображения похожих оттенков два совершенно других варианта из Web-безопасного перечня, и возникнет эффект пуантилизма. Однако это явление быстро исчезает, поскольку большинство современных мониторов способны воспроизводить значительно больше 256 тонов.

Понятие битовой глубины

С уменьшением цветового разнообразия графики, сокращается ее битовая глубина, т.е. количество вычислительных мощностей для ее обработки. При необходимости можно использовать 24-битовое изображение с миллионами цветов, в то время как 8-битовое работает только с 256 цветами. Что произойдет, если максимально оптимизировать страницу и использовать менее 256 оттенков? Какая в этом случае будет битовая глубина?

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

После понимания принципа битовой глубины изображения и ее связи с количеством оттенков, можно приступать к выбору типа палитры для своего проекта. Не стоит забывать, что кроме использования стандартных вариаций, возможно создать и свою собственную. Но только 216 цветов на 8-битовом мониторе будут отображаться одинаково и без сглаживания во всех Web-браузерах. Какую бы цветовую гамму вы ни выбрали, попытайтесь включить в нее как можно больше из этих 216 цветов, если целью стоит максимальная оптимизация графического дизайна.

Возможно, вас заинтересуют наши курсы по веь-дизайну, гдк вы сможете освоить вопросы работы с цветом и изображениями на более высоком уровне:

Компьютерные курсы web-дизайна в Москве для начинающих

Курсы по HTML и CSS. Верстка сайтов

Адаптивная верстка сайтов на Bootstrap

Следующая Скидки на компьютерные курсы