Из сказанного можно сделать следующие выводы. JPEG'ом лучше сжимаются растровые картинки фотографического качества, чем логотипы или схемы - в них больше полутоновых переходов, среди же однотонных заливок появляются нежелательные помехи. Лучше сжимаются и с меньшими потерями изображения с высокой резолюцией (200-300 и более dpi), чем с низкой (72-150 dpi), т.к. в каждом квадрате 8х8 пикселов переходы получаются более мягкие за счет того, что их (квадратов) в файлах высокого разрешения больше. В JPEG'е следует сохранять только конечный вариант работы, потому что каждое пересохранение приводит к все новым потерям (отбрасыванию) данных и превращения исходного изображения в кашу. Как это ни парадоксально, возможности алгоритма сжатия JPEG реализованы в формате JPEG не полностью.

Для примера посмотрите на изображения внизу. В формате Gif эта картинка занимает 256 байт, в JPEG - 4,055 байт (при 50%-м сжатии), в Bmp - 21,816 байт.

При почти одинаковом качестве размер этой картинки в JPEG 3,046 Кб (при 50%-м сжатии), в Gif - 8,625 Кб (256 цветов), в Bmp - 38,478 Кб.
Одним словом вся оптимизация изображений в формате JPEG сводится к подбору оптимального коэффициента сжатия. Изображение в формате Jpeg при разных степенях сжатия - 100%, 50%, 0%. Размер при этом составил 987 байт, 2,340 байт и 10,182 байт соответственно.

Очень полезным может быть использование прогрессивной развертки. Если при записи картинки в обычном JPEG вывод на экран осуществляется строками, то прогрессивное JPEG-изображение появляется на экране сразу целиком, но в грубом виде. По мере загрузки файла дефекты постепенно сглаживаются. Это дает посетителям возможность сразу же оценить фотографию и решить, стоит ли дожидаться ее загрузки.

Как же все это реализовано в Photoshop? Жми Alt+Ctrl+Shoft+S (Сохранить для Web). На панели Setting в ниспадающей вкладке выберите jpeg. Функция quality собственно и регулирует коэффициент сжатия. Меняя сжатие, в рабочем окне вы увидите, как качество картинки ухудшается при его увеличении и наоборот. Для более жесткой настроки сжати можно просто выбрать один из вариантов (Low, Medium, High, Maximum) Регулятор blur задает степень смазывания (при небольших значениях объем картинки может ненамного уменьшиться). Поставив голочку в поле progressive вы даете добро на использование прогрессивной развертки. Меняя все эти параметры в нижнем левом углу вы увидите как меняется размер файла и время его загрузки. Одним словом к каждому случаю надо подходить индивидуально, не бойтесь экспериментировать.

Графика для Web (gif)

Первая версия графического формата Gif (Graphics Interchange Format) была разработана в 1987 году специалистами компьютерной сети CompuServe в качестве простого растрового формата для обмена рисунками в сети. Через некоторое время у данного формата выявился ряд недостатков, тормозящих его эффективное использование. В 1989 году была разработанна новая версия формата Gif (Gif89a).

Формат Gif применяет те же алгоритмы сжатия, что и обычные программы-архиваторы, поэтому при записи и считывании Gif-изображения никаких потерь информации не происходит. Однако в отличии от них Gif-файлы архивируются и разархивируются автоматически.

В формате GIF следует сохранять:
- кнопки и другие элементы навигации;
- тексты, оформленные в виде изображения;
- скриншоты (обратите особое внимание - их ни в коем случае нельзя сохранять в формате JPEG);
- любые изображения с малым количеством цветов и плавных цветовых переходов.

Полезное свойство формата GIF- поддержка черезстрочной развертки (Interlaced). При загрузке черезстрочного GIF-изображения браузер сначала показывает каждую восьмую строчку, затем каждую четвертую и т.д. В таком случае посетитель сайта сможет понять, что изображено на картинке, не дожидаясь ее полной загрузки. В некоторых ситуациях это бывает удобно, так что при сохранении GIF-файлов стоит всегда включать поддержку черезстрочной развертки.

При создании изображения, которое в последующем будет переведено в GIF формат, следует учитывать следующую особенность алгоритма LZW сжатия. Степень сжатия графической информации в GIF зависит не только от уровня ее повторяемости и предсказуемости (однотонное изображение имеет меньший размер, чем беспорядочно "зашумленное"), но и от направления, т.к. сканирование рисунка производится построчно. Это хорошо видно на примерах GIF-файлов с разным направлением полосок . Файл с горизонтальными полосками имеет размер 369 байт, а с вертикальными полосками 883 байт (в 2,4 раза больше!).

