Глава 6. Работа с графикой

Все мы с детства больше любим читать книжки, в которых есть картинки. А когда вырастаем - смотреть интернет-сайты с картинками. Некоторые люди только для того и заходят в Интернет, чтобы посмотреть весёлые картинки. Но Бог с ними, мы ведь не собираемся размещать на своём сайте кучу картинок только для того, чтобы повеселить народ: посещаемость, может быть, и поднимется, но продаваемость - вряд ли... Однако бывают ситуации, когда не использовать на сайте фотоизображение просто невозможно. Например, логотип. Или схема проезда к офису.

Задача распадается на две части: создание и подготовка изображения к интернет-публикации; помещение изображения в определённое место html-страницы.

Наиболее известным профессиональным редактором (точечных) изображений является Adobe™ Photoshop. Программа стоит дорого, а нам потребуется для решения наших задач очень немного функций графического редактора, поэтому вы можете использовать любую другую программу, обладающую необходимыми возможностями. Однако идеологию подготовки изображений для Интернета мы будем излагать именно на примере Photoshop'а.

Есть, кстати, простая возможность получить совершенно легально копию Photoshop'а без денег. Например, у ваших знакомых дизайнеров или вообще любых сотрудников рекламных агентств (не говорите, что у вас нет таких знакомых - сейчас половина городского населения продаёт, а вторая половина рекламирует всякие товары и услуги). Легальность возникает вот откуда: Photoshop, как и все компьютерные программы, постоянно развивается, за 10 лет сменилось примерно 5-6 его версий - от «3» до «8». В рекламных агентствах никто не работает сегодня на версии 5 (везде стоят 7 или 8), но ведь от этого агенства не перестали быть правообладателями морально устаревшей версии! Вот её и можно у них выпросить - она им всё равно не нужна, а для наших задач (да, по-правде сказать, и для большинства задач современной рекламы) вполне хватает возможностей Photoshop'а 5.0.

Создание и подготовка изображений

У многих предприятий существуют фирменные бланки и логотипы. Одна из самых важных задач при начале новой деятельности (и при изготовлении интернет-сайта тоже) - определить, что вы сможете делать самостоятельно, а что придётся поручить специалистам. В первой и второй частях книги я пытался показать, что браться за изготовление простых html-страниц любой человек может смело - изготовленные неспециалистом, они вполне могут быть функциональными и приносить реальную пользу. В этой части я так же категорически советую вам не пытаться делать логотипы кустарным способом. Если у вас нет логотипа и вы хотите, чтобы он был, вам следует поручить его разработку профессиональному дизайнеру. И в детали этого сложного и многострадального процесса мы здесь вдаваться не будем (например, что считать хорошим логотипом, а что - плохим).

То же самое и со схемой проезда: или вы поручите профессиональному дизайнеру (ну, не такому профессиональному, конечно, как изготовитель логотипов, - работа по изготовлению схемы существенно дешевле) вычертить её «с нуля», или дадите ему кусок крупномасштабной карты города и попросите отсканировать его и «вычистить» изображение.

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

Главная особенность свежеизготовленного логотипа (или схемы проезда к офису) - такое разрешение, при котором они будут хорошо выглядеть на печати. То есть полиграфическое (разрешение) - не менее 300 dpi (dot per inch - точек на дюйм). В этом случае размер файла обычно никого не интересует, и для схемы проезда с линейными размерами 6 х 4 см, например, он может достигать 300-400 Кб, что для Интернета совершенно недопустимо - для него даже картинка 30-40 Кб слишком велика, и может быть использована лишь в крайнем случае.

Размеры картинок для Интернета измеряются уже не в точках на дюйм, а просто в точках. В экранных точках. Обычный экранный стандарт - 800 х 600 точек. Новые мониторы позволяют устанавливать больший размер экрана: 1024х768, 1280х1024... Но Интернет в этом отношении консервативен, и 800х600 просто следует принять за аксиому. Предполагая, что схема проезда не будет занимать всю рабочую область окна html-страницы, будем планировать её ширину в 400 точек (pixels). Высота должна уменьшиться пропорционально.

Открываем в Photoshop'е полученную от дизайнера схему в формате tiff (файл karta1.tif), перед началом манипуляций задаём цветовую модель CMYK (или убеждаемся, что она уже установлена):

