Самой важной целью, к которой нужно стремиться при создании изображений для интернет, конечно является объём результирующих файлов. К сожалению, не все создатели сайтов уделяют этому должное внимание. Согласитесь, что иногда приходится ждать и по три минуты, пока загрузится страница (если у вас конечно не выделенный канал). Меня, например, такие сайты крайне раздражают, и я обычно ухожу с них. Думаю, что негативные эмоции вызывают они и у вас.

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

Я не хотел бы сейчас касаться вопросов самого web-дизайна, а только работать с конкретной задачей: пусть у нас есть графический файл, и нам нужно как-то поколдовать над ним, дабы весил он не так много.

Так как этот урок относится и к Photoshop тоже, то мы будем учиться, как правильно оптимизировать графику на сайте, используя встроенные средства этого графического редактора. Основными форматами, используемыми в интернет, являются GIF, JPEG и PNG.

Формат GIF.

Этот формат является одним из самых старых. Он очень популярен, а всё потому, что объём файлов получается совсем небольшим. Но самый главный минус у него в том, что максимальное количество цветов равно 256. Тут сразу же отпадает возможность использования GIF при работе со сложными фотографическими изображениями. Однако все рисунки, созданные вручную, как правило, обладают достаточно малым количеством цветов, а потому именно для них и используется этот формат. Но есть и исключения: расположенное ниже фото тигра сохранено с количеством цветов всего 32. При этом довольно сложно сразу сказать, что цветов настолько мало. Тут конечно нет никаких фокусов, просто на картинке практически нет градиентных переходов. А цветов, которые человеческий глаз может отличить, и в исходном файле немного.

Изображение тигра в формате GIF, 32 цвета

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

Теперь перейдём к описанию средств, которые имеются в Photoshop для работы с GIF.

Выберите команду File\Save for Web (Файл\Сохранить для Web). Получить доступ к тем же самым операциям можно и в Adobe Image Ready через специальные палитры, но они полностью дублируют возможности команды Save for Web, а нам удобнее работать только в Фотошопе, не переходя при этом в другие приложения.

Окно Save for Web

В списке выбора формата нужно выбрать GIF, поскольку сейчас мы обсуждаем именно его. Самой важной опцией является алгоритм выбора цветов. Фактически выбирать тут есть смысл только из первых трёх: Perceptual, Selective, Adaptive. Как они работают, я вам сказать не могу, потому что в их поведении никак не могу увидеть закономерностей. По этой причине я бы всегда рекомендовал вам сравнивать объём файлов и качество, постоянно меняя настройки.

Выбор формата (слева) и алгоритм выбора цветов (справа)

Другой очень важной опцией является алгоритм смешивания — Dithering. Смысл его в следующем: если чередовать пикселы двух различных цветов, то когда смотрите издалека, вы увидите что-то среднее между этими двумя цветами. Так, чередуя чёрный с белым, получаем серый.

Список Dithering

Что касается параметра Colors (Цвета) , то в основном от него и зависит объём конечного изображения. Лучше используйте те значения, которые находятся в списке. Если вы вводите другое значение, то будьте готовы к неожиданностям. Увеличивая количество цветов, вы выигрываете в качестве, но проигрываете в объёме. Но и с этой опцией нужно экспериментировать. Сразу невозможно определить оптимальное соотношение качества и "веса" файла.

На вкладке Color Table (Таблица цветов) представлена таблица всех используемых цветов. Если вы не довольны тем, как Photoshop проделал свою работу, то вы можете сами удалить или добавить нужные цвета, хотя обычно в этом нет смысла.

Формат JPEG.

Jpeg обладает рядом преимуществ и недостатков по сравнению с GIF. Самым главным преимуществом является то, что в нём количество цветов практически не ограничено — 24 бит. А потому этот формат используется для сохранения и градиентных, и фотографических изображений, чего не способен сделать GIF.

Технология у JPEG следующая: картинка рассматривается блоками по 8х8 пикселов, в которых цвета усредняются. В результате объём файлов уменьшается в десятки раз, а качество при этом не ухудшается. Но при сохранении детализированных изображений ничего хорошего вы не увидите — на месте границ будут смазывания цветов, а изображение будет становиться нечётким.

Самым главным параметром при сохранении является качество. Лучше выбирать значения из этого списка. Всего возможны 4 значения. Low (низкое) и Maximum (Максимальное) практически никогда не используются. Но при создании очень важных и хорошо видимых элементов максимальное качество никогда не помешает, если конечно объём файла получается при этом не астрономический. Ниже приведены 4 варианта качества логотипа по порядку: Low (Низкое) — 1.4 КБ, Medium (Среднее) — 2.0 КБ, High (Высокое) — 4.1 КБ, Maximum (Максимальное) — 6.7 КБ.

Как видите, самым оптимальным из этих четырёх вариантов является High, поскольку и дефектов не видно, и объём небольшой.

Формат PNG.

У этого формата очень много преимуществ, но основная проблема в том, что он не поддерживается многими браузерами, поэтому предпочтение обычно отдаётся JPEG или GIF.

Как вы уже поняли, невозможно сразу определить, какие настройки следует применять к изображению. Выбор остаётся только один — нужно обязательно как можно больше экспериментировать. Только так вы сможете добиться хорошего результата. Но мой совет всем: если не удаётся получить нормальный результат, то лучше отказаться от этой картинки вообще, чем мучить посетителей невероятно длительной загрузкой.

Автор: Илья Зернин
Источник: http://artmania.narod.ru