Графические форматы. Форматы графических файлов. Растровые и векторные форматы

Краткая аннотация: Методы сжатия графических данных. Сохранение изображений в стандартных форматах, а также собственных форматах графических программ. Преобразование файлов из одного формата в другой.

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

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

Полутоновые изображения.

Эти изображения содержат пиксели одного цвета, но разной яркости. Каждый пиксель может принимать 256 различных значений яркости от 0 (черный) до 255 (белый). Этого вполне достаточно, чтобы правильно отобразить изображение, например, черно-белую фотографию.

Любое изображение можно превратить в полутоновое. Если исходный материал, например, цветная фотография, то она станет монохромной.

Рис. 1.7.

Изображения с индексированными цветами

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

Полноцветные изображения

Полноцветные изображения не имеют никаких ограничений по количеству цветов и могут быть представлены более чем 16 млн оттенков.

Форматы графических файлов

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

Расширение - это несколько букв или цифр, находящихся после точки в имени файла.

Например, окончание имени (расширение) ".txt" обычно используют для обозначения файлов, содержащих только текстовую информацию, а ".doc" - содержащих текстовую информацию, структурированную в соответствии со стандартами программы Microsoft Word. Файлы, содержимое которых соответствует одному формату, называют файлами одного типа.

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

Сжатие применяется для растровых графических файлов, т.к. они имеют достаточно большой объем.

В таблице 1 приведена краткая характеристика часто используемых графических форматов файла.

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

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

Основные термины для понимания темы

Пиксели – маленькие квадратные точки, окрашенные в определенный свет, которые составляют единое целое – изображение.

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

Существует особенность: чем число точек растра выше, тем больше деталей прорисовывается и фотоснимок качественнее.

Линейный размер – это данные о ширине и высоте напечатанного снимка, выраженные в миллиметрах. Их можно узнать при помощи обычной линейки. К примеру, линейная величина снимка с параметрами 10*15 см –102*152 мм.

Параметры в пикселях – это данные о ширине и высоте цифровой картинки.

Существует одна особенность. Цифровые фотокамеры делают снимки одних размеров: 640*480, 1600*1200, а на мониторе мы видим 800*600,1024*768,1280*1024. То есть существенное несовпадение.

Рассмотрим примеры. Если картинка имеет величину 450×300 точек растра, то снимок будет повернут под альбом, то есть располагаться горизонтально. От чего это зависит? Ширина снимка больше, чем высота.

Если взять величину картинки 300*450, то она будет располагаться в книжной ориентации, то есть вертикально. Отчего так? Ширина меньше, чем высота.

Разрешение – число, которое связывает между собой величины в миллиметрах и в пикселях, измеряемое в dpi (от англ. «dots per inch» – количество точек на дюйм).

Специалисты советуют ставить разрешение – 300 dpi, предназначенное для получения высококачественных фотоснимков. Минимальное разрешение – 150 dpi.

Чем выше показатель, тем качественнее фото.

Но, стоит заметить, что если вы делаете фотоснимок крупнее оригинала, то есть «растягиваете точки растра», то качество падает.

Разрешение может меняться в зависимости от различных моделей фотокамер. В чем же секрет? Производители фототехники указывают неточное число мегапикселей, к примеру, 12 МП. На самом деле может оказаться 12.3 или 12.5 МП. Но качество печати не ухудшится от этого факта.

Стандартные размеры

Какие есть форматы фотографий? Выясним.

1. Самый популярный размер печати – 10*15 см. Он применяется для формирования семейного архива.
2. Следующий – 15*20 см или А5.
3. А4, 20*30 см или 21*29,7 см. Применяют для украшения стен фотографиями. Поскольку А4 – размер офисной бумаги для печати, то распечатка не составит труда, так как в основном принтеры разработаны под изготовление А4.
4. 30*40 см – сложный формат. Имеет два других названия: А3 или А3+. Почему сложный? Потому что идет путаница. Размер А3 имеет параметры 297*420 мм, но таких фоторамок подобрать нельзя, их нет в продаже. Самая близкая фоторамка к этому фотоснимку – 30*40 см. Будьте внимательны при заказе. Фоторамки изготавливаются со стеклом.

Нестандартные размеры

Часто нам приходится заказывать фото не стандартной величины, а уникальной – нестандартной.

1. 13*18 см. Применяется крайне редко. Печать затруднена.
2. 40*50 см или 30*40 см. Картинки с данными параметрами помогут украсить интерьер, поскольку довольно велики. Поэтому качество должно быть высокое.

Как рассчитать размеры для получения высокого разрешения