Модель CMYK нужна для того, чтобы, во-первых, гарантированно убрать все режущие глаз, неестественно-яркие, флуоресцирующие оттенки, и, во-вторых, при дальнейших преобразованиях картинки (масштабирование, возможно, изменение контрастности...) модель CMYK более корректно преобразует цвета. Теперь можно изменить размер картинки, меню Image - Image Size:

задаём размер, как планировали: ширина - 400 pixels, высота изменится пропорционально (это произойдёт само собой, если будет стоять галочка против пункта Constrain Proportions).

Дальше нужно подготовить картинку к сохранению в Интернет-формате GIF. Основной момент такой подготовки - изменение цветовой модели с CMYK на Индексированный цвет. Модель Indexed Color позволяет задать любое количество возможных цветов для одной точки, например, два: чёрный и белый - тогда картинка получится резко контрастная, графическая, без цветовых переходов. Но мы не всегда можем произвольно изменять количество цветов, есть предел, за которым картинка изменится до неузнаваемости, и есть более мелкие градации потери качества.

Эта проблема - Сцилла и Харибда подготовки Интернет-изображений: одна крайность - большой размер файла, другая крайность - плохое качество. Попытаемся найти золотую середину. Изначально наша карта выглядела примерно так (файл img\karta1.gif):

В книге картинка выглядит чёрно-белой; чтобы увидеть реальные цвета, откройте на сайте, прилагаемом к книге, папку Img (или скачайте приводимые здесь примеры со страницы omne/img). Мы немного уменьшили её размер, теперь начнём подбирать цветовую модель. Сначала из CMYK её надо перевести в RGB (напрямую в Индексированный цвет невозможно):

Затем - в Indexed Color:

В Palette выберите Local (Adaptive), тогда появится возможность поставить произвольное количество цветов. Вопрос - сколько именно? Видно, что на картинке их очень немного: нет плавных переходов от одного цвета к другому, и всего несколько разных оттенков. Предположим, что 8 цветов достаточно, и поставим эту цифру против Colors:

Картинка изменилась слишком резко! Мы утратили много функционально важных оттенков. Попробуем, например, 32:

Цвета, вроде, нормальные, завершим преобразование («OK»), и сохраним файл в формате CopuServe (GIF) - меню File - Save As:

Сохраним полученную картинку под именем karta32.gif. Теперь если мы посмотрим размер полученного файла (в каталоге, в котором лежат картинки, щёлкните правой кнопкой мыши по файлу karta32.gif и выберите пункт «Свойства»), то увидим, что он уменьшился с 56 Кб (в karta1.gif) до 39 Кб. Уже лучше, но до совершенства ещё далеко. Загружаем снова в Photoshop файл karta1.gif; вернём обратно цветовую модель RGB, попытаемся перевести опять в Indexed Color. Поэкспериментировав немного с количеством цветов между 8 и 32, найдём более-менее приемлемый вариант - 10 (с незначительными потерями оттенков):

Сохраним файл под именем karta10.gif. Смотрим размер - 17 Кб. Сильнее оптимизировать картинку с помощью простого перебора цветов невозможно. Тут думать надо. Открываем опять полученную упрощенную картинку karta10.gif, возвращаем модель RGB, пытаемся уменьшить количество цветов (при преобразовании в Indexed Color). При очень внимательном наблюдении можно заметить, что если установить число цветов в 5, то мы потеряем только один важный оттенок - красный цвет у большого числа «31». В данном случае оказывается возможным обмануть неблагоприятные обстоятельства.

Для начала отступим назад (нажмём кнопку Cancel - «Отмена»). Затем коснёмся красной цифры 3 инструментом Eyedropper (Пипетка):

Один из квадратов на панели инструментов окрасится при этом в красный цвет. Переведём затем картинку в Indexed Color с числом цветов «5» и с потерей красного цвета. Затем переведём цвет картинки обратно в RGB. Далее, инструментом Magic Wand (волшебная палочка) коснёмся сначала цифры «3», а потом, удерживая нажатой клавишу Shift, и цифры «1» - обе цифры при этом выделятся «бегущими муравьями»:

