Опубликован: 27.05.2011 | Доступ: свободный | Студентов: 8316 / 1634 | Оценка: 4.07 / 3.85 | Длительность: 14:52:00
Специальности: Фотограф
Лекция 9:

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

Аннотация: Лучшие из ваших фоторабот вы можете попробовать опубликовать в прессе или разместить в Сети. В настоящей лекции освещен как вопрос размещения фото на сайте в Internet, так и правила подготовки изображений для полиграфических изданий. По обоим вариантам приведены практические примеры и советы. Цель лекции познакомить курсантов с подготовкой фотоизображений для Сети.
Ключевые слова: Интернет, модем, пользователь, компромисс, минимизация, Web, JPG, GIF, пиксел, Graphics, interchange format, U-кадры, Графический редактор, LZW, баннер, banner, JPEG, joint photographic experts group, масштабируемость, развертка, сканер, полиграфия, TIFF, PNG, альфа-канал, анимация, логотип, Internet, оптимизация, файл, save, originate, размер файла, quality, шумы, blur, размытие, гипертекст, электронный документ, аудит, гиперссылка, hypertext markup language, главная страница, сайт, HTML, word, текстовый процессор, текстовый редактор, WYSIWYG, SEE, GET, Internet Explorer, создание файла, тип файла, C, операции, тег, IMG, адрес, текущая директория, альтернативный текст, PAL, SECAM, download time, хостинг, пароль, WWW, сервер, FTP, FAR, home, enter, копирование, MP3, total, Command, file transfer protocol, chat, мегабайт, URL, меню, имя пользователя, upload, путь, INDEX, source file, encode, Windows, имя файла, binary file, Add, рейтинг, статистика, регистрация, поисковая машина, keyword, базы данных, словосочетание, перегрузка, слово, вероятность, DESCRIPTION, Поисковый система, submit, список, индексация, ресурс, информация, персональные данные, веб-сайт, справочная система

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

На сегодня жестких нормативов, регламентирующих физический размер изображений для Интернет и электронной почты нет. Тем не менее, большинство пользователей Сети придерживаются соглашения о том, что на "медленных' модемных линиях страница любого сайта, включая фотографии на ней, не должна превышать 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 (фото со сканера, цифровой камеры, сложные фракталы и т.д.).

ПРИМЕЧАНИЕ

Напомним, что в "Цифровое фото в числах" говорилось о том, что формат JPEG не пригоден для полиграфии, где главным форматом является TIFF.

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.

Таблица 9.1. Форматы графических файлов для Интернет
Формат Описание Применение
GIF Использует 256 цветов и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения без потерь. Формат широко используется для создания анимированных рисунков. Может содержать прозрачные области. Текст, логотипы, иллюстрации с четкими краями, анимированные рисунки, изображения с прозрачными участками.
JPEG Использует 16,7 миллионов цветов, поддерживает чересстрочную развертку. Любое изображение с количеством цветов более 256 (Фотографии; рисунки, содержащие прозрачные участки; рисунки с большим количеством цветов и четкими краями изображений).
PNG-8 Формат аналогичен GIF, однако поддерживается не всеми программами. Использует улучшенный формат сжатия данных. Аналогично GIF
PNG-24 Формат аналогичен JPEG, поддерживает 16 миллионов цветов. Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF сохраняет детали изображения, как, например, в простых рисунках, логотипах, или иллюстрациях. Аналогично JPEG

Adobe Photoshop для WWW

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

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

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

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

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

    увеличить изображение
    Рис. 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 (Сохранить). Оптимизированная фотография будет сохранена на диск.

ПРИМЕЧАНИЕ

Артефакты можно удалять размыванием изображения с помощью параметра Blur (Размытие). Но при размытии изображения частично теряется его резкость.

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

Марина Варавина
Марина Варавина

Курс несоответствует своей теме, заявленному названию... пример: "Какая из программ создания цифровых фотоальбомов имеет русский интерфейс?" ну как этот вопрос соотносится с основами фотографии?? Автор как будто вообще не знал, о чем сделать курс.

Егор Скрипко
Егор Скрипко

В 9 лекции автор учит как с помощью Word создать HTML страницу. Однако, Word категорически не рекомендуется использовать для создания веь-страничек потому что Word захламляет код страницы ненужными тегами. Для создания html-страниц лучше использовать Dreamweaver.

Николай Рашутин
Николай Рашутин
Россия
Сергей Гутько
Сергей Гутько
Россия, ВИУ, 2003