Все графические элементы делятся на два глобальных типа: векторные и растровые(точечные).

Растровые рисунки(точечные)

Формируются набором точек(пикселей). Это похоже на то, как мозаичный рисунок собирается из отдельных одноцветных частиц. Взяв любую фотографию и увеличив до предельных размеров, вы увидите, что она состоит из отдельных цветовых квадратов. Обратным образом, уменьшив масштаб мозаики, вы перестанете различать отдельные ее цветовые квадраты, а будете видеть целостную картинку. Чем больше цветовых элементов (пикселей) на единицу площади используется тем выше ее разрешение и тем качественней картинка выглядит, но цена этого качества – вес картинки. К растровым форматам относятся: BMP, GIF, JPG, PNG.

Векторные рисунки

Формируются из точек, линий, кривых, окружностей и прочих геометрических фигур которые можно описать математическими формулами. Благодаря тому что изображение формируется формулами а не сохраняется на прямую уменьшается его вес, но в тоже время вносятся ограничения на насыщенность картинок. К тому же благодаря тому что при изменении размеров векторного рисунка компьютер прорисовывает линии и фигуры заново сохраняется исходная четкость изображения. Самый распространяемый векторный графический формат – swf (Flash)

В веб разработке, не считая отдельных флеш презентаций, используется растровая графика, а именно три графических формата GIF,JPEG,PNG

JPEG(Joint Photographic Experts Group)

Сжатый особым образом растровый файл с возможной потерей качества. JPEG ищет плавные цветовые переходы, обрабатывая квадратные блоки со стороной 8 пикселей. Вместо действительных значений JPEG хранит скорость изменения от пиксела к пикселу. Лишнюю, с его точки зрения, слабо воспринимаемой человеческим глазом цветовую информацию он отбрасывает, усредняя некоторые значения. Чем выше уровень сжатия, тем больше данных отбрасывается и тем ниже качество. Формат аппаратно независим. Формат обычно применяется для хранения рисунков высокого качества, содержащих тысячи и миллионы цветов (до 16,7 миллионов оттенков). Удобство использования формата заключается в возможности управления степенью сжатия файла. Чем выше сжатие тем ниже качество рисунка. Из недостатков отсутствие поддержки прозрачности и появление размытости и шумов при среднем и высоком сжатии.

GIF – (Graphics Interchange Format)

Создан специально для передачи изображений в Интернет фирмой CompuServer. GIF может хранить до 256 цветов, причем количество цветов в изображении возможно уменьшать, что приведет к уменьшению веса картинки. К особенностям формата относится поддержка прозрачности и возможность повторения набора картинок с определенной последовательностью (анимация). Еще одной особенность картинки – чересстрочная развертка. Загрузка картинки не целиком, а построчно, что уменьшает субъективное время загрузки картинки. Основным недостатком формата является ограниченность количества цветов, что делает его непригодным для красочных изображений.

PNG (Portable Network Graphics)

Самый перспективный формат для развития всемирной сети. PNG это молодой формат, специально разработанный в качестве замены для уже не отвечающего потребностям времени Gif. PNG, в отличие от Gif, использует любое количество цветов, даже 48-битный цвет. Сжатие происходит по принципу, сходному с LZW, но несколько более совершенному, что дает неплохие результаты. PNG имеет возможность загружаться с черезстрочной PNG (Portable Network Graphics) разверсткой, причем двойной — по горизонтали и вертикали одновременно. PNG также поддерживает прозрачность. И даже не просто прозрачность, а в разной степени, то есть могут сохраняться полупрозрачные (1-99%) пиксели. Это, конечно, расширяет возможности web-дизайна и делает этот формат весьма привлекательным. Встроенная гамма-коррекция позволяет правильно отображать цвета на всех компьютерах, независимо от платформы. Таким образом, PNG формат заслуживает внимания прежде всего людей, чьи работы направлены на дальнейшее использование во Всемирной сети. Кстати, мне кажется, что web-мастера незаслуженно мало используют PNG. Не так уж часто его встретишь, несмотря на широкие возможности. Может быть, причина такой ситуации — традиционализм старых мастеров и обучение на их опыте и книгах новых. Даже в лучших изданиях по дизайну в сети PNG почему-то незаслуженно мало описывают. Собственно, как только появиться возможность использовать все функции png в сети, он сильно потеснит все остальное.

Подведем итоги

Формат GIF подходит для картинок, в которых количество цветов не превышает 10, если цветов до 256 эффективней использовать PNG-8. Также GIF хорошо подходит для небольших пиксельных иконок, которые должны быть на прозрачном фоне. Формат PNG-24 хорошо отображает градиентные цвета, также он поддерживает альфа-канал (полупрозрачные цвета). Права одним из недостатков является то что браузер Internet Explorer 6 не поддерживает альфа-канал. Для его активации необходимо использовать сторонние скрипты. Формат JPEG хорошо подходит для картинок с насыщенной цветовой палитрой таких как фотографии и другие изображения с большим количеством оттенков.

Подробней о том как оптимизировать графику про помощи Photoshop можно прочитать в заметке «Как разрезать графику для верстки«, а об оптимизации картинок в формате PNG в заметке «Оптимизация PNG c помощью OptiPNG»