Приветствую Вас, Гость
Главная » Статьи » Разное » Разное

Подготовка изображений для Web – страниц

При просмотре интернет – страниц  мы имеем дело с документами, которые передаются с веб-сервера на локальный компьютер пользователя и просматриваются с помощью браузера. Это налагает некоторые ограничения на используемые  при создании сайта изображения: большое значение имеет объем графического файла, его качество, цветовая модель и т.д. Также заметим, что для по ряду причин в интернет – сайтах чаще используется растровая графика, а не векторная.  Поэтому, прежде чем использовать графические изображения в оформлении сайта, их необходимо предварительно подготовить к публикации. Это делается при помощи специальных программ – графических  редакторов. Наиболее известные из них – Adobe Photoshop , Paint.NET, Gimp.

Итак, рассмотрим основные требования к размещаемым в интернет изображениям.

1. Формат файла

Программы для работы с графикой – и редакторы, и средства для просмотра изображений – поддерживают более десятка различных форматов файлов.  Браузеры могут работать только с несколькими из них – JPEG, PNG, GIF. Для просмотра изображений в каком-либо другом формате необходимо установить плагин — специальное расширение браузера, которое позволяет загружать и показывать изображения в этом формате.

Каждый из многочисленных форматов графических файлов был разработан для решения определенных задач и имеет свою заданную область применения.

Формат JPEG (JPG)

Формат JPEG принято использовать для полноцветных фотографий и изображений со сложными градиентными переходами. 

В формате JPEG  можно сохранить до 16 млн. различных оттенков, поэтому в этом формате сохраняют фотографии.

Графические файлы формата JPEG могут быть сохранены с различной степенью сжатия. Чем больше сжатие, тем ниже качество итоговых изображений. Сжатие по алгоритму JPEG происходит с потерей информации, что приводит к появлению «грязи», специфических размытий на границах областей.

Формат GIF

Формат GIF применяется для изображений с малым количеством цветов;  скриншотов, схем, графиков, примитивов; анимированных изображений; изображений с прозрачными областями.

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

Формат PNG

Формат PNG (Portable Network Graphics — Портативная сетевая графика) спроектирован в качестве конкуренции и в конечном счете замены формата GIF.  Этот формат поддерживает прозрачность, для представления изображений можно использовать 256 цветов. Разница между GIF и PNG – в качестве цветопередачи, глубине цвета.

2. Объем файлов

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

Одним из самых объемных элементов веб-страницы как раз и является графика — рисунки, иллюстрации, декоративные элементы документа. Исходные цифровые фотографии из-за своих размеров не годятся для использования на веб-страницах. Ширина и высота оригинальных изображения может достигать несколько тысяч пикселов, а объем файла — несколько мегабайт, что в большинстве своем приводит к проблемам с загрузкой файлов. По этой причине размер фотографии перед публикацией на сайте уменьшают, чтобы она быстрее загружалась и встраивалась в содержимое документа. Чем меньше объем графического файла, тем быстрее изображение будет показано в браузере.

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

Средний объем выставляемых на интернет-сайте не должен превышать 40-60 кБ.

3. Размеры изображений

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

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

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

4. Цветовая палитра изображения

При работе с цветом используется понятие  цветовой модели. Цвета в природе редко являются простыми. Большинство цветовых оттенков образуется смешением основных цветов. Цветовой моделью называется способ разделения цветового оттенка на составляющие компоненты.

Для Web используют цветовую модель RGB.

Модель RGB базируется на трех основных цветах: красном, зеленом и синем. Именно так происходит отображение всего многообразия цветовых оттенков на экранах компьютерных мониторов (электронные лучи разной интенсивности заставляют светиться зерна люминофора трех названных цветов). Данная модель является аддитивной. Это означает, что при суммировании равных долей трех названных цветов 100-процентной интенсивности получается белый цвет. Это, разумеется, означает также и то, что если предельно уменьшить интенсивность всех трех цветовых компонентов (то есть задать значения красного, зеленого и синего цветов равным 0), результатом будет черный цвет.

В модели RGB каждая составляющая цвета (красная, зеленая, синяя) может принимать значение от 0 до 255. Общее количество всевозможных сочетаний превышает 16 млн. Для отображения на мониторе такое  количества оттенков избыточно, так как браузеры точно воспроизводят всего 216 оттенков цвета.

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

В режиме индексированных цветов вы сможете выбрать одну из нескольких предложенных палитр, каждая из которых содержит 256 цветов. 

Следует помнить, что при этом объем файла уменьшатся в случае, если изображение содержит небольшое количество оттенков, в противном случае объем файла может увеличиться.

 

Категория: Разное | Добавил: irina-shir (17.05.2013)
Просмотров: 1582
Яндекс.Метрика