Подробно рассмотрим фото с параметрами 10*15 см.

• Линейные величины данных параметров (указанные обычно в специальных таблицах) – 102*152 мм.
• Умножим ширину изображения (102 мм) на разрешение, которого хотим добиться, в нашем случае это 300 dpi.
• Разделим результат прошлого шага на число мм в одном дюйме – 25,4.
• Получим число точек растра исходной картинки по ширине 102*300/25,4 =1205.

Тот же самый алгоритм проведем для высоты.

152*300/25,4 = 1795.

Значит, делаем вывод, для любого фотоснимка, величина которого будет больше, чем 1205*1795 точек растра, при печати на формате 10*15 см разрешение будет больше 300 единиц.

Иногда получается так, что изображения с разрешениями 150 и 300 единиц выглядят совершенно одинаково. Почему так и отчего зависит? Зависит от жанра картинки и расстояния, с которого будут ее рассматривать.

Документы

Форматы для документов измеряются в см!

• Для разного вида удостоверений – 3*4 см;
• Для виз – 3,5*4,5 см;
• На паспорт – 3,7*4,7 см;
• В личное дело – 9*12 см;
• На жительство – 4*5 см;
• Для пропусков – 6*9 см.

Другая линейка форматов

Главное, чтобы фоторамка совпадала с фото. Поэтому производители выпускают специальную бумагу с определенными размерами:

• А8 (5*7 см);
• А7 (7*10 см);
• А6 (10*15 см);
• А5 (15*21 см);
• А4 (21*30 см);
• А3 (30*42 см).

Почему нужно правильно подобрать бумагу? В результате вам не придется смотреть на неполное, обрезанное изображение или же обрезать белые поля, которые оказались лишними. Обычно в фотосалоне представлены форматы для печати с примерами.

Особенности заказа

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

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

Помните, что перед печатью, нужно выбрать определенные параметры, который будет влиять на качество распечатанного снимка.

Подписывайтесь на обновления блога и делитесь полученными знаниями с друзьями в социальных сетях.

Всех вам благ, Тимур Мустаев.

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

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

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

Не оптимизированные изображения являются одним из факторов замедления сайта, на что указывают сервисы проверки.

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

Какие изображения для сайтов использую сегодня

Все изображения для сайтов, подразделяются:

• растровые (пример — JPG, JPEG, GIF, PNG),
• векторные (пример — SVG).

Растровые изображения состоят из пикселей, в которых хранится цвет и значение прозрачности. Такими форматами представлены изображения в статьях, кнопками, иконками и элементами дизайна. Эти изображения популярны среди разработчиков и владельцев сайтов. Основной минус растровых изображений – они плохо масштабируются.

То есть при увеличении размера картинки, идёт потеря качества.

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

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

Описание популярных форматов изображения для сайта

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

JPEG

JPEG или JPG – один из самых популярных форматов изображений для сайтов. Формат поддерживает миллионы цветов, что и даёт ему лидирующую позицию в представлении фотографий и картинок на сайте.

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

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

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

PNG

Этот формат использует алгоритм сжатия без потери качества. По количеству цветов и уровню прозрачности доступен в двух видах 8 и 24-бит. Оба поддерживают прозрачность.

8-битный пользуется малой популярностью, а вот 24-битный широко используется для различных изображений на сайте. За счёт прозрачности позволяет создавать комбинированные изображения. Часто используется для создания анимированных кнопок, иконок, где необходим эффект прозрачности.

Изображения в формате PNG можно много раз оптимизировать, редактировать – оно сохранит первоначальное качество.

Формат также поддерживается всеми браузерами и устройствами, что гарантирует его отображение на любом экране.

По качеству изображения выглядят лучше, чем JPG, но вес файла будет больше. Это нужно учитывать при размещении файлов на сайте.

GIF

Это 8-битный формат, поддерживающий 256 цветов, прозрачность и анимацию. За счёт поддержки малого количества цветов, вес файла тоже минимальный.

Формат не подходит для фотографий и изображений с широким диапазоном цветов.

Зато широко используется при создании , баннеров, кнопок, иконок и так далее.

В современных сайтах этот формат используется всё реже.

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

SVG

Это формат векторных файлов на основе XML. Формат стал набирать популярность совсем недавно, так как ранее он слабо поддерживался в браузерах. И из-за проблем отображения никто не торопился его использовать.

На сегодняшний день SVG поддерживается всеми современными браузерами. Но, проблемы с отображением все, же встречаются.

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

Формат SVG имеет малый вес, отлично масштабируются, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию, можно управлять через CSS и размещать в HTML, сокращая количество запросов.

