Автор статьи: Мельников Михаил
Теперь поговорим о графике на Web-страничках, ведь именно благодаря ей WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.
Что особенного в графике, применяемой
на web-страничках?
А то, что она имеет свои определенные ограничения, с которыми мы должны считаться и извлекать из этого выгоду.
Для использования в Web применяется два основных формата файлов — GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится «пинг»), но он пока еще мало распространен, и не все броузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.
?Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.
Формат GIF
А теперь немножко разъяснений — к чему эти свойства могут привести. Как Вы прочитали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод — если у Вас красивая фотография с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже — оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если Вы хотите все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.
А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.
Формат JPEG
Пожалуй, это все преимущества формата JPG, и основное его предназначение — хранение изображений фотографического качества.
Всю работу по обработке графики делайте в промежуточном формате.
Ну вот, с форматами разобрались, теперь рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы Вам понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG — каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто — одновременно с оптимизацией размера файла).
Оптимизация графики
Для web-страниц очень важным является вопрос размера фотографии. Какого размера их делать? Не будут ли они слишком долго грузиться? При оптимизации можно уменьшить размер файла, но вряд ли стоит оптимизировать фотографию, не несущую смысловой нагрузки. Самый первый этап оптимизации — выделение в фотографии главного (с отбрасыванием всего остального) и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение, и в этом случае оно действительно будет иметь наименьший размер.
А с размерами фотографий нужно придерживаться определенного компромисса — не делайте их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не делайте их слишком огромными, чтобы время не растянулось в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией я понимаю фотографию размером примерно 250×300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все ваши фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к «иллюстрирующим» текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.
В этой статье приведены некоторые базовые сведения по применению графики на web-страницах. А в последующих статьях я опишу различные аспекты изготовления и оптимизации графики.
