Цифровые изображения для Web
- Особые требования к Web-графике
- Работа с прозрачными файлами GIF
- Анимированные файлы GIF
- Отправка графики по электронной почте
Цифровые камеры и сканеры являются прекрасными инструментами для создания изображений для Интернета. В этой главе объясняются некоторые вещи, которые вы должны иметь в виду при создании изображений для Web или отправки их по электронной почте.
Особые требования к Web-графике
Цифровые камеры и сканеры и Web были созданы друг для друга. И те и
другие имеют высокую скорость передачи данных и качество изображений,
которое прекрасно подходит для Web-графики. Произошло ли прибавление в
вашем семействе в последние выходные? Группе диссидентов из правления
директоров вашей компании удалось завоевать власть на прошлом собрании?
Не паникуйте! Вы можете разместить фотографии вашего нового ребенка или
внутрикорпоративной хунты вашей организации в Web в течение нескольких
минут благодаря своей цифровой камере.
Или вам внезапно понадобилось преобразовать распечатанную диаграмму в
электронный вариант для использования в онлайн-отчете? Или, возможно,
вам нужно добавить фотографии долго отсутствовавшего родственника к вашему
родословному древу, размещенному в Интернете. Положите важную иллюстрацию
на сканер, и через несколько минут вы получите изображение, которое вам
необходимо для загрузки на удаленный сервер.
Цифровые камеры и сканеры дают вам возможность быстро преобразовывать
множество разнообразных изображений в цифровую форму. Даже самая дешевая
цифровая камера имеет более чем достаточно разрешения, чтобы создавать
изображения, которые отлично подойдут для Web-страниц. На самом деле,
фотография с разрешением 640x480 пикселей, по крайней мере, в четыре раза
больше, чем требуется для большинства типичных Web-страниц. Сканеры могут
фиксировать изображения размером с небольшую почтовую марку или распечатанные
портреты 20x25 так быстро, как скоро вы сможете положить оригинал на сканер.
Изображения для Web имеют некоторые специальные требования, к которым,
возможно, придется привыкнуть, если вы до этого работали лишь в мире цифровых
технологий, не связанных с Web, в котором действует правило чем больше,
тем лучше, и большее разрешение означает только то, что вам придется найти
достаточно места на диске для хранения большого изображения. В Web приоритеты
абсолютно другие, как вы поймете, ознакомившись со следующим списком (список
не расположен ни в каком определенном порядке, эти приоритеты будут описаны
более подробно далее в этой главе):
- Изображение должно быть достаточно небольшим, чтобы нормально расположиться на странице при различных размерах, не захватывая остальную часть содержимого страницы. Некоторые посетители Web-страницы могут использовать браузер с окном просмотра 600x400 пикселей или меньше, другие могут получать 1000x700 или даже большие размеры вашей страницы, как показано на рисунках 13.1 и 13.2. Изображения должны изменяться, чтобы выглядеть хорошо при любом экранном решении.
- Изображение должно быть достаточно небольшим (с точки зрения размера файла), чтобы загружаться быстро. Хотя кабельные модемы и другие виды широкополосного доступа становятся все более распространенными, миллионы людей могут просматривать вашу графику, загружающуюся на скорости 33 Кб/с или медленнее. Если загрузка вашего изображения занимает много времени, они могут просто нажать кнопку Назад (Back) или пойти куда-нибудь еще.
- Изображение должно быть достаточно четким, чтобы передавать информацию, которую вы хотите передать, без заметного смазывания, которое будет отвлекать. Web-графика может быть слишком четкой (если резкость делает изображение слишком большим для быстрой загрузки), а также слишком смазанной.
Рисунок 13.1. Установите такой paзмер изображений, чтобы они хорошо выглядели в маленьком окне браузера...
- Web-графика должна иметь цвета, которые совместимы с экранами дисплеев ваших зрителей. К счастью, работа с безопасными для браузера палитрами в наши дни менее важна, поскольку подавляющее большинство тех, кто путешествует по Интернету, используют полноцветные дисплеи. Я не собираюсь заполнять эту главу описанием выбора Web-палитры, в любой хорошей книге по работе с изображениями содержится эта информация, если вы чувствуете, что вам это нужно.
Это так называемая Web-безопасная палитра. Подробнее о ней и других аспектах размещения изображений в Интернет вы можете узнать из книги Лори Ульрих «Photoshop 7 для Web-дизайна», издательства «КУДИЦ-ОБРАЗ» Москва, 2002. -Примеч. науч. ред.
Если вы прочтете этот список тщательно, вы увидите, что большая часть того, что важно для Web-графики, включает физический размер экрана и файловый размер изображения. Они тесно связаны, но необязательно должны изменяться строго одинаково. На них влияют факторы, описанные в следующих двух рл•;. юлах о размере экрана и файловом размере.
Рисунок 13.2. ... Или очень большом окне просмотра
Размер экрана определяется размерами вашего изображения и экранным разрешением дисплеев ваших зрителей плюс размер их мониторов. Размеры каждой стороны изображения с разрешением 256x256 пикселей будут в два раза больше. чем изображения 128x128 пикселей, но оно займет сравнительно меньше экранного места, если экранное разрешение посетителя вашей странички установлено на 1280x1024 пикселя, а не на 800x600 пикселей. Еще больше все осложняет то, что некоторые могут использовать 19- или 21-дюймовый монитор, в то время как другие имеют 17-дюймовый или меньший. При разрешении, скажем, 1280 х 1024 каждого из них ваше изображение с разрешением 128x128 пикселей будет сильно отличаться по величине на этих различных мониторах. На рисунке 13.3 показано, о чем я говорю.
Рисунок 13.3. Оба изображения отображаются на дисплее с экранным разрешением 1280х1024. Наверху показано то, что вы увидите на 22-дюймовом мониторе, внизу - сравнительный показ того же самого изображения, отображаемого на 17-дюймовом мониторе
Вам необходимо помнить об этом при разработке Web-графики. Логотип вашей
компании может выглядеть хорошо при определенном размере на вашем мониторе,
но он может показаться раздутым графическим символом или небольшой кнопкой
при других разрешениях на другом мониторе. Если возможно, попробуйте просмотреть
изображения при различных разрешениях, чтобы увидеть, какой размер экрана
подходит для них наилучшим образом.
Также помните о том, что окно просмотра браузера посетителя также может
быть разным по величине, независимо от экранного разрешения. Я обычно
просматриваю изображения на своем 19-дюймовом мониторе с разрешением 1280x1024,
но часто использую несколько окон браузера меньшего размера. Изображения
должны изменять свои размеры так, чтобы хорошо выглядеть при различных
разрешениях и в окнах браузеров разных размеров.
Размер графического файла определяет, как быстро он может быть загружен,
и связан с физическими размерами изображения. То есть графическое изображение
размером 512x512 пикселей, вероятно, будет немного больше, и загрузка
его займет больше времени, чем изображение размером 64x64 пикселя. Тем
не менее формат файла, который вы выберете для своего изображения, может
иметь впечатляющее воздействие на его размер. Очень возможно, что большее
изображение будет иметь меньший размер файла и более высокую скорость
загрузки, чем относительно небольшое изображение.
Виновниками в этом случае являются два наиболее распространенных формата
Web-графики: GIF (Graphics Interchange Format - формат графического обмена)
и JPEG (названный в честь объединенной группы экспертов в области фотографии
(Joint Photography Experts Group), разработавшей его). Все редакторы изображений,
которые вам доведется использовать для работы со своей цифровой камерой
и отсканированными изображениями, могут сохранять изображения в этих двух
форматах. Каждый из них имеет свои собственные преимущества и недостатки.
GIF
GIF поддерживает только 256 или меньше цветов, но это делается для отличного
отображения определенных типов изображений во всех Web-браузерах, независимо
от цветовых возможностей монитора посетителя (то есть даже если посетитель
использует старый компьютер, способный отображать только 256 цветов).
Размеры файлов GIF довольно невелики.
Однако GIF часто является неподходящим вариантом для сохранения фотографических
изображений, которые содержат намного больше 256 цветов. Такая графика
будет выглядеть подобно плакатам с заметными полосами цвета там, где сходные
оттенки были преобразованы в один и тот же цвет, как вы можете видеть
на рисунке 13.4.
Рисунок 13.4. Очевидное разделение на полосы появится при преобразовании полноцветного изображения в 256-цветное для формата GIF
Схема сжатия без потерь в GIF не удаляет никакой информации изображения,
кроме цветов, по мере уменьшения размеров файлов, так что этот формат
сохраняет всю четкость оригинала. Это делает GIF наилучшим форматом для
таких изображений, как диаграммы и графики, которые содержат четкие края.
Кроме того, файлы GIF могут быть сделаны прозрачными, так что они могут
перемещаться на фоне, чередоваться, постепенно появляться по мере загрузки
файла, и анимироваться для добавления действия на вашу Web-страницу.
Единственный способ сделать файл GIF меньше - уменьшить количество цветов,
которые он содержит, скажем с 256 цветов до 128, 64, 32 или даже меньшего
количества. Так что размер вашего изображения GIF, вероятно, будет определяться
количеством цветов, которые вам действительно нужны. Файловый размер диаграммы,
графика или логотипа, которым действительно необходимы всего лишь десяток
или около того цветов, могут быть сделаны очень небольшими с помощью GIF.
Что касается фотографий, то вы практически всегда получите лучшее изображение
и меньший размер файла при использовании JPEG.
JPEG
JPEG сжимает изображения другим образом. Не удаляя цветов, JPEG вместо
этого делит изображение на блоки и изучает все пиксели в пределах конкретного
блока. Пиксели, которые достаточно сходны в цвете, преобразовываются в
один общий цвет, уменьшая тем самым объем информации, которая должна храниться
для восстановления этого конкретного блока.
JPEG может воспроизвести весь 24-битовый диапазон 16,8 миллиона цветов
(хотя любое определенное изображение JPEG, вероятно, будет содержать намного
меньше различных цветов), так что это хороший вариант для воспроизведения
полноцветных изображений. JPEG потенциально предлагает даже еще меньшие
размеры файлов, чем GIF, хотя получающиеся в результате изображения могут
не быть такими четкими, поскольку JPEG удаляет некоторую связанную с разрешением
информацию изображения для уменьшения размера файла.
К счастью, все редакторы изображений позволяют вам находить наилучший
компромисс между четкостью и размером файла. Вы можете сохранить конкретное
изображение с желаемым уровнем качества, которое в разных редакторах изображений
измеряется различными способами. Некоторые используют текстовые описания,
такие, как Низкое (Low), Среднее (Medium) или Высокое (High) качество.
Другие используют числовую шкалу от 1 (низкое качество/высокое сжатие)
до 10 (высокое качество/низкое сжатие) или даже процентное соотношение
(от 0 до 100% по шкале качества). На рисунке 13.5 показано изображение
JPEG с типичным «блочным» видом, который появляется при слишком сильном
сжатии файла.
Рисунок 13.5. Слева изображение было сохранено как JPEG с помощью настройки высокого сжатия/низкого качества, справа то же самое изображение было сохранено при помощи настройки низкого сжатия/высокого качества
В качестве эксперимента я взял очень большой файл с разрешением 1400x1000
пикселей и 24-битовым цветом и сохранил его в формате TIFF (Tag Image
File Format - файловый формат тега для изображений), использующем схему
свободного от потерь сжатия LZW, которое использует программа Photoshop.
Файл в этом формате занимает практически 3,3 Мб. Затем я сохранил его
как файл JPEG, используя настройку максимального качества 10. Файл был
сжат почти на 67% до 1,3 Мб. Наконец, сохраняя файл с помощью настройки
минимального качества/максимального сжатия 0, я смог создать файл размером
82 Кб - в 40 раз меньше, чем оригинал. И изображение все еще осталось
приемлемым для использования в Web.
Ваша задача при использовании JPEG заключается в нахождении уровня качества,
который высок достаточно, чтобы избежать блочного вида изображения, но
не таким высоким, что загрузка вашего изображения займет много времени.
Я рекомендую сохранить несколько различных версий изображения, а затем
перезагрузить каждое из них для сравнения.
Избегайте загружать и пересохранять изображения JPEG, так как всякий раз,
когда вы сохраняете изображение в формате JPEG, может быть потеряна дополнительная
информация изображения.
Каков идеальный размер файла Web-графики?
Идеальный размер варьируется в зависимости от содержания и значения вашего Web-сообщения. Некоторые простые практические методы, которые вы можете использовать при определении файлового размера, включают следующие:
- Старайтесь, чтобы каждое изображение для Web не превышало 25-50 Кб, особенно если вы собираетесь разместить на странице много графики. Такие вещи, как линейки и кнопки, могут часто быть сжаты до 7 Кб и меньше. Обрезка и уменьшение изображений с помощью небольшого сжатия - часто это все, что вам понадобится.
- Ограничьте объем графики каждой страницы до 200 Кб или менее.
- Если вы выставляете свои цифровые фотографии, придерживаться лимита в 200 Кб может быть сложно. Вместо этого расположите самые большие изображения на определенных страницах и выдавайте вашим посетителям предупреждение об этом перед тем, как они смогут зайти на данные страницы.
- На главной странице разместите только графику, необходимую для того, чтобы завлечь посетителей в вашу галерею крупномасштабных цифровых изображений.
- На странице может быть размещена небольшая пиктограмма изображения, использующаяся в качестве предварительного просмотра большого графического изображения. Вы можете разместить полноразмерное изображение на другой странице или сделать так, чтобы оно отображалось, если посетитель щелкнет по пиктограмме. Таким образом посетитель получает примерное визуальное представление, что помогает ему решить, нужна ли ему полная загрузка изображения. Также неплохой идеей является показ файлового размера полного изображения, чтобы те, кто хотят его загрузить, могли подсчитать примерное время загрузки. На рисунке 13.6 показана Web-страница с пиктограммами, связанными с большими изображениями.
Рисунок 13.6. Ускорьте загрузку ваших страниц, сделав ссылки на большие изображения с помощью пиктограмм
Работа с прозрачными файлами GIF
Независимо от того, видоискатель ли это цифровой камеры, рамка на стене
или изображение в Интернете, люди пытаются втиснуть все визуальные предстаапения
в квадратный или прямоугольный формат. Хотя отбрасывание каждого нелинейного
изображения делает работу браузера легче, это усложняет вещи для каждого,
кто хочет получить круглую кнопку, предмет неправильной формы или даже
что-то такое же простое, как причудливый текст, всплывающий на фоне страницы.
Прозрачные GIFbi выручают вас, делая все пиксели, окружающие неквадратный
объект, который вы хотите выделить, невидимыми, создавая треугольники,
другие многоугольники, эллипсы и объекты неправильной формы, подходящие
для графики вашей Web-страницы. На рисунке 13.7 показана Web-страница
с тремя различными плавающими объектами, созданными с помощью прозрачных
GIFoв.
Автор использует термин floating - «плавающий» - для
обозначения изображения, визуально не имеющего рамки или обрамления. -
Примеч. науч. ред.
Секрет заключается в спецификации формата GIF89a, которая включает обеспечение
того, что один (и только один) цвет может определяться как невидимый или
прозрачный. Когда такая программа, как, например, браузер, отображает
такое изображение, она игнорирует этот определенный цвет везде, где его
находит, и вместо пикселей этого цвета использует пиксели, представляющие
основной фон.
Фон может представлять собой заливку цветом или определенное изображение,
которое выкладывается, если необходимо, мозаикой для покрытия окна страницы
в браузере. Итак, хотя прозрачные GIFbi на самом деле имеют прямоугольную
форму (что означает, что текст или другие изображения не могут вторгаться
в область, которую они покрывают), само изображение GIF мягко сливается
с фоном. На рисунке 13.8 показана та же самая страница с четко отмеченными
границами файлов GIF.
Рисунок 1З.7. Вы можете помещать плавающие фотографические изображения, текст или другие объекты на ваших Web-страницах с помощью прозрачных GIFoв
Рисунок 13.8. Прозрачные GIFbi являются на самом деле прямоугольными изображениями с прозрачными областями, окружающими объект
Изучите инструменты вашего редактора изображений для создания прозрачных GIFoB. Обычно вам понадобится извлечь объект, который вы хотите переместить, и вставить его на слой однотонного цвета или в прозрачный слой, а затем сделать этот цвет прозрачной частью GIFa при сохранении файла. Если вы думаете об этом при создании изображения, вы можете иногда сфотографировать объект на фоне чистого неба, ровной однотонной стены или другого фона, что облегчит извлечение объекта, как показано на рисунке 13.9.
Рисунок 13.9. Аиста, сфотографированного на фоне чистого голубого неба, было легко извлечь для использования в прозрачном GIFe
Вы, вероятно, видели графику, которая двигается как анимация на Web-страницах.
Вы, возможно, смотрели на видеофайлы, анимации Shockwave, ап-плеты Java
или динамический HTML, но, вероятнее всего, то, что вы видели, было простыми
анимированными файлами GIF. Эта легкая в создании графика может вращать
ваш логотип, указывать посетителям на вашу любимую ссылку или рекламный
банер или просто добавлять небольшое движение на плоские страницы. Вы
можете создать отдельные изображения для анимированного GIF, а затем использовать
специальный инструмент, такой, как GIFConstruction Set или Adobe ImageReady,
чтобы объединить их с графикой, которая на Web-страницах демонстрируется
в движении.
Если вы знакомы с анимацией немного больше, чем Гомер Симпсон, вы, вероятно,
знаете, как она работает: глазу представляется серия слегка различающихся
последовательных изображений, которые мозг превращает в плавное движение.
Хотя средняя полнометражная мультипликация (до появления компьютеров),
по слухам, требовала миллионов отдельных, раскрашенных вручную рисунков,
что эквивалентно затратам труда 10 000 людей в течение нескольких лет,
один человек может легко создавать GIFbi, состоящие из нескольких кадров,
для быстрого эффективного показа в Web.
Анимированные GIFbi - это файлы GIF, которые содержат множество изображений
и инструкции, которые сообщают Web-браузеру, как их отображать. Хотя вы
можете теоретически вставить мини-фильм в анимированный GIF, учитывая
скорость передачи в Web, в большинстве случаев вы сделаете доброе дело
для своих посетителей, если будете придерживаться небольших простых анимаций.
GIF с двумя изображениями может высвечивать сообщение, привлекать внимание
к ссылке или предоставлять любой простой вид повторяющегося движения.
При наличии трех или четырех изображений в вашем GIFe вы можете создать
иллюзию движения. Анимация может отображаться одновременно или повторяться
многократно после завершения цикла. Для получения гладкого эффекта повторения
ваши анимации должны создаваться с помощью циклов, где последнее изображение
в серии переходит сразу в первый.
Для того чтобы уменьшить время загрузки, анимированные GIFbi не должны
занимать много места на вашей Web-странице. Многослойный GIF размером
36x36 пикселей загружается в четыре раза быстрее, чем версия размером
72x72 пикселя, что может означать разницу между сносным 15-секундным ожиданием
и тягостной одноминутной задержкой. Вы также не должны злоупотреблять
анимацией. В большинстве случаев вы захотите создать только один или,
возможно, два движущихся объекта на своей странице. Установите большее
количество, и каждая анимация будет конкурировать с другими за привлечение
внимания ваших посетителей. Кроме того, вы не захотите породить приступы
морской болезни, создав вздымающийся и движущийся во множестве различных
мест Web-сайт. Разместите лишь те, что являются небольшими, быстрыми и
важными, и все будут счастливы.
Вы легко можете создавать анимированные GIFbi из своих цифровых фотографий.
Снимите изображение под несколькими различными углами или с разных позиций
либо используйте возможность создания мини-фильма вашей цифровой камеры
для съемки последовательности кадров. Каждый кадр должен немного отличаться
от предыдущего, имитируя движение. Это может быть достигнуто простым небольшим
смещением объекта в одну сторону. Во многих редакторах изображений вы
можете использовать клавиши управления курсором, чтобы сместить выбранную
область влево, вправо, вверх или вниз на один пиксель за один раз, создавая
простую анимацию. На рисунке 13.10 показаны три последовательных кадра,
которые могут быть объединены в анимированный GIF.
Рисунок 13.10. Сделайте три кадра с помощью возможности съемки мини-фильма вашей цифровой камеры и создайте анимированный GIF для вашей Web-страницы
Отправка графики по электронной почте
Не забывайте, что Интернет не ограничивается Web. Как только вы соберете
несколько великолепных цифровых изображений, вы захотите поделиться ими
со своими друзьями. Вы всегда можете послать их на Web-страницы самостоятельной
публикации, такие, как Kodak PhotoNet, но я думаю, что вы захотите изучить
более персонализированный способ доставки своих лучших снимков непосредственно
членам семьи, друзьям и коллегам.
Большинство программ по работе с электронной почтой позволяют вам прикреплять
фотографии непосредственно к e-mail сообщениям, так что послать изображение
или два легко. Однако вам необходимо помнить о мерах предосторожности,
связанных с размерами файлов, о которых я упоминал ранее в разделе «Особые
требования к Web-графике». За исключением случаев, когда вы знаете, что
ваш получатель имеет быструю широкополосную связь, вы захотите сохранить
свое изображение в экономящем место формате JPEG или как GIF для нефотографических
изображений. Вы, вероятно, не должны строго придерживаться указаний относительно
размера для Web, ваш друг будет, скорее всего, терпелив достаточно, чтобы
ожидать загрузки минуту или две большого изображения (скажем, 100-200
Кб, но определенно не мегабайт или два!).
Кроме того, вы должны иметь в виду, что ваши получатели могут иметь ограничения
в размерах своих почтовых ящиков. Они могут иметь возможность принимать
почту размером, например, до 5 или 10 Мб. Обычно это не проблема, поскольку,
чтобы заполнить обычный почтовый ящик, должны прийти сотни текстовых сообщений.
Тем не менее, если вы начинаете посылать знакомым дюжины изображений,
вы можете переполнить их почтовые ящики. Когда это случается, их остальная
почта может начать отправляться обратно отправителю. Поэтому, если вы
планируете посылать массу изображений, распределите их по времени или
узнайте у своего получателя, имеет ли он ограничения на размер почтового
ящика.
Что дальше?
В последней главе этой книги рассказывается о другом способе распространения ваших изображений - с помощью распечаток, которые вы можете создавать с помощью своего принтера. Перед вами открыто больше возможностей в отношении распечатки с помощью принтера, чем вы можете себе представить. Я думаю, что вы найдете короткую финальную главу интересной.