Картинки в авоське: форматы графических файлов в Интернете

Спецвыпуск Xakep, номер #015, стр. 015-062-1

Андрей Каролик (andrusha@sl.ru; http://www.dal.net.ru)

С графикой ты сталкиваешься постоянно: в операционках, в софте, в играх, в Интернете. Всюду кишат окошки, кнопочки, бэкграунды, анимашки, иллюстрашки и so on. Но ты просто пользуешься плодами других, и тебя не парят заморочки графических форматов. Однако если ты решился оставить след своего копыта в сети, то без этого секретного знания тебе никуда.

Откуда торчат уши

Для Интернета раньше эта проблема была вообще неактуальной, так как скорости подключения к паутинке оставляли желать лучшего. На сайте размещали максимум скромный логотипчик или несколько небольших фотографий. При этом выбирали тот формат, который весил бы по минимуму, не особо обращая внимания на качество изображения. Времена меняются. Теперь найти сайт без графики - проблема. Делая свой собственный сайт, ты обязательно столкнешься с проблемой выбора: в каком формате сохранить фотографии, навигацию, разнообразные графические элементы, чтобы при этом получить максимальное качество отображения без бахромы и мусора и минимальные размеры графических файлов. Есть и еще один трабл - форматов существует море. Разные проги для работы с графикой юзают разные графические форматы. Есть общепринятые форматы, есть собственные форматы, используемые только в определенных программах и графических редакторах. Перечислять все форматы графических файлов можно достаточно долго. Вот, например: BMP, PCX, WMF, PICT, GIF, TIFF, EPS, PDF, PSD, JPEG, CDR, FH7, FH5, FH8, SCT, PS, AI, CDR, RTF. Хватит ;)? Но далеко не все из них можно использовать в Интернете, так как не все из них поймет твоя бродилка-бодрилка. Поэтому не помешало бы тебе получше узнать графические форматы, юзаемые в Инете, их фичи и баги. В общем, сейчас я тебе расскажу, что почем и что для чего пользовать на практике.

Векторная и растровая графика

Весь компьютерный графон в первую очередь делится на две большие ветви: векторную и растровую. Векторная графика - это набор геометрических примитивов (всяких кружков, квадратиков, отрезочков, дуг и прочей шняги). То есть компу, чтобы нарисовать линию, не нужно хранить все ее точки, а достаточно заныкать координаты начала и конца. Далее железный вычислит остальные точки по формуле сам "на лету". К примеру, чтобы компьютер нарисовал дугу, ему нужны концы... мда... радиус и ее цвет. Разные векторные форматы отличаются использованием своих алгоритмов при построении одних и тех же объектов. Но суть там же :).

Растровая графика устроена по-другому. Она представляет собой прямоугольную матрицу (bitmap), разделенную на маленькие квадратики - пиксели (pixel - picture element). Эдакий листок в клетку. И совершенно параллельно, квадрат там или круг - все это наборы точек. Чем больше пикселей в каждом квадратном дюйме на матрице, тем выше разрешение файла (качество картинки). Данная структура характерна для всех растровых форматов. Растровые форматы различаются между собой количеством информации о цвете, которую можно определить для каждого пикселя способом архивации и другими особенностями.