WebP

Формат с открытым исходным кодом, разработан Google специально для интернета. Сегодня YouTube использует преобразование миниатюр для видео в формат WebP.

Формат обеспечивает превосходное сжатие и поддерживает прозрачность. Он сочетает в себе преимущества JPG и PNG форматов без увеличения размера файла.

Но, несмотря на преимущества формата, он поддерживается не всем браузерами, например, IE, Edge, Firefox и Safari.

Существуют способы обхода этих ограничений, но они не дают использовать формат повсеместно.

Заключение

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

Возможно, когда WebP получит широкую поддержку, мы все перейдём на него и заменим jpg и png на своих сайтах.

Давайте обсудим в комментариях, какие вы используете форматы на своих сайтах, что нравится и что не нравится.

На сегодня у меня всё, жду ваших комментариев.

С уважением, Максим Зайцев.

Была прошлая пятница, однако Пятничного поста под N3 написать не удалось. Причина банальна — отсутствие свободного времени в связи с квартирным вопросом и рядом других проблем. Но, в эту пятницу фото будет точно. Оно уже есть и было готово вчера к публикации, но все же решил свободное вечернее время потратить на ремонтные работы в квартире. Поэтому, если не смотрели, то обязательно посмотрите и - поднимите себе настроение .

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

Вообще графические форматы — совокупность правил обработки полученных графических данных, с целью их дальнейшего хранения или редактирования. Как говорится в строчках В. Маяковского «Все профессии нужны, все профессии важны»... Тоже самое можно отнести и форматам изображений.

Разработчики предлагают немало растровых форматов , предназначенных для хранения файлов. Среди наиболее часто используемых стоит назвать следующие: BMP, TIFF, GIF, JPEG, PNG, PSD, ICO . Итак, рассмотрим некоторые плюсы и минусы, а также область применения перечисленных растровых форматов изображений .

Форматы растровых изображений

• BMP - (аббревиатура от Bit Map image) представляет собой стандартный растровый формат и имеет универсальное назначение. Он поддерживается большинством графических редакторов, включая довольно распространенный Paint . Изначально кодирование в нем выполнялось самым простым способом, по . Но это оказалось неэкономно, поскольку каждый пиксел был представлен лишь одним байтом. Следовательно, становились доступными всего 256 цветов, что существенно ограничивало возможности передачи изображений. В дальнейшем он несколько совершенствовался. Bit Map image почти оптимально подходит для хранения данных и обмена ими с другими подобными приложениями. Но, вместе с тем, занимает слишком много места в памяти, так как необходимо сберегать кодирование всех точек изображения. Файл BMP не поддерживает анимацию и черезстрочное отображение.
• TIFF — (от Taged Image File Format) – универсальный для издательских систем и топографической графики. Такие форматы растровых изображений обеспечивают высокое качество печати. Они создавались для поддержки практически всех программ, предназначенных для работы с файлами точечной графики, поэтому совмещаются со всеми платформами. Широко используют TIFF в полиграфии и издательском деле. Файлы (отсканированные изображения, иллюстрации, факсы и тому подобное) с расширением .tif в этом мощном формате хранят для дальнейшей цветной печати, хотя доступна и монохромная распечатка – в представлениях CMYK и RGB . Не применяется для публикации картинок в компьютерной сети или при создании веб-сайтов, ведь имеет довольно значительные размеры. Непригоден он также для анимации.
• GIF — (по первым буквам от Graphic Interchamge Format) служит для хранения растровых изображений в графике и для обмена ими. Он один из самых «старых» в Интернете, имеет хождение уже длительное время, несмотря на то, что в нем применяются индексированные цвета (в ограниченном наборе). Файлы с расширением .gif широко используют при конструировании Web-сайтов. Среди основных плюсов Graphic Interchamge Format стоит назвать то, что вид картинки не зависит от базовой платформы или от типа браузера, а сжатие происходит без потерь информации. Высококачественно в этом формате отображаются рисунки с незначительным количеством однородных цветов, чертежи, прозрачные картинки и анимация. GIF небольшой по размеру, поэтому быстро загружается, что немаловажно при создании HTML-страниц. Но все же формат имеет существенный недостаток – у него незначительный набор цветов, что ограничивает его возможности при хранении изображений, у которых плавные переходы.
• JPEG — (аббревиатура от Joint Photographic Expert Group) помогает избавиться от изъянов, которые возникают при создании и сбережении изображений в GIF. Здесь используется метод сжатия фотографий или прочих картинок. Эти форматы растровых графических файлов являются наиболее распространенными при хранении многоцветных картинок. Сжатие изображений (они хранятся в файлах с пометкой .jpg ).выполняется в плавном режиме, что обеспечивает высокую его степень и снижает потери данных. На жестком диске в JPEG удобно сберегать значительное число картинок, в частности – большие фотоснимки с плавными переходами. Это позволяет существенно сэкономить место на диске. Также с помощью JPEG доступно публиковать вполне приемлемого качества фото в компьютерной сети. Но следует учитывать, что при сжатии часть данных теряется, а при повторном сохранении того же изображения шансы необратимой утери информации возрастают. В этом плане намного улучшает положение усовершенствованная версия формата – JPEG 2000 . Правда, поддерживается он не всеми браузерами, что тормозит его распространение.
• PNG — (portable network graphics) позволяет хранить растровую графику в сжатом виде без потерь, причем файлы получаются меньше по объему, чем в GIF. В формате PNG доступно применение практически любого цвета, а также прозрачность. Это обстоятельство раскрывает широкие возможности в веб-конструировании. Сейчас пользуется постоянной популярностью, поскольку состыкуется со всеми платформами, поддерживает черезстрочное отображение, отличается значительной цветовой гаммой, поддерживает анимацию.
• Внутренние форматы растровой графики PSD (сокращение от PhotoShop Document) предназначены для пакетов программы . Они поддерживают все типы изображений, а также их слои в ходе обработки. Сохраняются в файлах с пометкой расширения .psd .

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

