Photoshop для WWW
Photoshop создавался как программа, предназначенная для очень узкого круга потребителей, использующих настольные издательские системы. В те времена стоимость аппаратуры (компьютеры, сканеры, принтеры), необходимой для элементарной работы с изображениями, измерялась десятками тысяч долларов. Стремительный прогресс в сфере компьютерных технологий в последнее десятилетие сделал такую аппаратуру доступной для всех. Photoshop тоже превратился из программы только для специалистов по издательским системам в программу широкого применения.
С развитием и повсеместным распространением Internet Photoshop превратился в программу №1 для тех, кто создает свои страницы в WWW (World Wide Web). Язык описания Web-страниц, HTML (HyperText Markup Language), поддерживает использование только растровых изображений, а лучший редактор растровых изображений, конечно Photoshop. HTML исключительно прост, а визуальные редакторы (Microsoft Frontpage, Adobe GoLive, Macromedia Dreamwaver и др.) сделали верстку Web-страниц столь же простым делом, как набор текста с помощью текстового процессора. Это вызвало лавинообразный рост WWW, и, как следствие, спрос на инструменты создания Web-страниц.
Разработчики прекрасно понимают причины популярности своего детища и с каждой версией вводят в него возможности, ориентированные на новый слой потребителей, Web-дизайнеров.
Особенности подготовки изображений
Подавляющее большинство пользователей Internet до сих пор применяют в работе обыкновенные коммутируемые телефонные линии и модемы, поддерживающие низкую (28 800-56 000 бод) скорость передачи данных. Скорость передачи зачастую лимитируется качеством телефонных линий и высокой загрузкой внешних каналов, что особенно актуально для нашей страны. В таком случае эта скорость падает даже ниже номинальной скорости модема.
Графическая информация передается значительно медленнее, чем текстовая. Это определяет необходимость разумного подхода при создании изображений для распространения по сети. Размеры графических файлов должны быть не слишком велики, чтобы пользователь-читатель не покинул страницу, т. к. ему надоело ждать окончания ее загрузки.
Время загрузки изображений пропорционально размеру их графических файлов. Можно выделить несколько способов минимизации этих размеров:
- Снижение размеров и разрешения изображений
- Уменьшение количества цветов в изображении
- Использование сжатых и специальных форматов файлов, их оптимизация
- Оптимизация параметров сжатия для отдельных фрагментов изображений
Все эти способы используются при подготовке изображений для Web-страниц. Важно найти компромисс между скоростью и качеством изображения, чтобы, не утомляя пользователя длительным ожиданием, представить эффектную и информативную страницу.
Размеры и разрешение
В отличие от бумажной, размер Web-страницы не ограничен ни по горизонтали, ни по вертикали. Тем не менее, ни в коем случае не делайте страниц, ширина которых больше ширины экрана. Длина страницы менее критична, но оптимальная величина – два-три экрана. Поскольку изображения на Web-странице предназначены только для просмотра на экране, их разрешение должно совпадать с разрешением экрана, а размеры – не превышать его. Разрешение мониторов варьируется в широких пределах, так же, как и диагональ экрана – на какие же параметры рассчитывать Web-дизайнеру? На практике страницы проектируются, исходя из средних величин. Наиболее типичные разрешения мониторов на сегодня – 800х600 и 1024х768 пикселов. Из этих размеров следует вычесть площадь, занимаемую элементами интерфейса самого браузера. Кроме того, большинство пользователей предпочитают открывать окно браузера не на весь экран, чтобы иметь возможность быстро переключаться между несколькими одновременно открытыми его копиями. В Web-дизайне удобнее применять другую единицу измерения для изображений – пиксел. Такая единица избавляет от необходимости использования пары параметров размер/разрешение и позволяет легче соотнести размер изображения с размером страницы. В данной главе будем пользоваться именно этой единицей измерения.
Размеры изображений на странице определяются ее дизайном. Если у вас есть возможность изменить дизайн страницы таким образом, чтобы уменьшить количество изображений и их размеры, то обязательно воспользуйтесь ею.
Уменьшение количества цветов
Для представления графики в Internet широко используются индексированные изображения. Они, как вы помните (см. гл. 2), позволяют передавать до 256 фиксированных цветов. Набор цветов изображения (палитра) хранится в файле вместе с изображением и используется браузером для демонстрации.
Изображения с индексированным цветом получают из полноцветных изображений путем уменьшения количества цветов. Цвета, встречающиеся в изображении, составляют его палитру. Отсутствующие в палитре цвета передаются несколькими соседними пикселами близких цветов. Расположенные рядом, они воспринимаются как некий "средний" цвет. Генерация таких "псевдоцветов" (т. н. гибридных цветов) выполняется программами автоматически по специальному алгоритму и называется сглаживанием (dithering). На практике используются несколько алгоритмов сглаживания, которые подробно рассмотрены в главе 2. Наиболее подходящий выбирается, исходя из характера изображения. В большинстве случаев наилучшие результаты дает диффузионное сглаживание. Если в изображении встречаются плавные градационные переходы цветов, то предпочтительнее алгоритм с генерацией "шума".
Если дизайн Web-страницы требует строго определенного шрифта или особенного форматирования, то приходится переводить текст в растровое изображение. Особенно удачным следует признать использование для этой цели индексированных цветов. Для передачи текста и рисунков 256 цветов даже излишни – можно обойтись и меньшим их количеством. Индексированные форматы предоставляют вам такую возможность. Меньшее количество цветов позволяет создавать графические файлы меньшего размера.