Часть 1 - Особенности подготовки изображения

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 широко используются индексированные изображения. Они позволяют передавать до 256 фиксированных цветов. Набор цветов изображения (палитра) хранится в файле вместе с изображением и используется браузером для демонстрации.

Изображения с индексированным цветом получают из полноцветных изображений путем уменьшения количества цветов. Цвета, встречающиеся в изображении, составляют его палитру. Отсутствующие в палитре цвета передаются несколькими соседними пикселами близких цветов. Расположенные рядом, они воспринимаются как некий "средний" цвет. Генерация таких "псевдоцветов" (т. н. гибридных цветов) выполняется программами автоматически по специальному алгоритму и называется сглаживанием (dithering). На практике используются несколько алгоритмов сглаживания. Наиболее подходящий выбирается, исходя из характера изображения. В большинстве случаев наилучшие результаты дает диффузионное сглаживание. Если в изображении встречаются плавные градационные переходы цветов, то предпочтительнее алгоритм с генерацией "шума".

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

Сжатые форматы файлов

Как только передача графической информации по глобальным сетям стала обычным делом, компания CompuServe (крупнейшая онлайновая служба) предложила формат GIF, в основе которого лежит эффективный (в отличие от более ранних форматов, например, PCX) алгоритм сжатия LZW. Этот формат используется в Internet и по сегодняшний день. Он работает только с индексированными изображениями.

Вторым форматом графических файлов в WWW является JPEG, уникальный алгоритм которого позволяет добиваться 15-кратной плотности сжатия. Высокие плотности сжатия достигаются ценой ухудшения качества изображения, что неприемлемо для издательских систем, но не очень существенно для Web-страниц. В формате JPEG хранятся полноцветные и полутоновые изображения, что великолепно дополняет возможности формата GIF. Оба формата, GIF и JPEG, поддерживают чересстрочную развертку, когда изображение загружается не подряд, а через несколько (2—5) строк. Это выглядит так, будто по мере загрузки страницы изображение становится более четким и подробным.

Невозможность создания полноцветных изображений с прозрачными участками в рамках форматов GIF и JPEG привела к появлению нового формата. Формат PNG был разработан в качестве альтернативы формату GIF и для представления изображений в сети World Wide Web и в других электронных сетях. Он сохраняет всю цветовую информацию и один альфа-канал изображения, а также для минимизации объема файла применяется алгоритм уплотнения, не приводящий к потере данных. Альфа-канал используется браузером как маска прозрачности. Плотность сжатия PNG-файлов аналогична плотности TIFF-файлов, поскольку применяются сходные алгоритмы, которые не приводят к снижению качества изображений. К сожалению, старые версии некоторых браузеров не поддерживают этот формат, но если вы ориентируетесь на Internet Explorer или Netscape Navigator, то можете смело им пользоваться.

Идеального графического формата для Internet не существует, поскольку каждый призван решать строго определенный круг задач.

Прозрачность

Чтобы часть пикселов изображения не была видна на Web-странице, они должны быть прозрачными. Форматы GIF и PNG поддерживают сохранение информации о прозрачности пикселов, но делают это по-разному.
 

*Рис. 1.1. Изображение с прозрачными областями в окне браузера*

Формат GIF позволяет зарезервировать один из цветов индексированной палитры под "прозрачный цвет". Те пикселы изображения, которые имеют этот цвет, интерпретируются браузерами как прозрачные. Вместо них демонстрируется фон, находящийся на Web-странице под изображением. Очевидно, прозрачность в формате GIF не может быть частичной: пиксел либо прозрачен, либо нет. Для имитации частичной прозрачности поступают так же, как и при сглаживании индексированных цветов: соседство прозрачных и непрозрачных пикселов воспринимается как полупрозрачность (рис. 1.1).

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

Анимация

Особенно интересно уникальное применение формата GIF для создания анимационных эффектов. Он позволяет хранить в одном файле несколько изображений, а браузеры могут их поочередно демонстрировать. Для каждого изображения можно указать время его демонстрации. Если эти изображения, хранящиеся в файле GIF, представляют фазы анимации, то браузер продемонстрирует маленький "мультфильм". Данная особенность формата GIF нашла очень широкое применение в Web-дизайне. Такие анимационные эффекты можно встретить практически на каждой странице WWW. Особенно часто анимированные изображения используются в баннерах (от английского banner, плакат) — рекламных объявлениях (рис. 1.2).
 

*Рис. 1.2. Отдельные кадры анимации*

Оптимизация изображений

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

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

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

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

Photoshop имеет мощные встроенные инструменты оптимизации изображений, позволяющие создавать эффективные Web-страницы.

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

Множество разнородных графических элементов Web-страницы могут потребовать для оптимизации различных параметров, или даже форматов. В таких случаях большое изображение можно разрезать на фрагменты и задать для каждого фрагмента индивидуальные параметры. Сборка фрагментов в единое изображение осуществляется HTML-кодом страницы. Разрезание изображения также удобно для организации ссылок и необходимо при создании ролловеров (см. ниже).

На рис. 1.3 приведен пример заголовка Web-страницы, где разрезание приводит к существенному выигрышу в размере и качестве. Основная часть заголовка полноцветная, и займет наименьшее место при сохранении в формате JPEG. В кнопках-ролловерах использованы всего два цвета. Для них наиболее выгоден формат GIF.

 

*Рис.1.3. Пример изображения, для которого необходимо разрезание*

Ролловеры

В последнее время в Web-дизайне все чаще используются языки программирования и языки сценариев: Java, JavaScript и ActiveX. Наибольшую популярность приобрел JavaScript, поскольку поддерживается подавляющим большинством новых браузеров на всех платформах и не требует значительных ресурсов компьютера. С помощью JavaScript программируются самые разнообразные интерактивные элементы: кнопки, меню, формы и т. д. Далеко не все дизайнеры-любители хотят в дополнение к своей основной профессии осваивать совершенно не связанную с ней область программирования. ImageReady дает возможность получать эффектные интерактивные элементы дизайна страниц, не занимаясь программированием и даже не набирая ни строчки кода. Для создания таких элементов используется JavaScript, но весь .код сценария генерируется ImageReady автоматически. Остается только вставить его в текст готовой страницы или добавить к созданной автоматически странице основное содержание.

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

Карты ссылок

Изображения на Web-страницах часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных страниц. Очевидно, что такое изображение можно разрезать на нужное количество частей и присвоить каждой из них особую гипертекстовую ссылку. А что делать если форма фрагментов должна быть сложной, непрямоугольной? Тогда проще всего сделать изображение картой ссылок. Для реализации этого механизма отдельным фрагментам изображения необходимо сопоставить различные гипертекстовые ссылки.

Карта ссылок реализована в языке HTML. В код Web-страницы включается описание участков изображения и соответствующих им ссылок. Карты ссылок могут обрабатываться либо сервером (требует специального сценария-обработчика на сервере), либо браузером пользователя. HTML-код для этих случаев несколько отличается, но результат остается тем же. ImageReady генерирует для них код автоматически, и вам не придется осваивать программирование.

HTML позволяет определять участки круглой, прямоугольной и многоугольной формы. Последний вариант используется для представления участков произвольной формы. Многоугольником с достаточным количеством сторон можно описать фигуру сколь угодно сложной формы.