Форматы файлов — основа работы с цифровыми фотографиями. расскажет вам о всех основных форматах графических файлов.

RAW.

Формат файлов содержащий необработанную информацию, поступающую напрямую с матрицы фотокамеры. Эти файлы не обрабатываются процессором камеры (в отличие от JPG) и содержат оригинальную информацию о съемке. RAW может быть сжат без потери качества.

Преимущества RAW очевидны — в отличие от JPG, который был обработан в камере и уже сохранен с сжатием данных — RAW дает широчайшие возможности по обработке фотографии и сохраняет максимальное качество.

Заметка. Разные производители фототехники используют разные алгоритмы для создания RAW в своих камерах. Каждый производитель придумывает собственное разрешение для своего RAW-файла — NEF — Nikon, CR2 — Canon…

JPEG (он же JPG).

Это самый распространенный формат графических файлов.

Свою популярность JPG заслужил гибкой возможностью сжатия данных. При необходимости изображение можно сохранить с максимальным качеством. Либо сжать его до минимального размера файла для передачи по сети.

В JPG применяется алгоритм сжатия с потерей качества. Что это нам дает? Явный минус такой системы — потеря качества изображения при каждом сохранении файла. С другой сжатие изображения в 10 раз упрощает передачу данных.

На практике, сохранение фотографии с минимальной степенью сжатия не дает видимого ухудшение качества изображения. Именно поэтому JPG — самый распространенный и популярный формат хранения графических файлов.

TIFF.

Формат TIFF очень популярен для хранения изображений. Он позволяет сохранять фотографии в различных цветовых пространствах (RBG, CMYK, YCbCr, CIE Lab и пр.) и с большой глубиной цвета (8, 16, 32 и 64 бит). TIFF широко поддерживается графическими приложениями и используется в полиграфии.

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

Право на формат TIFF в данный момент принадлежит компании Adobe. Photoshop может сохранять TIFF без объединения слоев.

PSD.

Формат PSD используется в программе Photoshop. PSD позволяет сохранять растовое изображение со многими слоями, любой глубиной цвета и в любом цветовом пространстве.

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

Так же PSD поддерживает сжатие без потери качества. Но обилие информации, которое может содержать PSD файл, сильно увеличивает его вес.

BMP.

Формат BMP один из первых графических форматов. Его распознает любая программа работающая с графикой, поддержка формата интегрирована в операционные системы Windows и OS/2.

BMP хранит данные с глубиной цвета до 48 бит и максимальным размером 65535×65535 пикселей.
На данный момент формат BMP практически не используеться ни в интернете (JPG весит в разы меньше), ни в полиграфии (TIFF справляеться с этой задачей лучше).

GIF.

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

PNG.

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

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

JPEG 2000 (или jp2).

Новый графический формат, созданный для замены JPEG. При одинаковом качестве размер файла в формате JPEG 2000 на 30% меньше, чем JPG.

При сильном сжатии JPEG 2000 не разбивает изображение на квадраты, характерные формату JPEG.

К сожалению, на данный момен этот формат мало распростанён и поддерживается только браузерами Safari и Mozilla/Firerox (через Quicktime).