Содержание
Форматы графических файлов | WebReference
Широкое распространение для веб-графики получили два формата — PNG и JPEG. Их многофункциональность, универсальность, небольшой объём исходных файлов при достаточном для сайта качестве сослужили им хорошую службу, фактически определив их как стандарт веб-изображений. Есть ещё формат GIF, который также поддерживается браузерами при добавлении изображений и SVG, о котором следует сказать отдельно.
GIF
GIF (Graphics Interchange Format, формат обмена графическими данными) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.
Особенности
- Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры.
- Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.
- Формат поддерживает покадровую смену изображений, что делает его популярным для создания баннеров и простой анимации.
- Использует свободный от потерь метод сжатия.
Область применения
Текст, логотипы, иллюстрации с чёткими краями, анимированные рисунки, изображения с прозрачными участками, баннеры.
JPEG
JPEG (Joint Photographic Experts Group, объединённая группа экспертов в области фотографии) — популярный формат графических файлов, широко применяемый при создании сайтов и для хранения изображений. JPEG поддерживает 24-битный цвет и сохраняет неизменными яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно содержащий текст, мелкие детали или чёткие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются определённым цветом.
Особенности
- Количество цветов в изображении — около 16 миллионов, что вполне достаточно для сохранения фотографического качества изображения.
- Основная характеристика формата — качество, позволяющее управлять конечным размером файла.
- Поддерживает технологию, известную под названием прогрессивный JPEG, при которой версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.
Область применения
Используется преимущественно для фотографий. Не очень подходит для рисунков, содержащих прозрачные участки, мелкие детали или текст.
PNG-8
PNG-8 (Portable Network Graphics, портативная сетевая графика) — формат по своему действию похожий на GIF. По заверению разработчиков, он использует улучшенный формат сжатия данных, но как показывает практика, это не всегда так.
Особенности
- Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своём названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле, — от 2 до 256.
- В отличие от GIF, не отображает анимацию ни в каком виде.
Область применения
Текст, логотипы, иллюстрации с чёткими краями, изображения с прозрачностью.
PNG-24
PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета. Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет мелкие детали изображения.
Особенности
- Использует примерно 16,7 миллионов цветов, из-за чего этот формат применяется для полноцветных изображений.
- Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной, так называемый градиент.
- Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пиксели в изображении неизменными, по сравнению с другими форматами у PNG-24 конечный объём файла с фотографией получается наибольшим.
Область применения
Фотографии, рисунки, содержащие прозрачные участки, рисунки с большим количеством цветов и чёткими краями изображений.
SVG
SVG (Scalable Vector Graphics, масштабируемая векторная графика) — это векторный формат, в отличие от предыдущих растровых форматов. Растровое изображение состоит из набора разноцветных пикселей, которые для человеческого глаза сливаются в единую картинку. Векторное же строится из набора объектов, вроде линий, кривых, прямоугольников, окружностей и др. При увеличении масштаба векторное изображение увеличивается пропорционально, сохраняя своё высокое качество.
Особенности
- Надписи остаются обычным текстом, их можно выделять, копировать, они читаются поисковыми системами при обходе сайта.
- Рисунки можно масштабировать произвольно, сохраняя при этом высокое качество.
- Формат не поддерживается браузером Internet Explorer до версии 9.0.
Область применения
Масштабируемые изображения, рисунки, логотипы, иллюстрации, графики и диаграммы.
См. также
- <img>
- <picture>
- Атрибуты элементов
- Выравнивание картинок
- Добавление медиа-контента
- Изображения
- Изображения
- Изображения в HTML
- Масштабирование картинок
- Подрисуночная подпись
- Фон в CSS
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.11.2015
Редакторы: Влад Мержевич
Изображения
Ctrl+←
Масштабирование картинок
Ctrl+→
Количество цветов растрового изображения
Количество
цветов (глубина
цвета) – также одна из важнейших
характеристик растра. Количество
цветов является важной характеристикой
для любого изображения, а не только
растрового.
Классифицируем
изображения следующим образом:
Двухцветные
(бинарные) – 1 бит на пиксел. Среди
двухцветных чаще всего встречаются
черно–белые изображения.Полутоновые
– градации серого или иного цвета.
Например, 256 градаций (1 байт на
пиксел).Цветные
изображения.
От 2 бит на пиксел и выше. Глубина цвета
16 бит на пиксел (65 536 цветов) получила
название High
Со1ог, 24 бит
на пиксел (16,7 млн цветов) – True
Со1ог. В
компьютерных графических системах
используют и большую глубину цвета –
32, 48 и более бит на пиксел.
GIF
– формат, использующий алгоритм сжатия
без потерь информации LZW. Максимальная
глубина цвета – 8 бит (256 цветов). В нём
также есть возможность записи анимации.
Поддерживает прозрачность пикселей
(двухуровневая – полная прозрачность,
либо полная непрозрачность). Данный
формат широко применяется при создании
Web–страниц. GIF–формат позволяет
записывать изображение «через строчку»,
благодаря чему, имея только часть файла,
можно увидеть изображение целиком, но
с меньшим разрешением. Его выгодно
применять для изображений с малым
количеством цветов и резкими границами
(например, для текстовых изображений).
JPEG
(JPG)
– формат, использующий алгоритм сжатия
с потерями информации, который позволяет
уменьшить размер файла в сотни раз.
Глубина цвета – 24 бит. Не поддерживается
прозрачность пикселей. При сильном
сжатии в области резких границ появляются
дефекты. Формат JPEG хорошо применять для
сжатия полноцветных фотографий. Учитывая
то, что при повторном сжатии происходит
дальнейшее ухудшение качества,
рекомендуется сохранять в JPEG только
конечный результат работы. JPEG широко
применяется при создании Web–страниц,
а также для хранения больших коллекций
фотографий.
Сравнение
GIF и JPEG
GIF
– формат удобен при работе с рисованными
картинками;JPEG
– формат лучше использовать для хранения
фотографий и изображений с большим
количеством цветов;для
создания анимации и изображений с
прозрачным фоном применяется GIF–формат.
BMP
– это формат графического редактора
Paint. В нём не применяется сжатие. Он
хорошо подходит для хранения очень
маленьких изображений – таких как
иконки на рабочем столе. Большие же
файлы в этом формате занимают слишком
много места.
PNG
– разработан с целью заменить формат
GIF. Использует алгоритм сжатия Deflate без
потерь информации (усовершенствованный
LZW). Максимальная глубина цвета – 48 бит.
Поддерживает каналы градиентных масок
прозрачности (256 уровней прозрачности).
PNG – относительно новый формат, и поэтому
ещё не очень распространён. В основном
используется в Web–дизайне. К сожалению,
даже в некоторых современных браузерах
(таких, как Internet Explorer 6) отсутствует
поддержка прозрачности PNG и поэтому не
рекомендуется использовать прозрачные
PNG изображения на Web–страницах.
TIFF
– формат, специально разработанный для
сканированных изображений. Может
использовать алгоритм сжатия без потерь
информации LZW. Позволяет сохранять
информацию о слоях, цветовых
профилях(ICC–профилях) и каналах масок.
Поддерживает все цветовые модели.
Аппаратно независим. Используется в
издательских системах, а также для
переноса графической информации между
различными платформами.
PSD
– формат графического редактора Adobe
Photoshop. Использует алгоритм сжатия без
потерь информации RLE. Позволяет сохранять
всю информацию, создаваемую в этой
программе. Кроме этого, в связи с
популярностью Photoshop, данный формат
поддерживается практически всеми
современными редакторами компьютерной
графики. Его удобно использовать для
сохранения промежуточного результата
при работе в Photoshop и других растровых
редакторах.
RIFF
– формат графического редактора Corel
Painter. Позволяет сохранять всю информацию,
создаваемую в этой программе. Его следует
использовать для сохранения промежуточного
результата при работе в Painter.
Формат | Макс. число | Макс. число | Макс. размер | Методы сжатия | Кодирование |
BMP | 24 | 16 777 216 | 65535 | RLE | – |
GIF | 8 | 256 | 65535 | LZW | + |
JPEG | 24 | 16 777 216 | 65535 | JPEG | – |
PCX | 24 | 16 777 216 | 65535 | RLE | – |
PNG | 48 | 281 474 976 710 656 | 2 147 483 647 | Deflation | – |
TIFF | 24 | 16 777 216 | всего 4 294 967 295 | LZW, RLE и другие | + |
типов растровых изображений — приложения Win32
- Статья