В GIF'e можно назначить один или более цветов прозрачными, они станут невидимыми в интернетовских браузерах и некоторых других программах. Прозрачность обеспечивается за счет дополнительного Alpha-канала, сохраняемого вместе с файлом. Кроме того, файл GIF может содержать не одну, а несколько растровых картинок, которые интернетовские браузеры могут подгружать одну за другой с указанной в файле частотой. Это называется GIF-анимация. Основное ограничение формата GIF состоит в том, что цветное изображение может быть записано только в режиме 256 цветов.

Как показывает опыт, для нефотографических изображений в большинстве случаев 256 являются избыточными. Удаляя информацию о лишних цветах из изображения, мы тем самым уменьшаем его размер. Теоретически мы можем использовать любое количество цветов в диапазоне от 1 до 256, но на практике лучше выбирать данное значение из следующего ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для хранения цветовой информации всегда используется целое число бит (от одного до восьми на один). Приведу такой пример: если Вы используете в рисунке только 50 цветов, для сохранения одного пикселя все равно будет использовано шесть бит. Размер конечного файла будет таким же, как и в случае использования палитры из 64 цветов. Ориентация на приведенный выше ряд позволит Вам создать более качественные компактные изображения.

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

Фактически оптимизация каждого конкретного изображения заключается в подборе наиболее подходящего количества цветов. Здесь стоит упомянуть о так называемом дизеринге (dithering) цветов. Представим, что у Вас есть палитра, содержащая синие и желтые цвета, а нам надо получить отсутствующий в ней зеленый. В это случае мы можем составить его из синих и желтых точек, чередуя их на рисунке. При взгляде издалека будет казаться, что мы видим чисто зеленый цвет. использование дизеринга при сохранении изображений в формате GIF может дать очень хороший результат, но к сожалению дизеринг крайне отрицательно сказывается на размере конечного файла. Именно поэтому целесообразность применения дизеринга стоит определять в каждом конкретном случае. Данный параметр регулируется движком dither.

Графика для Web (png)

Формат PNG (Portable Network Grafics) был разработан в качестве альтернативы Gif формату и существует в двух вариантах PNG-8 и PNG-24. В отличии от последнего он позволяет сохранять всю цветовую информацию и информацию об альфа-каналах масок и слоев. Это чрезвычайно сжатый RGB-формат, в котором используется схема сжатия без потерь. На сегодняшний день это наиболее перспективный Web-формат, обладающий мощными возможностями, которые наиболее ярко проявляются при его сопоставлении с форматом Gif:

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

Как правило, файлы в формате PNG-8 по размеру выигрывают у аналогичных изображений в формате GIF, примерно в два раза. Порядок оптимизации GIF-изображений в полной мере применимы и к PNG-8.

Формат PNG-24, подобно JPEG, может использоваться для хранения полноцветных изображений. Но, в отличии от JPEG, PNG использует сжатие без потерь, поэтому его, как правило, применяют для сохранения изображении, качество которых очень важно. Существенным недостатком PNG-24 является сравнительно больший чем у JPEG размер конечного файла при сравнимом качестве.

В PNG формате используется более эффективный алгоритм черезстрочности. Достаточно сказать, что первый проход, дающий общее представление об изображении, занимает в нем лишь одну шестьдесят четвертую файла по сравнении с одной восьмой в Gif. Тем не менее, распознаваемость картинки при этом заметно лучше.

В отличии от двух градаций прозрачности, поддерживаемых Gif форматом, PNG позволяет хранить полную информацию о степени прозрачности каждой точки изображения с помощью специального альфа-канала. Таким образом, каждый пиксел PNG-файла, вне зависимости от его цвета и местоположения, может иметь любое значение непрозрачности от нулевой (полная прозрачность) до абсолютно непрозрачной.

Возможность использования гамма-коррекции. Это свойство используется для сглаживания яркости дисплеев различных типов компьютеров и, соответственно, между создаваемыми на них изображениями. Дело в том, что PNG-формат позволяет хранить в файле коэффициент яркости дисплея, на котором было создано изображение. Впоследствии это обеспечивает возможность автоматической коррекции яркости изображения в соответствии с параметрами данной видеосистемы.