Формат GIF был разработан в 1987 году компьютерной информационной службой CompuServe. Преимущества
- Малый размер, который достигается ограниченной цветовой гаммой - не более 256 цветов.
- Прозрачный фон.
- Анимация.
Плод сообщества независимых программистов - ответная реакция на переход популярнейшего формата GIF в разряд коммерческих продуктов. Формат PNG делает почти все, что и формат GIF, за исключением анимации. Преимущества
- Лучшие сжатие данных - сжимает растровые изображения не только по горизонтали, но и по вертикали.
- Поддерживает цветные фотографические изображения вплоть до 48-битных включительно.
- 256 уровней прозрачности.
Формат, аналогичный PNG-8, но использующий 24-битную палитру цвета.
Что позволяет сохранять в этом формате фотографии и сложные рисунки. Преимущества
- Полная цветовая палитра.
- Качественная прозрачность позволяет накладывать рисунок на любой фон
Для поиска лучшего способа сжатия изображений фотографического качества, две организации по стандартизации – International Telecommunications Union (ITU) и International Organization for Standartization (ISO) – создали Joint Photographic Experts Group (JPEG).
Использует сжатие с "потерями" (lossy compression). При таком сжатии удаляется та информация, которая несущественна для восприятия изображения. WBMP (WAP BitMap)
монохромные (двухцветные) изображения.
Максимальный размер картинки не должен превосходить ограничений на размер карты – 1,5 Кбайт. BMP (BitMap)
Самый простой растровый формат BMP является родным форматом Windows. В BMP данные о цвете хранятся только в модели RGB, то есть этот формат создан для использования на экране. PCX (PCExchange)
Изображения в формате PCX можно посмотреть большинством программ под DOS. Как и ВМР, этот формат в значительной мере устарел и поддерживается современными графическими программами исключительно для совместимости с антикварным софтом. TIFF, TIF (Tagged Image File Format)
Изначально разработан компанией Aldus для своего графического редактора PhotoStyler. Как универсальный формат для хранения растровых изображений, TIFF достаточно широко используется, в первую очередь, в издательских системах, требующих изображения наилучшего качества. Благодаря своей совместимости с большинством профессионального ПО для обработки изображений, формат TIFF очень удобен при переносе изображений между компьютерами различных типов (например, с PC на Mac и обратно). PSD (Photoshop)
Формат Adobe Photoshop, отличается возможностью хранения слоев (layers). Удобен только для обработки в Photoshop и для хранения исходника для редактирования в будущем. RAW (RAW Image Data)
Формат разработан для цифровых фотоаппаратов. Это точная копия картинки, запечатленной на матрице во время съемки, представляет из себя три фотографии, снятые в красных, синих и зеленых цветах.
Расширения RAW-файлов у разных производителей могут отличаться, и их далеко не всегда получается открыть с помощью программ для обработки изображений.
Хотя если камера поддерживает сохранение RAW, то, как правило, к ней в комплекте прилагается какая-нибудь программа для обработки файлов этого формата.
В настоящее время корпорацией Adobe предложен формат DNG (Digital Negative Specification), который создан для того, чтобы облегчить жизнь производителям средств для работы с графикой. Некоторые компании (Leica и Pentax) уже включили DNG в свои камеры, однако большинство поставщиков камер всё-таки продолжают использовать свои форматы.
Расширения формата RAW
.dng - Adobe (универсальный)
.crw .cr2 - Canon
.raf - Fuji
.kdc - Kodak
.mrw - Minolta
.nef - Nikon
.orf - Olympus
.ptx .pef - Pentax
.x3f - Sigma
.arw - Sony
Векторная графика
CDR (CorelDRAW)Формат популярного CorelDRAW, являющимся неоспоримым лидером в классе векторных графических редакторов на платформе РС. Имея сравнительно невысокую устойчивость и проблемы с совместимостью файлов разных версий формата. AI (Adobe Illustrator)
Являясь частью семейства Adobe, поддерживают практически все программы, так или иначе связанные с векторной графикой. Лучший посредник при передаче изображений из одной программы в другую, с РС на Macintosh и наоборот. Отличается наибольшей стабильностью и совместимостью с языком PostScript, на который ориентируются практически все издательско-полиграфические приложения. WMF (Windows Metafile)
Еще один родной формат Windows, на сей раз векторный. Понимается практически всеми программами Windows, так или иначе связанными с векторной графикой. EMF (Enhaced Metafile)
Подобный WMF.
ДРУГИЕ ФОРМАТЫ
SWF (ShokWaveFlash)Формат Flash, продукт компании «Macromedia», позволяющий разрабатывать интерактивные мультимедийные приложения. Сфера использования Flash различна, это могут быть игры, веб-сайты, CD презентации, баннеры и просто мультфильмы. При создании продукта можно использовать медиа, звуковые и графические файлы, можно создавать интерактивные интерфейсы и полноценные веб-приложения с использованием PHP и XML.
SVG
(Scalable Vector Graphics)Стандарт, рекомендованый World Wide Web Consortium для описания с помощью XML markup двумерной векторной и комбинированной векторно-растровой графики.
В браузере SVG-графика отрисовывается с помощью растровых механизмов. Поддержка полупрозрачностей в каждом слое, градиенты линейные, градиенты радиальные, визуальные эффекты (тени, отмывки, блестящие поверхности, текстуры (фактуры), паттерны любой конструкции, символы любой сложности).
SVG - это формат для двухмерной векторной графики - так определено в спецификации, но с помощью добавления скрипта (а именно JavaScript) внутрь SVG файла можно создавать трехмерные анимированные изображения.
В SVG может быть встроено растровое изображение, к которому как и к любому другому объекту в SVG может быть применена трансформация, прозрачность и т.д. ICO (Icon)
Иконки используются во всяких программах на компьютере, смартфоне. Но обычному человеку, как правило, может понадобиться создать или использовать иконку на своем сайте.
Многие пробуют завести свой сайт. Даже, если вы используете готовый шаблон сайта со стилем, который надо только наполнять, вам все-равно хорошо бы сделать уникальную иконку. Иконка в интернете используется как символ сайта, логотип. Например, сейчас вы видите красный квадратик в адресной строке. Если вы добавите страничке нашего сайта в избранное (favorit), рядом со ссылкой появится наша иконка, которая поможет быстро визуально находит ссылку на сайт. Собственно, это и есть главное предназначение иконки в интернете.
PostScript
EPS (Encapsulated PostScript)Самый надежным и универсальным способом сохранения данных. Он использует упрощенную версию PostScript не может содержать в одном файле более одной страницы, не сохраняет ряд установок для принтера. Как и в файлы печати PostScript, в EPS записывают конечный вариант работы, хотя такие программы, как Adobe Illustrator и Adobe Photoshop могут использовать его как рабочий. EPS предназначен для передачи векторов и растра в издательские системы, создается почти всеми программами, работающими с графикой.
КАКОЙ ФОРМАТ ИЗБРАТЬ?
| Для интернета | |
| фотография или рисунок с перетекающими тонами | JPEG |
| картинка с прямыми линиями, небольшой цветовой гаммой, с ровной заливкой (без градиента) |
GIF PNG |
| сложная картинка с прозрачным фоном | PNG-24 |
| анимация | SWF |
| иконки | ICO |
| Для печати и хранения | |
| Для печати | TIFF |
| Для хранения | PSD |
| Для логотипа | EPS (CDR AI) |
| Логотип для MS Office | WMF |
| Для фотографии | |
| Для хранения и печати фотографий, только не низкого качества | JPEG |
| Для типографии и для оригинала самого лучшего качества | RAW |
Фотографии и картинки отличаются друг от друга не только по содержанию, но и по другим «компьютерным» характеристикам. Например, по размеру.
Бывает так, что вроде бы два одинаковых рисунка, но у одного размер в три раза больше, чем у другого.
А также изображения отличаются по качеству. Думаю, вам не раз встречались фото крайне плохого качества. Это видно невооруженным глазом. Например, две одинаковые фотографии, но одна лучшего качества, а другая - худшего.
А бывает так, что рисунку будто не хватает красок. Вот пример.
И за все это отвечает формат или тип файла .
На заметку . Изображения бывают самых разных форматов. И существует их очень и очень много. Мы не будем рассматривать их все, а поговорим про самые распространенные: bmp, gif, jpg (jpeg), png, tiff.
Отличаются форматы изображений друг от друга в первую очередь качеством. А качество отличается по количеству (насыщенности) цветов.
Например, я рисую картину, используя разные цвета. И тут вдруг часть из них закончилась, и приходится дорисовывать тем, что есть. Я, конечно, постараюсь сделать всё возможное, чтобы это не сильно отразилось на результате, но все равно картина получится не такая, как хочется - более блеклая, размытая.
Вот так и с форматами изображений. Какой-то оставляет все цвета, другой же обрезает часть. И, бывает, из-за этого картинка портится.
Это грубый пример — на самом деле, там все несколько сложнее. Но, думаю, суть вы уловили.
Распространенные форматы изображений
BMP - формат рисунков, сделанных в программе Paint . Его можно использовать для хранения нарисованных картинок на компьютере. Но вот в интернете такой тип не подойдет из-за большого объема. Так что если вы хотите опубликовать картинку Paint в блоге или социальной сети, она должна быть другого типа — gif, jpg или png.
GIF - популярный формат картинок в интернете. В нем можно сохранять изображения без потери качества, но с ограниченным количеством цветов - 256. Особую популярность gif получил благодаря тому, что в этом формате можно создать небольшие анимированные (движущиеся) картинки.
JPG - формат фотографий и картин с большим количеством цветов. В нем можно сохранить изображение как без потери качества, так и с потерей.
PNG - современный формат рисунков. Изображение такого типа получается небольшого размера и без потери качества. Очень удобно: и файл маленький, и качество хорошее. А еще он поддерживает прозрачность.
TIFF - изображения очень хорошего качества, без сжатия. Соответственно, и размер у таких файлов огромный. TIFF используют тогда, когда качество имеет большое значение. Например, при создании визиток, буклетов, журнальных обложек.
Какой формат выбрать
- BMP — если это рисунок, сделанный в программе Paint, и вы собираетесь держать его только в компьютере.
- GIF — если анимация или рисунок с небольшим количеством цветов для публикации в интернете.
- PNG — если это рисунок, в котором много цветов или есть какие-то прозрачные части.
- JPG (jpeg) — если фотография.
- TIFF — изображение для полиграфии (визитки, буклеты, плакаты и т. д.).
Здравствуйте, уважаемые друзья. Сегодня поговорим о том, какой формат изображения лучше использовать на сайте, какие сегодня доступны форматы графических файлов для сайта и нужно ли гнаться за новинками графических форматов.
Таких вопросов я получаю довольно много, многие из моих учеников спрашивают можно ли им использовать новые форматы 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 на своих сайтах.
Давайте обсудим в комментариях, какие вы используете форматы на своих сайтах, что нравится и что не нравится.
На сегодня у меня всё, жду ваших комментариев.
С уважением, Максим Зайцев.
Как правило, тип файла можно определить по последним буквам его имени. Эти буквы называют расширением имени файла. Различные программы предоставляют различные расширения файлам, которые они хранят.
Какой тип файла следует использовать
В большинстве случаев лучше использовать формат JPEG (.Jpg) , поскольку он позволяет сохранять изображения высокого качества в файлах небольшого размера благодаря сжатию данных. Этот формат лучший для хранения и распространения изображений.
Если требуется очень высокое качество изображения (например, для печати увеличенного изображения размером 8х10 дюймов), следует использовать формат TIFF (.Tif) или формат JPEG с наименьшим сжатием.
Преимущества и недостатки общих типов файлов
Преимущества формата JPEG
- Большинство программ могут открывать и сохранять изображения в формате JPEG.
- Изображения в формате JPEG удобно отправлять по электронной почте благодаря небольшому размеру файла.
- Поскольку формат JPEG позволяет изменять уровень сжатия при сохранении, можно контролировать размер файла и качество изображения.
Недостатки формата JPEG
В формате JPEG изображения автоматически уплотняются при сохранении, что незначительно ухудшает качество изображения. Если использовать высокий уровень уплотнения, качество изображения может быть достаточно низким.
Преимущества формата TIFF
При сохранении изображений в формате TIFF качество не теряется.
Недостатки формата TIFF
Некоторые программы, в том числе большинство браузеров, не могут отображать изображения в формате TIFF.
Изображение в формате TIFF может быть очень большим (в несколько раз больше изображения в формате JPEG). Поэтому изображение в формате TIFF занимают гораздо больше места на жестком диске, чем изображение в формате JPEG.
Только очень маленькие изображения в формате TIFF пригодны для отправки по электронной почте .
Следует ли волноваться о потере качества изображения
Изображения в формате JPEG является несовершенной копией исходного изображения, которое можно увидеть через видоискатель камеры. Однако при создании фотографий высочайшего качества разницу увидеть будет трудно.
Во время каждого последующего сохранения файла в формате JPEG качество немного ухудшается, так как вы создаете копию с копии. Насколько ухудшится качество, зависит от уровня сжатия изображения.
Обычно уменьшение качества увидеть трудно, но если изображение несколько раз редактировалось и сохранялось со средним уровнем уплотнения, то, возможно, вы заметите уменьшение четкости и цветопередачи.
Для получения высокого качества изображения следует сохранять в формате JPEG с максимально возможным уровнем качества или использовать формат TIFF.
Какие типы изображений можно просматривать в Windows
Средство просмотра фотографий Windows поддерживает следующие типы изображений.
Приветствую вас на моем блоге вновь. С вами на связи, Тимур Мустаев. Возможно, что всем приходилось сталкиваться с такой ситуацией: вы фотографировали, на экране снимок выглядел четким и качественным.
После чего вы шли в салон и распечатывали его, а оно выглядело совсем не так, как на экране монитора и имело большое количество цифрового шума. В чем проблема? Сегодня я подробнее расскажу об этой проблеме и какие бывают форматы фотографий. Приступим к изучению.
Основные термины для понимания темы
Пиксели – маленькие квадратные точки, окрашенные в определенный свет, которые составляют единое целое – изображение.
Когда вы смотрите на фотографию, глаз не замечает конкретных точек растра, поскольку они очень маленькие и количество их может достигать десятков тысяч, они сливаются, образуя одну картинку. Только при увеличении вы сможете их разглядеть.
Существует особенность: чем число точек растра выше, тем больше деталей прорисовывается и фотоснимок качественнее.
Линейный размер – это данные о ширине и высоте напечатанного снимка, выраженные в миллиметрах. Их можно узнать при помощи обычной линейки. К примеру, линейная величина снимка с параметрами 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 МП. Но качество печати не ухудшится от этого факта.
Стандартные размеры
Какие есть форматы фотографий? Выясним.
- Самый популярный размер печати – 10*15 см. Он применяется для формирования семейного архива.
- Следующий – 15*20 см или А5.
- А4, 20*30 см или 21*29,7 см. Применяют для украшения стен фотографиями. Поскольку А4 – размер офисной бумаги для печати, то распечатка не составит труда, так как в основном принтеры разработаны под изготовление А4.
- 30*40 см – сложный формат. Имеет два других названия: А3 или А3+. Почему сложный? Потому что идет путаница. Размер А3 имеет параметры 297*420 мм, но таких фоторамок подобрать нельзя, их нет в продаже. Самая близкая фоторамка к этому фотоснимку – 30*40 см. Будьте внимательны при заказе. Фоторамки изготавливаются со стеклом.
Нестандартные размеры
Часто нам приходится заказывать фото не стандартной величины, а уникальной – нестандартной.
- 13*18 см. Применяется крайне редко. Печать затруднена.
- 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 см).
Почему нужно правильно подобрать бумагу? В результате вам не придется смотреть на неполное, обрезанное изображение или же обрезать белые поля, которые оказались лишними. Обычно в фотосалоне представлены форматы для печати с примерами.
Особенности заказа
Если вы оформляете заказ по интернету, то система при отправке изображения говорит, какие параметры будут более уместны для получения высококачественной картинки. Если вы выбираете формат по своему желанию, а не рекомендуемый программой, то администрация не берет на себя ответственность за получение низкого качества.
Казалось бы, зачем в современном веке цифровых технологий печать фотоснимков, ведь большинство фото просматриваются в цифровом виде. Знающие люди говорят, фотография оживает лишь тогда, когда напечатана на бумаге, имеет обрамление и висит в комнате для украшения интерьера.
Помните, что перед печатью, нужно выбрать определенные параметры, который будет влиять на качество распечатанного снимка.
Подписывайтесь на обновления блога и делитесь полученными знаниями с друзьями в социальных сетях.
Всех вам благ, Тимур Мустаев.
