Особенности веб-графики

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

Мало графических форматов

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

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

Казалось бы, что за беда, даже трех форматов — GIF, JPEG и PNG вполне хватает. Но не зря форматы придумывают в таких количествах, каждый из них нацелен на определенную задачу. К тому же указанные форматы имеют свои ограничения и свою заданную область применения.

Объем файлов

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

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

Достаточно сложно сказать, сколько же должен занимать объем графического файла — все зависит от его формата, размера изображения и содержимого. Правило «чем меньше, тем лучше» слишком абстрактно, чтобы применять его целенаправленно. Поэтому можно посоветовать следующее. Установите для себя некоторое условное число, например, для фотографий 40-60 кБ (средний объем для изображения размером 600х800 пикселов) и придерживайтесь этого значения. При уменьшении или увеличении размера изображения объем графического файла также будет меняться соответственно.

Замечание

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

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

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

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

Расширенное использование рисунков

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

Текст в виде изображения

Можно указать любой желаемый шрифт, установленный у вас в операционной системе и он корректно будет показываться на данном компьютере. Но никто при этом не гарантирует, что точно такой же шрифт будет находиться на удаленном компьютере пользователя. Поэтому для совместимости используется всего несколько шрифтов, которые встречаются повсеместно на компьютерах с операционной системой Windows, MacOS и Linux. В том случае если хочется воспользоваться понравившимся шрифтом, создают картинку с текстом в графическом редакторе и вставляют такой текст на веб-страницу как изображение. Это гарантирует, что текст будет передан без всяких искажений в первозданном виде.

Фоновые рисунки

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

Элементы интерфейса

Рисунки иной раз применяют и для замены стандартных элементов форм вроде кнопок. Это расширяет возможности по оформлению веб-страниц и придает им индивидуальный дизайн.

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