Если выделятся не только цифры, вам придётся «похимичить» с настройками инструмента Magic Wand (настройки прямо над картинкой, под основными пунктами меню Photoshop): обязательно поставить галочку против слова Contiguous, может быть, увеличить или уменьшить значение Tolerance. Когда, наконец, выделение желаемой области будет достигнуто, нажмите сочетание клавиш Alt+BackSpace - выделенная область будет залита тем же цветом, который выбран на квадрате палитры инструментов - то есть красным.

Переведите затем картинку в модель Indexed Color с числом цветов 6 (мы вручную добавили один цвет - красный!) и сохраните под именем karta6.gif. Вот что у вас должно получиться:

По-моему, красота! Почти все оттенки первоначальной картинки сохранены (изменения довольно трудно уловимы), а размер файла стал - 5 килобайт!

Может, вы и не захотите так подолгу возиться с каждой картинкой для своего сайта, как это делаю я. Но, по крайней мере, когда вы поручите эту работу специалисту, он уже не сможет парить вам мозг, объясняя, что для схемы проезда 400х260 px размер файла GIF не может быть меньше 20 Кб. И ещё: не позволяйте специалисту портить картинки jpeg-компрессией! Ну... только в самом крайнем случае... Например, в таком:

Как видно из примера, даже максимальное число цветов (255), с которым сохранена картинка из клипарта (коллекции фотоизображений) CorelXara™, не позволяет показывать её народу в формате GIF: слишком много цветовых переходов, и границы между ними отображаются слишком резко. Размер этого файла (xaraballs.gif в каталоге img) - 65 Кб. Существуют определённые методики оптимизации цветовых переходов для сохранения индексированных изображений. Например, dither: Noise. Сохранённая из Photoshop'а по этой методике, та же картинка будет выглядеть так:

