Подготовка фотографического изображения для сайта в Интернете или посылки по электронной почте

Особенности документов, размещаемых в Интернет

На сегодня жестких нормативов, регламентирующих физический размер изображений для Интернет и электронной почты нет. Тем не менее, большинство пользователей Сети придерживаются соглашения о том, что на "медленных' модемных линиях страница любого сайта, включая фотографии на ней, не должна превышать 30-50 Кб. Для электронной почты допускается размер 100-200 Кбайт, а больше - если у получателя очень быстрый модем или выделенная линия. Многие пользователи электронной почты настраивают ее так, чтобы большие файлы были запрещены и не приходили к ним, оставаясь на сервере.

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

Для уменьшения размеров графических файлов можно выделить три способа минимизации их размеров:

• "Физическое" снижение размеров и разрешения изображений;
• Уменьшение количества цветов в изображении;
• Использование сжатых и специальных форматов файлов.

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

В качестве иллюстрации к сказанному выше я взял с сайта http://foto.borisoglebsk.net/ требования по участию в фотоконкурсе. На этом сайте говорится, что файлы фотографий, присылаемые к ним на фотоконкурс должны иметь следующие характеристики:

• Формат: jpg или gif ;
• Максимальный размер фотографии: 200Кб;
• Разрешение изображения: 800x600 пикселов;
• К конкурсу допускаются только файлы, в названии которых не содержатся буквы русского алфавита (только цифры и латинские буквы), а "пробелы" должны быть заменены на символ "подчеркивание" ( _ ).

Давайте разберемся, почему именно такие требования предъявляются к фотоизображениям в Сети.

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

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

GIF

Формат GIF (Graphics Interchange Format - Формат обмена графическими данными) — это формат для изображений, содержащих 256 или менее цветов. Формат популярен в Сети и обычно используется для изображений, содержащих в основном ровные цвета, например, таких, как иллюстрации. GIF также поддерживает прозрачность и чересстрочное отображение. В настоящее время используются две модификации GIF-файлов: GIF87a и GIF89a. Они отличаются минимальными требованиями к программам, работающим с данным файлом. Так, модификация GIF89 имеет расширенные возможности управления выводом кадров изображений. Формат GIF следует использовать для изображений, создаваемых в графических редакторах программным путем (диаграммы, рисунки, текст и т.д.). GIF использует алгоритм сжатия LZW (Lempel-Ziv-Welch) с хорошей степенью сжатия.

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

JPEG

Формат JPEG (Joint Photographic Experts Group - Объединенная экспертная группа по фотографии) — это масштабируемый упакованный формат, обеспечивающий высокую степень сжатия с очень небольшим снижением качества изображения. Для изображения в электронной форме не является необычным некоторая потеря четкости, особенно при преобразовании из одного формата в другой. Исходя из того, что JPEG объединяет в себе хорошую степень сжатия и незначительную потерю качества, он является идеальным форматом для среды Web-сайта, в которой изображения часто масштабируются, преобразовываются или изменяются иным образом. Формат JPEG наиболее подходит для фотографий с количеством цветов более 256, т.е. изображений, имеющих глубину цвета 24 бита (16,7 миллионов цветов).

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

Формат JPEG может быть наилучшим вариантом для точной передачи изображений с плавным переходом цветов, то есть для изображений фотографического типа. Это любое изображение с количеством цветов более 256 (фото со сканера, цифровой камеры, сложные фракталы и т.д.).

PNG

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

В формате PNG-8 максимально возможное количество цветов оптимизированного изображения - 256, этот формат похож на GIF. В формате PNG-24 у изображения могут быть миллионы цветов, этот формат, в свою очередь, похож на JPEG. В форматах PNG используется метод сжатия без потерь данных. Оба формата PNG могут сохранять полупрозрачные области (например, смягченные растушеванные границы), используя метод под названием альфа-прозрачность. В этом случае у точки может быть 256 уровней непрозрачности, начиная с полной прозрачности и заканчивая полной непрозрачностью.

Формат PNG занимает промежуточное положение между GIF и JPEG. Однако в формате PNG-8 нельзя создать анимацию (а в формате GIF можно), а файлы в формате PNG-24 больше по размеру аналогичных JPEG-файлов.

Сравнение графических форматов изображений для веб-страниц

Идеального графического формата не существует, поскольку каждый призван решать строго определенный круг задач. Как правило, на веб-странице многоцветные изображения, такие, как фотографии, сохраняются в формате JPEG. Формат PNG-24 также годится для фотографий, однако, в отличие от JPEG, этот формат занимает больше места для одного и того изображения. PNG-24 рекомендован для работы с полноцветными изображениями содержащих многоуровневую прозрачность. Иллюстрации с малым количеством цветов, четкими линиями или мелкими деталями, например, содержащие текст, должны быть оптимизированы в формате GIF или PNG-8.

Сводный список форматов, их описание и область применения приведены в табл. 9.1.

Adobe Photoshop для WWW

Как уже было отмечено, графический редактор Adobe Photoshop — признанный лидер среди растровых редакторов, одна из лучших программ для создания и обработки фотографий для Internet.

Рекомендуется при подготовке фотографического изображения для сайта в Интернете или посылки по электронной почте, чтобы подготовленные вами изображения были минимального размера при максимальном качестве таких изображений. Как этого добиться? Оптимизацией фотографий в программе Adobe Photoshop!

Пример 9.1. Оптимизация изображения в программе Adobe Photoshop CS

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

1. В программе Adobe Photoshop откройте оригинал и выполните команду File (Файл) Save For Web (Сохранить для Веб).
2. В окне Save For Web (Сохранить для Веб) перейдите на вкладку Original (Оригинал) — рис. 9.1.
   

   
   увеличить изображение
   Рис. 9.1. Окно Save For Web, вкладка Original

   В этом окне видно, что оригинальное изображение Window.tiff имеет размер 3,55 Мб.
3. Теперь перейдите на вкладку 4-Up. Перед вами появится оригинал и результаты его оптимизации в соответствии с параметрами, установленными в данном окне по умолчанию (рис. 9.2).
   

   
   увеличить изображение
   Рис. 9.2. Варианты оптимизации изображения для веб
4. В данном окне оптимизированный формат файла – JPEG, а размер файла определяется качеством сохраняемой фотографии (Quality). Взгляните на строку состояния в окне документа. Там отображается текущий размер оптимизированного нами файла и оценка времени его загрузки при выбранной скорости модема (28,8 Кбит/сек).
5. Перед вами одновременно оригинал и несколько вариантов оптимизированного изображения. Имея перед глазами результат нескольких вариантов оптимизации, вы можете выбрать наиболее подходящий по соотношению Размер/Качество.
6. Выберите наилучший результат, т.е. минимальный размер файла без появления нежелательных артефактов ("грязи и шума" в изображении) и нажмите кнопку Save (Сохранить). Оптимизированная фотография будет сохранена на диск.

Итак, в результате оптимизации мы получили весьма существенный (48,92 Кб против 3,55 Мб) выигрыш в размере файла, сохранив приемлемое качество изображения. Но наилучшим ли способом проведена оптимизация? Может быть лучше использовать формат GIF? Рассмотрите этот вариант самостоятельно.