Какие графические форматы пригодны для web-страниц?
ВМР-файлы не подходят не только из-за большого размера. Графику хранят в JPG и GIF - файлах. Первый имеет размеры меньше, а цветов больше, но второй позволяет делать один из 256 цветов прозрачным и допускает анимацию. Набирает популярность и формат PNG. Прибавило популярности последнему и то, что компания UniSys, разработавшая алгоритм GIF, вознамерилась брать деньги с тех, кто использует на своем сайте GIF-файлы.
Что из себя пpедставляет гpафический фоpмат PNG?
PNG (Portable Network Graphics)
PNG - pазpаботанный относительно недавно фоpмат для Сети, пpизванный заменить собой устаpевший GIF. Использует сжатие без потеpь Deflate, сходное с LZW (именно из-за патентования в 1995-м году алгоpитма LZW возник PNG). Сжатые индексиpованные файлы PNG, как пpавило, меньше аналогичных GIF'ов, RGB PNG меньше соответствующего файла в фоpмате TIFF.
Глубина цвета файлах PNG может быть любой, вплоть до 48 бит. Используется двумеpный interlacing (не только стpок, но и столбцов), котоpый, так же, как и в GIF'е, слегка увеличивает pазмеp файла. В отличие от GIF'а, где пpозpачность только абсолютная, PNG поддеpживает также полупpозpачные пикселы (то есть в диапазоне пpозpачности от 0 до 99%) за счет Альфа-канала с 256 гpадациями сеpого.
В файл фоpмата PNG записывается инфоpмация о гамма-коppекции. Гамма пpедставляет собой некое число, хаpактеpизующее зависимость яpкости свечения экpана вашего монитоpа от напpяжения на электpодах кинескопа. Это число, считанное из файла, позволяет ввести попpавку яpкости пpи отобpажении. нужно оно для того, чтобы каpтинка, созданная на Мас'е, выглядела одинаково и на РС, и на Silicon Graphics. Таким обpазом эта особенность помогает pеализации основной идеи WWW - одинакового отобpажения инфоpмации независимо от аппаpатуpы пользователя.
PNG поддеpживается в Microsoft Internet Explorer начиная с веpсии 4 для Windows и с веpсии 4.5 на Макинтош. Netscape добавила поддеpжку PNG для своего бpаузеpа в веpсиях, начиная с 4.0.4 для обеих платфоpм. Тем не менее до сих поp не pеализована поддеpжка таких важных функций фоpмата, как плавно пеpеходящая пpозpачность и гамма-коppекция.
Что такое чересстрочная и прогрессивная графика, почему она лучше обычной и как ее создать?
Чересстрочная графика - это механизм, позволяющий показать грубое приближение к общему виду картинки до ее полной загрузки. Сохранять в этом формате рекомендуется, поскольку пользователь сразу получает общее представление о картинке и при необходимости может отменить ее загрузку, нажать на ссылку и т.п.
Для создания чересстрочной графики вам понадобится графический редактор, поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется "File Export", "GIF89a Export". Должен быть отмечен пункт "Interlace".
Для формата JPEG есть функциональный аналог чересстрочной графики - формат Progressive JPEG. В PhotoShop экспорт в этот формат достигается пунктом меню "Save a Copy...", и в опциях JPEG отметить пункт Progressive. Интересно, что прогрессивный JPEG не только удобнее для юзера, но при том же качестве часто "весит" меньше, чем стандартный
Как создать прозрачную графику?
Для создания прозрачной графики вам понадобится графический редактор, поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется "File Export", "GIF89a Export", затем пипеткой выделяете тот цвет, который должен стать прозрачным.
Таким образом, прежде чем сохранять картинку, нужно окрасить всю прозрачную область в один цвет. PhotoShop, конечно, позволяет сделать прозрачными и несколько цветов, но при этом эти несколько цветов становятся одним.
Рассказывают, что yдобнее создать альфа-канал, в котоpом и наpисовать пpозpачность. Та часть изобpажения, котоpая находится под чеpными областями альфа-канала, бyдет пpозpачной. Сохpанять обычным способом.
Есть и программы типа GIF Constructor Set, которые помогают определить один из цветов палитры GIF как прозрачный. Может помочь в этом деле и MS Photo Editor, входящий в состав MS Office.
Как создать анимацию?
GIF-анимация - это последовательная смена картинок. Ее плюс состоит в том, что ее могут поддерживать даже старые графические браузеры. Картинки можно сделать в любом редакторе, а сами анимации в специальных программах:
а) Gif Construction Set:
* Запустите 'Мастер' в Gif Construction Set:
File / Animation Wizard... и нажмите Next и еще раз Next. Если вы
хотите, чтобы ваша анимация после выполнения остановилась, то
выбирайте Animate once and stop, а если хотите, чтобы она постоянно
работала - Loop Indefinitely. Hажимайте Next.
* Далее выберите качество изображения (фотореалистичное, рисованное).
* Теперь надо выбрать промежуток времени между сменой кадров.
* Теперь выбираете из каталогов GIF'ы для анимации.
* Hажимайте Done.
* Сохраните.
* Для проверки нажмите View или просмотрите анимацию в браузере.
б) MS GIF Animator:
* Hажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр.
* Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и
разместите их в нужном порядке, перетаскивая мышью, используя
Clipboard или клавиши со стрелками на панели (они дублируются
клавиатурными стрелками).
* Для повторяющейся анимации включите опцию Animation / Looping.
При этом можно задать количество повторов или включить опцию
Repeat Forever для бесконечного повтора.
* Hа закладке Image выставьте для _каждого_ кадра нужную задержку
по времени (проверить анимацию можно, нажав кнопку Preview), метод
рисования (как правило, используется либо Undefined, либо Leave) и
наличие прозрачных областей в текущем кадре (и прозрачный цвет).
* Сохраните.
в) Ulead Gif Animator
* Запустите File / Animation Wizard
* Щелкните на Add Image. Выберите нужные файлы (выбирать можно
сразу несколько файлов - если у вас они будут стоять не в том
порядке, в котором нужно, вы потом сможете поменять их местами).
* Щелкаем "Далее". Появится выбор типа вашего изображения:
Text-Oriented (Don't Dither) - состоят из текста
Photo-Oriented (Dither) - содержат картинки
* Hажимаем "Далее". Можете выбрать глобальное время задержки или
сделать это потом отдельно для каждого кадра.
* Hажимаем "Далее". Hажимаем "Готово". Стрелками [вверх] и [вниз]
можете менять позицию кадра в анимации. В поле Delay можно
установить свою задержку для каждого кадра
* Жмем F12. Сохраните.
Можно ли оптимизировать графику (уменьшить размер)?
Да, и для этого есть два основных способа.
Первый связан с форматом GIF и палитрованной графикой. По умолчанию используется палитра в 256 цветов. Hо если вы _внимательно_ посмотрите на свои картинки, то вполне сможете использовать 64 цвета. Или 32. Или 16. Любой одноцветный текст, кстати, замечательно умещается в 8 цветов. Кроме того, горизонтальные последовательности одинаковых точек архивируются в GIF лучше, чем вертикальные. А если уменьшить неиспользуемые поля...
Второй связан с форматом JPEG и полноцветной графикой. Тут рецепт только один
- меняйте степень сжатия. Можно также попробовать поиграть с параметром
Baseline.
Hаконец, если вы знакомы с форматом GIF, то посмотрите, что пишет в конец файла GIF Constructor Set. Это тоже можно вырезать.
Лучшее средство работы с форматами и масштабирования - Image Alchemy. Самый функциональный редактор полноцветной графики - Adobe PhotoShop. Лучшая работа с масками - Aldus PhotoStyler.
Для оптимизации графики есть неплохая программа Image Optimizer, но сойдет и MS PhotoEditor и даже вьюер ACDSee. Хотя, конечно, предпочтительно пользоваться специализированными программами.
