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

Оптимизация - это процедура выбора такого формата, разрешения и парамет­ров качества, при которых изображение становится эффективным, приятным для восприятия и полезным на страницах, просматриваемых в web-браузере. Говоря простыми совами, это подбор оптимального соотношения между разме­ром файла и качеством изображения. Ни один набор параметров не может быть оптимальным для всех типов графических файлов; оптимизация требует сооб­разительности и хорошего вкуса.

В зависимости от формата, выбранного для сохранения файла, становятся дос­тупными различные параметры сжатия. Наиболее популярными форматами яв­ляются форматы JPEG и GIF. Формат JPEG был разработан с целью сохранения широкого спектра цветов и тонких оттенков многоцветных изображений, та­ких как фотографии. Этот формат позволяет использовать для представления иллюстраций миллионы разных цветов. Формат GIF оптимален для сжатия изображений, состоящих из основных цветов и изображений, включающих час­то повторяющиеся цвета; к таковым относятся контурные рисунки, логотипы и изображения с текстом. Указанный формат применяет для представления изоб­ражений 256 цветов и поддерживает прозрачность фона.

Программа Photoshop предоставляет широкий набор элементов управления сжа­тием размеров графических файлов при оптимизации качества их экранного представления. Обычно, оптимизация изображений осуществляется перед их сохранением в HTML-файлах. С этой целью используется диалог Save For Web And Devices (Сохранить для web и устройств), позволяющий сравнивать исход­ное изображение с одним или несколькими сжатыми изображениями и изме­нять во время этого сравнения настройки сжатия. Дополнительные сведения о форматах JPEG и GIF можно найти в справке по программе Photoshop.

1 Открыв файл в формате JPEG или GIF в программе Photoshop, выберите ко­манду меню File ♦ Save For Web And Devices (Файл ♦ Сохранить для web).

2 В появившемся диалоге Save For Web And Devices (Сохранить для web и уст­ройств) щелкните на вкладке 4-Up (4 варианта). Левая верхняя область прос­мотра отображает исходное изображение. Программа Photoshop автомати­чески генерирует представления файла .JPEG высокого, среднего и низкого качества или три представления файла GIF различного качества.

3 Сравните качество и размеры иллюстраций, а потом щелкните мышью на од­ном из эскизов, чтобы поэкспериментировать с настройками формата и ка­чества, оценивая соотношение размер/качество.

4 Выбрав подходящий вариант, щелкните либо на кнопке Cancel (Отмена), ли­бо на кнопке Save (Сохранить), чтобы сохранить файл под новым именем.

Добавление интерактивности

Если вам раньше хотелось иметь возможность увеличивать масштаб отображения всего изображения или интересующих вас частей, то теперь такая возможность существует. С помощью программы Photoshop CS3 вы можете создавать интерак­тивные изображения с возможностью изменения масштаба отображения, кото­рая может быть использована в любом web-браузере.

С помощью технологии Zoomify вы можете публиковать изображения с высоким разрешением в Интернете, а пользователи могут панорамировать и изменять масштаб отображения таких изображений для более детального просмотра. Базовое изображение загружается за такое же время, что и JPEG-файл эквива­лентного размера. Программа Photoshop экспортирует необходимые JPEG-файлы и HTML-файл, которые вы можете выгрузить на свой web-сайт.

1 В окне программы Bridge дважды щелкните на папке Lesson 12 в области предва­рительного просмотра, затем дважды щелкните на папке 12Start и, наконец, дважды щелкните на файле Card.jpg, чтобы открыть его в программе Photoshop.

Этот файл представляет собой большое растровое изображение, которое вы экс­портируете в HTML-файл с использованием технологии Zoomify. Сейчас вы преобразуете изображение ангела в файл, который будет связан с од­ной из ссылок, созданных вами на домашней странице сайта.

2 Выберите команду меню File ♦ Export ♦ Zoomify (Файл ♦ Экспортировать ♦ Zoomify).

3 В появившемся диалоге Zoomify Export (Экспортировать для Zoomify) открой­те папку Lesson 12/12Start/Museo. В поле ввода Base Name (Базовое имя) вве­дите значение Card (Открытка). Для параметра Quality (Качество) установите значение 12; укажите размеры базового изображения при просмотре в браузе­ре пользователя - для параметра Width (Ширина) введите значение 600, а для параметра Height (Высота) - значение 400. Убедитесь, что флажок Open In web Browser (Открыть в web-браузере) установлен.

4 Щелкните на кнопке ОК, чтобы загрузить HTML-файл и изображения в vveb-браузер.

Сейчас вы проверите свою полностью готовую работу в web-браузере.

5 В окне программы Bridge щелкните на папке Lesson12 в области предвари­тельного просмотра, затем дважды щелкните на папке 12Start. и, наконец, дважды щелкните на папке Museo.

6 Щелкните правой кнопкой мыши (Windows) или, зажав клавишу Ctrl. щелкни­те мышью (Mac OS) на эскизе файла Card.html и в появившемся контекстном меню выберите команду Open With (Открыть с помощью). Выберите web-брау­зер, с помощью которого будет открыт файл формата HTML.

7 Используя элементы управления в окне программы Zoomify, проверьте воз­можность изменения масштаба отображения для изображения ангела.

Поздравляем! Теперь вы умеете создавать анимацию и добавлять интерактивность на web-страницу с использованием срезов, ролловеров и технологии Zoomify.