Это уже намного лучше, но размер файла (105 Кб), к сожалению, в этом случае не оправдывает усилий. Проблему позволяет решить формат jpeg: файл (при сохранении с качеством «8» в Photoshop'е) получается размером в 47 Кб (xaraballs.jpg), а выглядит вот как:

При сохранении в формате jpeg происходит некоторая потеря качества изображения (на первый взгляд, незаметная). Поэтому следует помнить, что сохранять картинку из исходного файла tiff или psd в формат jpeg можно только один раз, в самом конце подготовки, потому что с каждым открытием и сохранением заново, к картинке заново применяется алгоритм jpeg-компрессии, которая всё больше и больше будет искажать содержание.

Прибегать к jpeg-компресии приходится чаще всего при сохранении фотоизображений (например, людей). Логотипы же, всякие мелкие значки (пиктограммы), рисованные схемы (и вообще всё рисованное, а не сфотографированное) почти всегда можно подготовить к публикации в Интернете в формате gif. Вот пример логотипа - линейные размеры на странице довольно большие, а размер файла gif всего 5 Кб:

Вот пример сохранения файла gif с разным количеством цветов (значок программы Outlook Express):

64 цвета - режим так называемых «полноцветных значков» Windows. Картинка увеличена до размера чёткой видимости экранных пикселов - квадратиков разного цвета, в Photoshop'е легко можно увеличить масштаб картинки (Ctrl+'Серый плюс'), чтобы увидеть пикселы;

32 цвета: видно только одно отличие от 64-цветной модели - красный квадрат не разделён по диагонали;

13 цветов: на стрелках сверху и снизу уже явственно видно «вырождение» цветов;

3-4 цвета - практически предельное упрощение цветовой модели (красный квадратик добавлен позже, искусственно). А так значки с разным количеством цветов выглядят на экране (без искусственного увеличения):

Разницы в качестве почти не видно, что даёт возможность существенно уменьшать количество цветов и, соответственно, размеры файлов.

Вставка изображений в html-страницу

Будем исходить из того, что вы, работая с первой главой II части, создали на диске c: каталог c:\www и записали в него локальную копию своего сайта (то есть все файлы, которые вы хотите сделать доступными пользователям Интернета). Вы также, наверное, настроили вид папки так, чтобы видеть расширения файлов (html, css, gif...) и чтобы файлов в окне помещалось как можно больше (вид - «Список»).

Скопируйте в этот же каталог и картинку, которую вы бы хотели поместить на свою главную страницу index.html (или любую другую страницу). Мы, для примера, скопируем туда логотип фирмы Омниа меа - файл omni.gif:

Код, с помощью которого картинка станет видимой на html-странице, таков:

<img src="../img/omni.gif" alt="Торговая группа Omnia mea">

Поместим этот код в самое начало страницы, непосредственно после мета-тэгов и перед первым абзацем. Тогда наша «навигационная панель» со ссылками на другие страницы сдвинется вниз, картинка вытеснит её. Для симметрии лучше сразу поместить код картинки во все остальные страницы, а перед группой ссылок добавить тэг

(чтобы текст не прилипал к картинке):

...<img src="../img/omni.gif" alt="Omnia mea">

<a href="index.html">Главная</a>

<a href="address.html">Адреса</a>

<a href="requisit.html">Реквизиты</a>

<a href="pricelist.html">Прайс</a>

<a href="history.html">История</a>...

А в конец страницы address.html добавим ещё и код для показа схемы проезда к офису (зря мы, что ли, так старательно обрабатывали карту!):

Схема проезда к офису:

<img src="../img/karta6.gif" alt="Торговая группа Omnia mea: схема проезда к офису">

(Не забудьте также скопировать файл karta6.gif из папки img сайта в папку c:\www. Или, для вашего собственного сайта, схему проезда к вашему офису).

ex08 Файлы примеров: img1 (img1)

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

Атрибут alt

Подержите мышку над картинкой на странице - и увидите всплывающую надпись с текстом атрибута alt. Атрибут alt у элемента картинки img имеет два важных назначения.

Пользователь должен иметь возможность увидеть простой текст, описывающий картинку, потому что картинка не всегда (правильно) отображается на странице при просмотре:

например, вы вставили коды картинки в html-страницы, а файл gif забыли скопировать на сервер;
или файл картинки слишком долго загружается, и пользователь переходит на следующую страницу, не успев рассмотреть изображение;
или пользователь вообще отключил показ картинок в своём интернет-обозревателе - многие опытные пользователи именно так и делают при наличии медленной связи и необходимости быстро просмотреть большое количество материала;
бывают «текстовые» интернет-обозреватели, которые в принципе не могут отображать картинки.

Атрибут alt привлекает внимание поисковых систем к записанным в нём словам - именно поэтому мы написали в последнем случае не просто «Схема проезда к офису», а «Торговая группа Omnia mea. Схема проезда к офису» - чтобы лишний раз напомнить поисковому роботу о словах, по которым нас должны искать посетители. В связи с этим, атрибут alt у логотипа фирмы должен быть разным на разных страницах сайта: если, например, тематика нашего прайс-листа - холодильное оборудование, то на странице с прайс-листом надо и к подписи логотипа фирмы добавить соответствующие слова: «Торговая группа Omnia mea. Холодильное оборудование».

Очень часто коду картинки добавляют ещё атрибуты ширины и высоты, а также нулевое значение для толщины рамки: <img src="../img/omni.gif" alt="Omnia mea" border="0" width="400px" height="66px">.

Нет смысла скрывать от вас эти печальные факты или обходить их в этой книге молчанием: вы легко можете всё это обнаружить, взглянув на html-код практически любой страницы в Интернете. Поэтому счас мы всё это разъясним. Вернее, всё, но не всё - сейчас: об атрибуте border речь пойдёт в следующей главе: там вы узнаете, что совершенно не обязательно задавать значение атрибута каждой конкретной картинке, а можно сделать это один раз в правиле CSS, сразу для всех картинок страницы, а то и всего сайта.

Что же касается ширины и высоты, тут дело обстоит немного сложнее: среди специалистов бытует мнение, что явная установка этих атрибутов ускоряет загрузку картинки на экран. Это несколько упрощённая модель событий: на самом деле явное указание ширины и высоты картинки ускоряет появление на экране пустого прямоугольника под будущую картинку. Это бывает важно, если картинка участвует в каком-то общем сложном дизайне страницы не просто как украшение, но как необходимый элемент конструкции - тогда её первоначальное отсутствие на странице (или полная недоступность) будет разрушать структуру страницы, а пустой прямоугольник поможет сохранить эту структуру. На нашем сайте никакой такой сложной дизайнерской конструкции нет, поэтому явное обозначение высоты и ширины картинок не обязательно.

Глава 6. Работа с графикой