Png что это такое: Информация о расширении файла PNG

Содержание

Информация о расширении файла PNG

What is a PNG file

Файлы PNG (которые обычно называются «пингами») — это файлы в формате, который содержит растровые изображения. Первоначально формат изображений PNG был создан для перехода с формата GIF, так как они оба имеют возможность отображать прозрачные фоны. Другое сходство между этими форматами — использование индексированных цветов и сжатие без потерь. При этом файлы PNG имеют разные наборы ограничений авторских прав. Более того, в отличие от изображений GIF, файлы с расширением PNG не поддерживают анимацию. На сайте Online-onvert.com вы можете легко и бесплатно конвертировать ваши рисунки в формат PNG совершенно бесплатно.

Изображения PNG являются лучшим решением (по сравнению с файлами GIF) благодаря тому, что первые используют, кроме прочего, 8-битный канал прозрачности, а также поддерживают 24-битовые цвета RGB, изображения RGB и оттенки серого.

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

Here’s a small, but not exhaustive list of programs that can open PNG documents:

Microsoft Windows Photos
Microsoft Paint
Adobe Photoshop CC

Программист, не имеющий представления о сжатии данных, создал суперзамену формату PNG

29 Ноября 2021 14:2629 Ноя 2021 14:26 | Поделиться Представлен новый легковесный и очень простой формат компрессии картинок без потерь Quite OK Image (QOI). Он позволяет в десятки раз быстрее сжимать растровые изображения в цветовой модели RGBA по сравнению с популярным сегодня PNG при незначительно отличающемся итоговом размере файла. Автор QOI признается, что практически ничего не понимает в алгоритмах сжатия, а идея формата к нему пришла во время работы над проектом в смежной области.

Создан «убийца» PNG?

Создан новый формат сжатия растровых изображений, использующих цветовую модель RGB(A), без потери качества. Разработка получила название QOI (Quite OK Image, «вполне нормальное изображение»). Ее отличают простота и лаконичность реализации, а также высокая скорость компрессии/декомпрессии.

По заявлению автора формата и эталонной реализации, программиста Доминика Саблевски (Dominic Szablewski) из Германии, скорость кодирования изображения в формате QOI в 20-50 раз выше по сравнению с использованием распространенного в интернете PNG (Portable Network Graphics, «переносимая сетевая графика»). По быстроте декодирования QOI также превосходит PNG, однако не столь значительно – в три-четыре раза. При этом размер сжатого QOI-файла сопоставим с PNG-файлом, содержащим аналогичную картинку.

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

Программист-игродел представил новый формат сжатия изображений QOI

Эксперименты с замером производительности алгоритмов сжатия и распаковки разработчик производил над набором из 185 изображений. Среди них разнообразные скриншоты, обои рабочего стола, фотографии людей и природы, комиксы и текстуры. Для кодирования/декодирования в формате PNG использовались открытые библиотеки libpng и stb_image.

Исходный код открыт для всех

Исходный код всех материалов, имеющих отношение к QOI опубликован на хостинге Github и доступен на условиях свободной лицензии MIT.

По состоянию на 29 ноября 2021 г. проект состоит всего из трех файлов: заголовочный qoi.h содержит реализацию функций кодирования/декодирования изображения; qoiconv.c – утилиту командной строки для преобразования файлов из формата PNG в QOI и обратно; qoibench.c – инструмент-обертка для сравнения скорости кодирования с использованием libpng, stb_image и qoi.h.

Объем кода эталонной однопоточной реализации составляет 492 строки, конвертера – еще 76 строк, без учета комментариев. Дополнительно сторонними разработчики подготовлены реализации кодировщиков и декодировщиков на языках Go, Zig и Rust.

Автор не может – сообщество поможет

Автор подчеркивает, что совершенно не разбирается в алгоритмах сжатия. «Я понятия не имею, что творю, – предупреждает Саблевски в своем сообщении, размещенном в его личном блоге. – Я едва понимаю принцип работы алгоритма кодирования Хаффмана и как выполняется дискретное косинусное преобразование».

Алгоритм Хаффмана был создан в 1952 г. аспирантом Массачусетского технологического института (MIT) Дэвидом Хаффманом (David Huffman). Этот метод кодирования информации и его модификации широко используются в различных программах сжатия, в частности, он задействован в методе Deflate, который применяется при упаковке данных в формате PNG.

Дискретное косинусное преобразование (Discrete Cosine Transform, DCT) – это математическое преобразование, например, применяемое в алгоритмах сжатия данных с потерями, в том числе MPEG (видео) и JPEG (статичные изображения).

Киберучения: как отработать реагирование на атаки хакеров на полигоне

Безопасность

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

Тем не менее, проект привлек внимание программистов-энтузиастов, которые моментально предложили целый ряд изменений, направленных на улучшение нового формата. Сам Саблевски в комментариях на Github признается, что не ожидал такого интереса к собственной разработке, которую он называет «до глупости простой» (stupidly simple): «Сказать, что я удивлен тем количеством внимания, которое этому уделяется, было бы преуменьшением».

Особенности метода сжатия

Как объясняет Саблевски в своем блоге, QOI кодирует и декодирует изображение в один проход, то есть каждый пиксель (минимальный элемент растрового изображения) обрабатывается алгоритмом единожды. Закодирован пиксель может быть четырьмя разными способами, в зависимости от параметров его «соседа».

Если анализируемый алгоритмом пиксель по цвету (записываются в формате RGB или RGBA) совпадает с предыдущим, то вместо записи его полной характеристики счетчик повторений увеличивается на единицу . Таким образом, данный алгоритм сжатия, известный как RLE (Run-length encoding, «кодирование повторов»), будет обеспечивать высокую степень сжатия при наличии множества точек одного цвета, расположенных в ряд по горизонтали.

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

Алгоритм предполагает формирование и поддержание в актуальном состоянии массива из 64 последних проанализированных пикселей. Если анализируемый пиксель совпадает с одним из «запомненных» кодировщиком, то сохраняется соответствующий ему индекс.

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

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

Дмитрий Степанов

РАЗНИЦА МЕЖДУ PNG 8 И PNG 24 | СРАВНИТЕ РАЗНИЦУ МЕЖДУ ПОХОЖИМИ ТЕРМИНАМИ — ТЕХНОЛОГИЯ

PNG 8 против PNG 24 PNG — это формат файла изображения, используемый для хранения изображений, которые необходимо передавать по сети. Следовательно, эти изображения относительно меньше файлов формато

PNG 8 против PNG 24

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

Формат файла PNG

PNG (произносится как ping) — это формат файла, разработанный как открытое решение для запатентованного тогда формата файлов GIF. PNG означает пстол Networks граммрафика. PNG был разработан для передачи изображений через Интернет, а не для высококачественной печати.

В общем, PNG — это формат растровой графики со сжатием данных без потерь. Он поддерживает изображения на основе палитры (с палитрами 8-битных цветов RGB, 24-битных RGB или 32-битных цветов RGBA). Полутоновые изображения (с альфа-каналом или без него) и полноцветные изображения RGB без палитры (с альфа-каналом или без него) также поддерживаются форматом PNG. Поскольку он не разработан для печати, он не поддерживает такие цветовые схемы, как CMYK, которые обычно используются в полиграфической промышленности. Файлы PNG используют расширение файла .png.

PNG 8

PNG 8 — это 8-битная версия формата PNG. Поскольку каждый цвет пикселя представлен строкой из 8 бит, изображения PNG 8 могут отображать только 256 цветов. В некоторых случаях изображения могут быть сохранены с меньшим количеством битов, например, 2-битные и 4-битные. В каждом случае количество доступных цветов становится меньше. Поэтому формат файла PNG лучше всего подходит для изображений с небольшими цветовыми вариациями, таких как значки и знаки различия, и не подходит для таких изображений, как фотографии. PNG 8 поддерживает только сжатие без потерь.

PNG 24

PNG 24 — это файлы PNG с 24-битными цветами. В этом формате можно использовать более 16 миллионов доступных цветов (224). Следовательно, информация, которая может храниться в файле PNG 24, намного больше; следовательно, качество изображения намного лучше. Он может использовать цветовые схемы True Color или RGB. Таким образом, формат PNG 24 подходит для хранения фотографических изображений и изображений с резкими вариациями и широким диапазоном цветов.

PNG 8 против PNG 24

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

• PNG использует сжатие без потерь для кодирования.

• PNG 8 обычно называют файлом PNG с 8-битной глубиной цвета; однако файлы PNG с меньшей глубиной цвета (например, 4-битные и 2-битные) также включены в эту категорию.

• PNG 24 — это 24-битная версия типа файлов PNG, которая может содержать около 16 миллионов цветов; поэтому поддерживаются схемы RGB и truecolor.

• PNG 8 относительно меньше, чем PNG 24.

• PNG 8 подходит для изображений с меньшим количеством данных о цвете и деталях. PNG 24 подходит для фотографических изображений с цветовыми вариациями и широкой цветовой гаммой.

• Изображение PNG 8 можно сохранить как файл PNG 24 без потери данных, но во время преобразования изображения PNG 24 в изображение PNG 8 происходит серьезная потеря деталей.

PNG или JPG: какой формат лучше для вашего сайта?

При создании веб-сайта вы должны использовать изображения JPG и PNG в правильном контексте. Но в чем разница между ними и что вы должны использовать в своих проектах? Мы собираемся обсудить, что это такое, как они возникли и как их правильно использовать.

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

В начале: были гифки

Еще во времена коммутируемого доступа CompuServe был первым крупным поставщиком онлайн-услуг, предлагающим электронную почту и другие услуги для пользователей персональных домашних компьютеров. Они предлагали загрузку изображений, но, поскольку большинство людей использовали модемы, работающие с невероятно низкой скоростью 1200 бит в секунду, были значительные ограничения в том, что они могли предложить.

Стив Уилхайт работал компьютерным специалистом в CompuServe. Ему было поручено найти решение, позволяющее снимать большое изображение и уменьшать размер файла. Формат обмена графикой, или GIF, стал результатом этой работы. Основанный на алгоритме LZW, формат GIF мог брать огромное изображение и уменьшать его до небольшого размера файла. В отличие от формата файла XBM, другого популярного в то время типа, который был ограничен черно-белым, он мог захватывать 8-битный 256-дюймовый диапазон цветов, который был стандартом.

GIF-файлы как наиболее широко используемый формат веб-изображений потерпят крах в середине 90-х годов. Компьютеры и Интернет продвинулись вперед, и возможности изображения формата GIF не могли приспособиться к этим технологическим скачкам. Также был вопрос о лицензировании. Владелец патента на алгоритм LZW решил взимать плату с тех, кто использовал GIF в своих приложениях. PNG были свободны от патентов, что способствовало их широкому распространению.

Формат PNG обеспечивает улучшенные цвета и улучшенное качество изображения.

PNG расшифровывается как Portable Networks Graphics и представляет собой растровый формат файлов. В отличие от скудных 8-битных ограничений типа файлов GIF, он предлагает 24-битные впечатляющие цвета. Это был огромный шаг вперед в середине 90-х. PNG смогли предложить вселенную оттенков и оттенков с более высоким разрешением за счет сжатия данных без потерь. Сегодняшние файлы переносимой сетевой графики также могут работать в 48-битном и даже 64-битном форматах. PNG остались и по-прежнему являются популярным форматом, который можно найти в Интернете.

JPEG позволил делать огромные файлы намного меньше

Так же, как PNG по-прежнему широко используются, JPEG по-прежнему превалирует в веб-публикациях. Формат файла JPEG (также называемый JPG), сокращенно от Joint Photographic Experts Group, предшествовавший PNG, был запущен в 1992 году, но его развитие можно проследить до 1986 года.

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

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

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

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

Сжатие без потерь

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

Сжатие с потерями

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

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

JPG против PNG: что выбрать для своего веб-дизайна?

Оба эти типа файлов занимают достойное место в веб-дизайне. Выбираете ли вы файлы jpeg или формат png, зависит от содержимого изображений.

Как использовать JPG

Преимущества

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

Недостатки

Если вы хотите, чтобы изображения имели прозрачный фон, вам не повезло с JPG, независимо от того, что вы делаете с ними в Photoshop. Вам нужно будет использовать PNG, у которого есть целый канал, посвященный прозрачности. У файлов JPEG всегда однотонный цвет фона.

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

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

Как использовать PNG

Преимущества

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

PNG — отличный формат файлов для каркасов, в которых много текста и прямых линий. Они также отлично подходят для создания снимков экрана. Этот формат изображения сохраняет свое высокое качество даже при сжатии и работает как для сложных, так и для простых изображений.

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

Недостатки

Поскольку PNG-файлы предлагают лучшее разрешение, почему бы не использовать их повсюду? Размер файла — это проблема. Веб-дизайн, набитый файлами PNG, а не несколькими, будет загружаться намного медленнее, чем если вы используете JPEG. Страница, которая не загружается быстро, может повредить SEO сайта, а также заставить людей скакать в ожидании появления изображений. Это особенно верно, когда размер файла изображения превышает 300 КБ.

Адаптивный дизайн и оптимизация изображений

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

Адаптивный дизайн — это набор рекомендаций, направленных на создание единообразного взаимодействия с пользователем для всех, кто просматривает веб-сайт. Независимо от размера или разрешения экрана, необходимо оптимизировать типы файлов изображений JPG и PNG.

В прошлом обслуживание изображений с различным масштабом выполнялось через исходный код с использованием атрибутов srcset и sizes. Если бы вы знали, как программировать, это не было бы большой проблемой, но приходилось уделять дополнительное время заботе о каждом экземпляре изображения. Если бы вы не были настолько опытны в HTML, это могло бы разочаровать.

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

Еще одна ошибка, которую допускают многие начинающие дизайнеры, — это включение текста в изображение. В некоторых случаях это может потребоваться, но это случается редко. Интеграция текста в изображения может вызывать всевозможные странности, когда они сжимаются или нуждаются в увеличении или уменьшении масштаба. Это также не очень хорошая практика доступности. Поскольку те, кто использует программы чтения с экрана, не смогут сказать, что сказано на изображении. Вот почему альтернативный текст чрезвычайно важен для всех изображений на вашем веб-сайте, что вы можете легко добавить в Webflow.

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

Храните исходные файлы в надежном месте

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

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

PNG и JPG — оба практичных типа файлов изображений.

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

Легко запутаться, сохранять ли файл в формате JPG или PNG. Общее правило — использовать JPG для фотографий, изображений без прозрачного фона и других файлов с интенсивным использованием памяти. И выбирать PNG для графики, файлов с прозрачным фоном и других изображений, для которых важны четкость и яркость цвета.

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

Форматы: PNG

Также известен как: Portable Network Graphics Format

Тип	Растровый
Цвета	От 1-бита до 48-бит
Сжатие	Разновидность LZ77
Максимальный размер изображения	2Г x 2Г пикселей
Формат чисел	«Старший в младшем»
Больше одного изображения в файле	Нет
Разработчик	Томас Бутелл, Том Лейн и многие другие
Платформы	Все
Поддерживается приложениями	Многими коммерческими пакетами и бесплатными пакетами с коммерческой лицензией
См. также	GIF

Применение:
Формат PNG позволяет хранить без потерь изображения от двухуровневых до 48-битовых полноцветных. Он специально предназначен для передачи графических данных в сети.

Комментарии:
Формат PNG хорошо продуман и разработан, и скорее всего он заменит формат GIF от фирмы CompuServe.

Спецификация формата PNG

Исходники

PNG (произносится «Пинг») — растровый формат, предназначенный для хранения и передачи растровых изображений: черно-белых и альфа данных — до 16 бит, а цветных — до 48 бит (truecolor). Он использует прогрессивный метод сжатия без потерь, позволяет сохранять в файле палитру, текстовую информацию и обеспечивает прозрачность.

Содержание:
Организация файла
Детальное описание
Дополнительная информация

Формат PNG создан, как альтернатива формату GIF от CompuServe, потому что фирма CompuServe, владея правами на этот формат, запрещало свободное использование метода сжатия LZW (сжатие, используемое в GIF — файле) в программных продуктах. (См. статьи на тему юридических аспектов метода сжатия LZW в Главе 9, Сжатие Данных.) В шутку аббревиатуру PNG рекурсивно расшифровывают — «PNG’s Not GIF» («ПНГ — Не ГИФ»).

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

PNG и GIF89a обладают следующими свойствами:

Формат организован в виде потока данных
«Сжатие без потерь»
Позволяет хранить индексированные изображения с палитрой до 256 цветов
Прогрессивное отображение чересстрочных данных
Поддержка «прозрачного цвета»
Возможность хранить данные общего и ограниченного доступа.
Не зависят от «железа» и платформы

Ниже перечислены преимущества PNG над GIF в общих чертах:

Метод сжатия данных не обременён юридическими проблемами
Более быстрое прогрессивное отображение чересстрочных схем
Расширенные возможности хранения пользовательских данных

А следующие возможности PNG в формате GIF вообще отсутствуют:

Хранение полноцветных 48-битовых изображений.
Хранение 16-битовых чёрно-белых изображений
Полный Альфа-канал
Указатель на контрастность
CRC — метод обнаружения ошибок в потоке данных
Стандартный инструментарий для разработки приложений чтения и записи PNG
Стандартный набор тестовых изображений для проверки этих приложений

Но, всё же, некоторые особенности GIF не найдены в PNG версии 1.0:

Возможность хранения нескольких изображений в одном файле.
Анимация

В отличие от многих других форматов, создатели которых (2-3 программиста) не заботятся о дальнейшем его развитии, PNG был создан особым комитетом, в состав которого вошли заинтересованные в этом специалисты и противники GIF (в список авторов спецификации PNG версии 1.0 вошли 23 фамилии) во главе с Томасом Бутеллом.

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

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

Некоторые другие форматы также используют структуру из блоков данных. Наиболее известные среди них: GIF, IFF и RIFF. Данные в этих форматах читаются от начала к концу. Это избавляет от надобности прыгать по файлу, используя начальную адресацию. Это также позволяет без проблем использовать эти форматы с сетевыми протоколами и протоколами передачи данных. Несмотря на то, что эти форматы обычно описываются, как форматы файлов, более точным определением будет поток данных, сохранённый в файле.

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

Заголовочный блок (IHDR): Заголовочный блок содержит основную информацию о данных изображения и должен быть первым блоком в потоке данных PNG (не допускается более одного заголовочного блока).
Блок палитры (PLTE): Палитра несёт в себе данные таблицы цветов, связанный с данными изображения. Этот блок присутствует только если данные изображения используют палитру и должен находиться перед этими данными.
Данные изображения (IDAT): Блок данных изображения содержит в себе само изображение, и допускается несколько таких блоков в потоке данных, причём все они должны вплотную примыкать друг к другу.
Замыкающий блок изображения (IEND): Замыкающий блок изображения должен находиться в конце файла или потока данных PNG.

Среди этих блоков, IHDR, IDAT и IEND должны присутствовать в любом потоке данных PNG.

Рассмотрим 2 типичных вида PNG файлов: один с цветовой палитрой, один без.

Подпись

Блок IHDR

Блок IDAT

Блок IEND

Подпись

Блок IHDR

Блок PLTE

Блок IDAT

Блок IEND

Как видите, разница межу 2 типичными форматами PNG лишь в наличии блока с палитрой.

Необязательные блоки, именуемые вспомогательные блоки, могут быть игнорированы программой чтения и необязательны для включения в файл программами записи PNG файлов. Тем не менее, отсутствие поддержки вспомогательных блоков может сказаться на непрвальном отображении изображения PNG. Оно может быть слишком затемнённым, слишком светлым или вообще отображаться в совершенно другом виде, не задуманном создателем этого изображения. Рекомендуется поддержка и использование большинства стандартных и вспомогательных блоков (в частности, блока Контрастности Изображения) программами, работающими с PNG.

Вместе критические и вспомогательные блоки, определённые в спецификации PNG, соответствуют термину стандартные блоки. Люди, создающие разные спецификации PNG, ведут список дополнительных блоков, именуемых иначе специальные блоки, подлежащие огласке. Эти блоки имеют специальное применение и используются гораздо реже стандартных блоков. Список этих специальных блоков время от времени должен обновляться. Некоторые приложения могут создавать частные, закрытые для общего доступа блоки для данных, которые не должны читаться другими приложениями.

Ниже вкратце описаны все стандартные и специальные блоки, объявленные в издании 1.0 спецификации PNG и связанной с ней документации. Блоки распределены в относительном (но не единственно возможном) порядке, в котором они могут быть организованы в потоке данных PNG.

Таблица PNG-1: Блоки PNG
Тип блока	Многократный	Необязательный	Положение в файле
IHDR	Нет	Нет	Первый блок
cHRM	Нет	Да	Перед PLTE и IDAT
gAMA	Нет	Да	Перед PLTE и IDAT
sBIT	Нет	Да	Перед PLTE и IDAT
PLTE	Нет	Да	Перед IDAT
bKGD	Нет	Да	После PLTE и перед IDAT
hIST	Нет	Да	После PLTE и перед IDAT
tRNS	Нет	Да	После PLTE и перед IDAT
oFFs	Нет	Да	Перед IDAT
pHYs	Нет	Да	Перед IDAT
sCAL	Нет	Да	Перед IDAT
IDAT	Да	Нет	Вместе с остальными блоками IDAT
tIME	Нет	Да	В любом месте
tEXt	Да	Да	В любом месте
zTXt	Да	Да	В любом месте
fRAc	Да	Да	В любом месте
gIFg	Да	Да	В любом месте
gIFt	Да	Да	В любом месте
gIFx	Да	Да	В любом месте
IEND	Нет	Нет	Последний блок

Подпись PNG длиной в 8 байт содержит информацию для определения файла или потока данных, в согласии со спецификацией PNG.


typedef struct _PngSignature
{
    BYTE Signature[8];  /* Идентификатор (всегда 89504E470D0A1A0Ah) */
} PNGSIGNATURE;

Подпись содержит 8 байт со значениями: 89h 50h 4Eh 47h 0Dh 0Ah 1Ah 0Ah («‰PNG\r\n\n»). Эта на вид беспорядочная последовательность значений имеет довольно много практических назначений. Значение первого байта — 89h — 8-битовое значение, указывающее на то, что файл содержит двоичные данные. Если бы каждый 8-й бит был бы вырван из файла (7-битовый канал данных), то первый байт принял бы значение 09h, что указало бы на причину, по которой испорчен файл.

Остальные байты имеют следующее назначение:

Позволяют визуально определить поток данных (50h 4Eh 47h — «PNG»)
Определяют передачу файла, изменяющую последовательность символов «новой строки» («\r\n» становится «\r», «\n» или «\n\r»)
Останавливает чтение потока данных PNG в операционной системе MS-DOS (Control-Z [«»])
Определяет CR/LF преобразовательные ошибки передачи файлов (завершающий символ новой строки)

После подписи следуют 3 или более блоков данных PNG. Все блоки PNG имеют одинаковый основной формат и могут содержать переменное количество данных.


typedef struct _PngChunk
{
    DWORD DataLength;   /* Размер поля данных в байтах */
    DWORD Type;         /* Код, идентифицирующий тип блока */
    BYTE  Data[];       /* Собственно данные, хранящиеся в блоке */
    DWORD Crc;          /* CRC-32 значение полей Type и Data */
} PNGCHUNK;

DataLength — число байтов в поле Data. Это значение может варьироваться от 0 до 2³¹-1.

Type — 4-х байтовый код, идентифицирующий тип хранящихся данных в блоке. Каждый байт в этом поле может содержать значение заглавного или прописного латинского символа таблицы ASCII (A-Z, a-z). На пример, тип блока IHDR будет выражен значением 69484452h в поле Type. Программа чтения PNG должна рассматривать коды Type как 32-битовые буквенные значения, не являющиеся символьными строками. Возможность чтения кодов типов как символов таблицы ASCII существует лишь для удобства человеку.

Поле Data — собственно данные, хранящиеся в блоке. Это поле может иметь нулевую длину, если не существует связанных с ним данных.

Crc — CRC-32 значение, просчитываемое для полей Type и Data. Это значение используется для определения, являются ли данные повреждёнными. В PNG используется алгоритм CRC, определённый в ISO 3309 и ITU-T V.42.

Блоки бывают размером от 12 байт (не содержат данных) до (2³¹-1)+12 байт. Блоки всегда выравниваются по границам байтов, и поэтому никогда не требуется выравнивание заполнением.

Критические блоки

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

Заголовочный блок

Заголовочный блок содержит информацию о данных изображения в PNG файле. Этот блок должен быть первым блоком в потоке данных PNG и следует непосредственно за подписью PNG. Область данных заголовочного блока составляет 13 байт и имеет следующий формат:


typedef struct _IHDRChunk
{
    DWORD Width;        /* Ширина изображения в пикселях */
    DWORD Height;       /* Высота изображения в пикселях */
    BYTE BitDepth;      /* Количество битов на пиксель и образец */
    BYTE ColorType;     /* Индикатор интерпретации цвета */
    BYTE Compression;   /* Индикатор типа сжатия */
    BYTE Filter;        /* Индикатор типа фильтра */
    BYTE Interlace;     /* Тип использованной схемы чересстрочной развёртки */
} IHDRCHUNK;

Поля Width и Height — высота и ширина растрового изображения в пикселях. Принимают значения от 1 до 2³¹-1.

BitDepth — количество битов на пиксель для изображений с индексированными цветами и количество битов на образец для чёрно-белых изображений и полноцветных изображений (24 бита). У индексированных изображений BitDepth может принимать значения 1, 2, 4 и 8. У чёрно-белых — 1, 2, 4, 8 и 16. У полноцветных изображений без альфа данных, а также у чёрно-белых изображений с альфа данными, BitDepth может принимать только значения 8 и 16.

ColorType определяет способ интерпретации данных изображения. Принимаемые значения (вид изображения): 0 (чёрно-белое), 2 (полноцветное), 3 (индексированное изображение), 4 (чёрно-белое с альфа данными) и 6 (полносветное с альфа данными).

Compression определяет вид сжатия данных изображения. В настоящее время единственное допустимое значение — 0, означающее, что использован метод сжатия Defalte. Другие методы сжатия будут определены в будущих добавлениях PNG.

Filter определяет вид фильтрования, применённый к данным изображения перед сжатием. На сегодняшний день, единственное допустимое значение — 0, означающее, что был применён метод фильтрования adaptive, описанный в спецификации PNG. Другие методы фильтрования будут определены в будущих добавлениях PNG. Значение поля filter не указывает, были ли данные изображения профильтрованы; на это указывает байт filter type в начале каждой строки развёртки. Данные изображения не обязательно должны быть профильтрованы перед сжатием.

Interlace определяет чересстрочный алгоритм, используемый для хранения данных изображения, или, если быть более точным, порядок передачи пиксельных данных. Принимаемые значения — 0 (нет чересстрочности) и 1 (чересстрочность Adam7).

Палитра

Палитра (PLTE) всегда присутствует в потоках данных PNG, содержащих изображения с индексированными цветами (когда поле Color заголовочного блока имеет значение 3). Полноцветные потоки данных PNG (значения поля Color — 2 и 6) также могут содержать палитру, предназначенную для разбития данных изображения на подгруппы приложениями, не поддерживающими полноцветную палитру. Поток данных PNG не может содержать более одной палитры.

Палитра может быть размером от 3 до 768 байт и имеет следующий формат:


typedef struct _PLTEChunkEntry
{
    BYTE Red;           /* Красный компонент (0 = чёрный, 255 = максимум оттенка) */
    BYTE Green;         /* Зелёный компонент (0 = чёрный, 255 = максимум оттенка) */
    BYTE Blue;          /* Синий компонент (0 = чёрный, 255 = максимум оттенка) */
} PLTECHUNKENTRY;
PLTECHUNKENTRY PLTEChunk[];

PLTEChunk — массив, содержащий от 1 до 256 элементов, каждый из которых содержит 3 поля: Red, Green и Blue, хранящие соответственно значения красного, зелёного и синего цветов для данного элемента палитры.

Блок данных изображения

блок данных изображения (IDAT) содержит собственно данные изображения. В соответствии со спецификацией PNG эти данные всегда хранятся в сжатом виде. Данные изображения могут быть разбиты на несколько IDAT блоков, чтобы программе записи PNG было легче буферизировать сжатые данные изображения. У сжатого потока данных нет пределов, потому IDAT блок может быть в размере от 0 до 2³¹-1 байт.

Замыкающий блок изображения

Последний блок потока данных PNG — замыкающий блок изображения (IEND). Этот блок не содержит никаких данных.

Вспомогательные блоки

В PNG v1.0 определено 10 вспомогательных блоков, которые могут присутствовать в потоке данных PNG. Информация некоторых из этих блоков обеспечивает правильную интерпретацию данных изображения (например, Image Gamma — контрастность изображения). Краткое описание формата поля Data каждого их таких блоков приведено ниже. Полная информация об этих блоках содержится в спецификации формата PNG.

Блок Фонового Цвета

Блок Фонового Цвета определяет цвет фона изображения. Замечание: некоторые программы чтения PNG могут игнорировать этот блок и использовать цвет фона по их усмотрению.

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


typedef struct _bKGDChunkEntry
{
    BYTE Index;    /* Индекс цвета фона в палитре */
} BKGDCHUNKENTRY;

В чёрно-белых изображениях с данными или без данных альфа канала (ColorType = 0 или 4), блок цвета фона длиной 2 байта содержит уровень оттенка серого, используемого в качестве цвета фона.


typedef struct _bKGDChunkEntry
{
    WORD Value;   /* Значение уровня серого у фона */
} BKGDCHUNKENTRY;

У полноцветных изображений с данными или без данных альфа канала (ColorType = 2 и 6), блок цвета фона три 2-байтовых значений, определяющих цвет фона в формате RGB.


typedef struct _bKGDChunkEntry
{
    WORD Red;   /* Уровень красного в цвете фона */
    WORD Green; /* Уровень зелёного в цвете фона */
    WORD Blue;  /* Уровень синего в цвете фона */
} BKGDCHUNKENTRY;

Блок Основных Цветов и Белой Точки

Блок Основных Цветов и Белой Точки содержит информацию о RGB значениях, основанных на 1931 CIE цветовом координатном пространстве XYZ. Определены цвета только по осям x и y, и они представлены в виде значений, помноженных на 100 000.


typedef struct _cHRMChunkEntry
{
    DWORD WhitePointX;   /* Значение Белой Точки по x */
    DWORD WhitePointY;   /* Значение Белой Точки по y  */
    DWORD RedX;          /* Значение Красного по x */
    DWORD RedY;          /* Значение Красного по y */
    DWORD GreenX;        /* Значение Зелёного по x */
    DWORD GreenY;        /* Значение Зелёного по y */
    DWORD BlueX;         /* Значение Синего по x */
    DWORD BlueY;         /* Значение Синего по y */
} CHRMCHUNKENTRY;

Блок Контрастности Изображения

Блок контрастности изображения содержит значение изначальной контрастности в соответствии с изначальным изображением. Это значение — контрастность, помноженная на 100 000. Замечание: настоятельно рекомендуется авторами PNG обрабатывать блок контрастности.


typedef struct _gAMAChunkEntry
{
    DWORD Gamma;    /* Значение контрастности */
} GAMACHUNKENTRY;

Блок Гистограммы Изображения

Блок Гистограммы изображения содержит данные о приблизительной частоте использования каждого цвета в палитре. Этот блок содержит массив 2-байтовых элементов, по одному на каждый элемент палитры.


typedef struct _hISTChunkEntry
{
    WORD Histogram[];    /* Данные гистограммы */
} HISTCHUNKENTRY;

Блок Фактического Размера в Пикселях

Блок Фактического Размера в Пикселях определяет разрешение, предназначенное для отображения изображения.


typedef struct _pHYsChunkEntry
{
   DWORD PixelsPerUnitX;    /* Пикселей на единицу измерения, ось X */
   DWORD PixelsPerUnitY;    /* Пикселей на единицу измерения, ось X */
   BYTE  UnitSpecifier;     /* 0 = неизвестная, 1 = метрическая единица измерения */
} PHYSCHUNKENTRY;

Блок Значимых Битов

Блок Значимых Битов определяет битовую глубину данных изображения. Если программе записи PNG необходимо сохранить данные изображения с неподдерживаемой битовой глубиной, данные нужно дополнить до следующей ближайшей поддерживаемой битовой глубины. Например, стобы сохранить RGB данные с разрешением 5 бит на пиксель в формате PNG (RGB555), данные изображения необходимо дополнить до 8-битовой глубины (RGB888). Блок значимых битов будет содержать битовую глубину изначальных данных.

Формат данных этого блока может быть 4 разных видов в зависимости от данных изображения, определённых в поле ColorType блока IHDR:


/* Чёрно-белое изображение (ColorType = 0) */
typedef struct _sBITChunkEntry
{
    BYTE GrayscaleBits;    /* Значимые биты чёрно-белого изображения (ColorType 0) */
} SBITCHUNKENTRY;


/* Полноцветное изображение или изображение с индексированными цветами (ColorType = 2 или 3) */
typedef struct _sBITChunkEntry
{
    BYTE RedBits;     /* Значимые биты Красного */
    BYTE GreenBits;   /* Значимые биты Зелёного */
    BYTE BlueBits;    /* Значимые биты Синего */
} SBITCHUNKENTRY;


/* Чёрно-белое изображение с данными альфа канала (ColorType = 4) */
typedef struct _sBITChunkEntry
{
    BYTE GrayscaleBits; /* Значимые биты чёрно-белых данных */
    BYTE AlphaBits;     /* Значимые биты альфа канала */
} SBITCHUNKENTRY;


/* Полноцветное изображение с данными альфа канала (ColorType = 6) */
typedef struct _sBITChunkEntry
{
    BYTE RedBits;     /* Значимые биты Красного */
    BYTE GreenBits;   /* Значимые биты Зелёного */
    BYTE BlueBits;    /* Значимые биты Синего  */
    BYTE AlphaBits;   /* Значимые биты Альфа Канала */
} SBITCHUNKENTRY;

Блок Текстовых Данных

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


typedef struct _tEXtChunkEntry
{
    char Keyword[];      /* Тип информации, содержащейся в поле Text */
    BYTE NullSeparator;  /* Нулевой разделительный символ (NULL) */
    char Text[];         /* Текстовые данные */
} TEXTCHUNKENTRY;

Поле Keyword может быть размером от 1 до 79 байт и может содержать любые печатаемые символы кодовой страницы Latin-1 включая пробелы, кроме нулевого символа (NULL).

Поле NullSeparator — 1 байт со значением 0. Это поле разделяет поля Keyword и Text.

Поле Text — собственно символьные данные, хранящиеся в блоке. Длина этого символа определяется из значения поля DataLength в заголовке блока.

Значение поля Keyword содержит ключевые слова, связанные с данными поля Text. Ниже приведён список ключевых слов, содержащихся в поле Keyword в PNG 1. 0:

Название

Автор

Описание

Авторские права

Время создания

Программное обеспечение

Отказ от права

Предупреждение

Исходник

Комментарии

Дополнительные ключевые слова могут быть объявлены через общедоступную регистрацию или могут создаваться отдельными приложениями.

Блок Времени Последнего Изменения Изображения

Блок Времени Последнего Изменения Изображения содержит время последнего изменения изображения (а не время создания) и имеет следующий формат:


typedef struct tIMEChunkEntry
{
    WORD Year;      /* Значение года (например 1996) */
    BYTE Month;     /* Значение месяца (1-12) */
    BYTE Day;       /* Значение дня (1-31) */
    BYTE Hour;      /* Значение часа (0-23) */
    BYTE Minute;    /* Значение минуты (0-59) */
    BYTE Second;    /* Значение секунды (0-60) */
} TIMECHUNKENTRY;

Блок Прозрачности

Блок Прозрачности содержит значение прозрачного (ключевого) PNG изображения, не содержащего соответствующих альфа данных. Значения пикселей для полноцветных и чёрно-белых изображений, совпадающих с прозрачным цветом, считаются прозрачными (альфа значение — 0), остальные же считаются непрозрачными.

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

Допустимы 3 формата данных в этом блоке, в зависимости от формата данных изображения, на которые указывает поле ColorType блока IHDR:


/* Чёрно-белое изображение (ColorType = 0) */
typedef struct _tRNSChunkEntry
{
    WORD TransparencyValue;    /* Цвет прозрачности */
} TRNSCHUNKENTRY;


/* Полноцветное изображение (ColorType = 2) */
typedef struct _tRNSChunkEntry
{
    WORD RedTransValue;        /* Красная составляющая цвета прозрачности */
    WORD GreenTransValue;      /* Зелёная составляющая цвета прозрачности */
    WORD BlueTransValue;       /* Синяя составляющая цвета прозрачности */
} TRNSCHUNKENTRY;


/* Изображение с индексированными цветами (ColorType = 3) */
typedef struct _tRNSChunkEntry
{
    BYTE TransparencyValues[];  /* Цветы прозрачности */
} TRNSCHUNKENTRY;

Блок Сжатых Текстовых Данных

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

Данные Изображения

Данные Изображения PNG представлены в растровом виде со строками развёртки, направленными слева направо и сверху вниз. Пиксели всегда уплотнены в этих строках и не дополняются битами для выравнивания границы байтов между пикселями. Пиксели размером менее 8 бит упакованы в байт крайнего левого пикселя, занимая наиболее значимые биты в байте.

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

Значения данных изображения глубиной цвета до 8 бит могут быть преобразованы в цветовую палитру либо сохранены в растровых данных в виде чёрно-белых значений. Полноцветные пиксели всегда хранятся в виде 3-х составляющих (красный, зелёный, синий соответственно). Также 4-я составляющая (Альфа канал) может быть включена в каждый полноцветный пиксель.

Чёрно-белые и цветные индексированные растровые изображения содержат по одной составляющей на пиксель, образуя односоставные пиксели. Каждая составляющая в изображении всегда одного и того же размера. Этот размер называется битовой глубиной, равной количеству битов в составляющей. Одиночная составляющая может быть глубиной от 1 до 16 битов. Для изображений с индексированными цветами, битовая глубина определяет максимальное количество цветов в палитре. Форматом PNG не определяется, но и не устраняется двухуровневое растровое отображение.

Многосоставные пиксели содержат 2 или более составляющих на пиксель. Эти составляющие могут быть 8 и 16 битовые, но все составляющие изображения должны быть одного и того же размера. Многосоставные пиксели могут быть от 16 до 64 битов.

Например, типичный чёрно-белый пиксель содержит одну составляющую. Типичный 24-битовый пиксель в формате RGB — три 8-битовых составляющих, а нетипичный 64-битовый пиксель в формате RGBA будет содержать 4 16-битовых пикселя. Обратите внимание, что односоставные и многосоставные пиксели, использующие отличные от 8- и 16-битовых составляющие, должны использовать составляющие ближайшей допустимой глубины. Например, для хранения 10-битовой составляющей, вы должны использовать 16-битовую. Неиспользуемые биты либо забиваются нолями (не рекомендовано для составляющих глубиной менее 8 бит, но для больших глубин забивание нолями позволит значительно улучшить сжатие), либо линейным увеличением масштаба заполняют диапазон допустимых значений (рекомендовано). Создатели PNG рекомендуют быстрый метод увеличения масштаба путём дублирования самых крайних слева значащих битов.

Альфа канал

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

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

Чересстрочность

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

Прогрессивное отображение очень удобно при получении PNG файла через медленный канал связи (например, канал, соединяющий ваш Web-браузер с Интернетом). Эффект постепенного прояснения обычно позволяет пользователю разглядеть изображение до его окончательного отображения. Это свойство очень полезно для изображений-меню на Web-странице или для изображения, нестоящего времени, затраченного на его загрузку.

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

Типичная чересстрочная схема, также используемая в формате GIF, просто реорганизует порядок хранения строк развёртки. Например, строки файла будут хранится не в последовательном порядке (0, 1, 2, 3, 4, 5, 6,. ..), а в чересстрочном (0, 8, 4, 9, 2, 10, 5,…). Формат GIF использует такую же чересстрочную схему, и данные сохраняются (или передаются) в 4 этапа: 1/8, 1/8, 1/4 и 1/2.

В PNG несколько иной подход: создание чересстрочного изображения в 7 этапов по схеме Adam7 (в честь создателя Адама М. Костелло). Первые 6 этапов в этой схеме предназначены для интерпретации всех чётных строк (0, 2, 4, 6,…), а последний 7-й для заполнения оставшихся нечётных сток (1, 3, 5, 7…).

Вместо того, чтобы содержать пиксели для всей строки, исходные 6 этапов содержат лишь некоторые определённые пиксели через строку. В первых 2 этапах содержится 1/64-я всех пикселей изображения, в 3-ем — 1/32-я, в 4-ом — 1/16-я, в 5-м — 1/8, в 6-м — 1/4, а в заключительном 7-м этапе — 1/2 данных изображения.

Изображение на экране постепенно создаётся сначала из квадратов 8×8, затем из прямоугольников 4×8, затем из квадратов 4×4, затем из прямоугольников 2×4, затем из квадратов 2×2 и затем из прямоугольников 1×2. В заключительном этапе заполняются все пиксели нечётных строк.

Чересстрочность Adam7 позволяет намного быстрее прогрессивно отображать пиксели на экране, чем если бы отображались полностью сроки развертки. Пиксели в изображении также расположены в более удобной для человеческого глаза схеме, позволяя разглядеть изображение после загрузки 20% — 30% данных этого изображения, в сравнении с 50% или более данных, необходимых для данных GIF.

Заметьте, что ценой за чересстрочную схему PNG будет размер данных, пропорционально влияющий и на скорость их передачи. Чересстрочная схема GIF просто реорганизует порядок хранения строк развёртки и не имеет значительного влияния на размер строки развертки. В схеме PNG, каждый этап, кроме последнего, содержит несмежные пиксели, например, 1-й этап содержит каждый 8-й пиксель с каждой 8-й строки.

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

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

1	6	4	6	2	6	4	6
7	7	7	7	7	7	7	7
5	6	5	6	5	6	5	6
7	7	7	7	7	7	7	7
3	6	4	6	3	6	4	6
7	7	7	7	7	7	7	7
5	6	5	6	5	6	5	6
7	7	7	7	7	7	7	7

Сжатие данных

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

Метод Deflate — разновидность алгоритма сжатия LZ77, запатентованного (4,464,650) Лемпелом, Зивом, Кохеном и Истманом в 1981 году. Метод Deflate использует передвигающееся по данным окно переменного размера и случайным образом сортированные таблицы для распознавания структуры данных и сжатия их кодировкой Хаффмана. В PNG используется разновидность Deflate без случайных таблиц, и поэтому на него не влияют условия правовых притязаний и лицензионных соглашений.

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

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

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

Фильтр «Перед» сохраняет разность между значением байта текущего пикселя и значения соответствующего байта предыдущего пикселя (прогнозирующий фильтр). Этот метод позволяет вычислить разности одинаковой составной в нескольких многосоставных пикселях. Такой же прогнозирующий алгоритм используется в формате данных TIFF.

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

Фильтр «Траектории» использует линейную функцию для подсчёта значения. Ближайший совпадающий байт слева, верху или сверху слева используется в качестве прогнозирующего значения.

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

Текущая спецификация PNG находится на следующей Web странице:

http://sunsite.unc.edu/boutell/png.html

и следующих FTP сайтах:

ftp://swrinde.nde.swri.edu/pub/png/documents/
ftp://ftp.uu.net:/graphics/png/documents/

Наилучший источник информации о PNG и ресурсы находятся на сайте PNG группы Грега Роулофа:

http://quest.jpl.nasa.gov/PNG/

Вопросы о PNG можно задать службе рассылки новостей comp.graphics.misc, по адресу:

[email protected]

либо главному автору спецификации PNG Томасу Боутеллу:

E-mail: [email protected]

Разработчики PNG могут подписаться на PNG рассылку. Пошлите e-mail по адресу [email protected].

Другие PNG рассылки:

Вышеприведённые рассылки содержат Основное обсуждение PNG, объявления, связанные с PNG, и Обсуждение о внедрении PNG. Для дополнительной информации пошлите e-mail по адресу [email protected] с единственным словом «help» в тексте письма.

Официальный FTP архив PNG:

ftp://ftp.uu.net/graphics/png/

Пример внедрения PNG в программу чтения и записи PNG на языке C доступен по адресу:

ftp://ftp.uu.net/graphics/png/src/

Тестовые изображения PNG для самоконтроля находятся на:

ftp://ftp.uu.net/graphics/png/images/

Материалы о PNG, включая зеркала всех сайтов, находятся на:

ftp://ftp.uu.net/graphics/png/ и на:

ftp://swrinde.nde.swri.edu/pub/png/

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

Группа 42 — авторы библиотеки поддержки PNG формата LIBPNG. Их Web страница содержит раздел, посвящённый разработчикам, который включает библиотеку LIBPNG, спецификацию формата PNG , библиотеку сжатия, и набор тестовых изображений. Бесплатная версия библиотеки находится в наличии. Координаты Группы 42:

Group 42, Inc.
Телефон: 800-520-0042
Телефон: 513-831-3400
E-mail: [email protected]
WWW: http://www.group42.com/

Хороший обзор PNG находится в статье Лии Даниела Крокера:

«PNG: Переносимый сетевой графический формат» в Журнале Доктора Добба том 20, номер 232 от Июля 1995, страницы 36-44.

В текстовом формате вышеупомянутая статья находится на:

ftp://ftp.mv.com/pub/ddj/1995/1195.07/ptot.zip

Статья о PNG от CompuServe:

http://www.compuserve.com/new/news_rel/png2.html

JPEG, PNG, GIF, BMP, RAW. В чем разница между этими форматами?

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

Разберемся, что из себя представляют изображения в JPEG, GIF, PNG, BMP, RAW. В чем разница между этими форматами?

JPEG

JPEG или JPG — на сегодня, пожалуй, самый распространенный формат изображений, названный в честь группы разработчиков Joint Photographic Experts Group. Свою популярность приобрел из-за возможности эффективного сжатия картинок как с потерями качества, так и без них. JPEG очень удобен для интернет-ресурсов, он позволяет заполнить сайты легкими изображениями, с которыми они грузятся практически мгновенно. Да и в коллекции картинок/фотографий каждого из нас большинство файлов это именно JPEG формат.

Второе преимущество формата JPEG — возможность хранить глубину 24 бит/пиксель и отображать свыше более 16 млн цветов. Он хорошо подходит для фото с большим количеством цветовых переходов, которые передаются с минимальными искажениями. По соотношению качества картинки и сжатия данных сейчас это один из самых эффективных форматов.

GIF

Наверняка большая часть наших читателей слышала слово «гифка», которым называют анимированные картинки. Своему происхождению оно обязано формату GIF (Graphics Interchange Format). Этот формат не может похвастаться хорошей цветопередачей из-за 8-битной глубины, зато поддерживает воспроизведение анимации, за что, собственно, и ценится пользователями.

PNG

PNG или Portable Network Graphics создавался как бесплатная альтернатива GIF, который в те времена распространялся строго по лицензии. Ключевая фишка PNG — это сжатие без потерь в качестве. «Вес» изображений в PNG сравнительно большой, зато можно быть уверенным в отсутствии графических артефактов. Это важно для точных чертежей, распознавания текста и прочих прикладных задач.

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

BMP

BMP (Bitmap Picture) был разработан компанией Microsoft для хранения картинок в операционной системе Windows. Распространение получил из-за своей универсальности — поддержка интегрирована в ОС, с форматом работала масса актуальных тогда сторонних программ. Однако на данный момент BMP сильно устарел и особого практического применения не находит. А все из-за огромного размера картинок даже в сжатом виде и очень посредственного качества. Время BMP уже прошло, хранить изображения в нем сейчас нет никакого смысла.

RAW

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

RAW открывает неограниченные возможности для цветокоррекции снимка: можно настроить баланс белого, уменьшить или увеличить экспозицию без потерь качества, добавить резкости, увеличить контраст, использовать один набор пресетов для пакетной обработки серии снимков и многое другое. Но «вес» одного файла в RAW в несколько десятков мегабайт — обычное дело. Для их отображения требуются специальные программы, поэтому для распространения изображений RAW-файлы никто не использует, только для обработки.

Подписывайтесь на наш Яндекс.Дзен, чтобы не пропустить крутые статьи

Telegram-канал с лучшими скидками и оперативным обновлением новостей

Geekville во «Вконтакте» — наша группа со всем актуальным контентом

Объединить Несколько PNG В Один PNG Файл

Объединить несколько PNG файлов в одном онлайн

Объединяйте несколько PNG в один документ профессионального качества бесплатно. Объедините PNG файлы в нужном вам порядке. Наше мощное приложение PNG Merger предназначено для объединения нескольких PNG в один PDF, Word или Web документ. Приложение PNG Merger разработан, чтобы упростить отправку, совместное использование, печать и просмотр PNG файлов. Не стоит тратить время зря, выполняя эти операции вручную. Цель нашей компании — предоставить вам наиболее эффективные решения для обработки документов для оптимизации рабочих процессов вашего офиса.

Объединить несколько PNG в один документ

С помощью онлайн-приложения Слияния PNG вы можете быстро объединить несколько PNG с высокой скоростью и сохранить результат в различных форматах, включая DOCX, PDF, Markdown, HTML, EPUB, PNG и JPG.

Никакого дополнительного программного обеспечения не требуется. Наше веб-приложение быстрое, простое в использовании и на 100% бесплатное.

Программная платформа Aspose Words

Онлайн-приложение PNG Merger разработано на базе программной платформы Aspose Words. Наша компания разрабатывает современные высокопроизводительные решения для обработки документов для различных ОС и языков программирования:

Шаг 2 из 4

Пропустить Следующий

Шаг 3 из 4

Каким образом мы можем улучшить ваш опыт?

Пропустить Следующий

Шаг 4 из 4

Прикрепить мои файлы для анализа проблемы

послать

Большое спасибо за ваш отзыв!
Мы действительно это ценим!

С вашей помощью наши продукты становятся лучше с каждым днем!

Мы рады, что вы довольны нашим приложением! Вы можете поделиться ссылкой со своими друзьями или товарищами по команде:

Поделиться в Facebook

Поделиться в Twitter

Поделиться в LinkedIn

Оставить отзыв

Добавить в закладки

Что такое файл PNG?

PNG (переносимая сетевая графика) — это тип файла изображения, который часто используется в веб-дизайне и творческих проектах с использованием Photoshop или аналогичного программного обеспечения. Это тип файла, который позволяет помещать объект в программное обеспечение с чистым фоном или в виде частично прозрачного изображения, что делает его особенно полезным при создании графики из нескольких слоев, как в случае с брендингом и дизайном логотипов.

PNG обычно занимают больше места, чем альтернативные файлы изображений, поэтому вы можете ограничить количество используемых файлов, если хранение является проблемой.Это связано с тем, что они предлагают гораздо большую детализацию, а также поддерживают шкалу серого, а также 24-битные цветовые пространства RGB и 32-битные цветовые пространства RGBA. Однако они не предназначены для совместимости с моделями CMYK, и их не рекомендуется использовать при работе с печатными материалами. Этот более широкий диапазон поддерживаемых пространств способствует большему размеру файла PNG по сравнению с другими типами.

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

История PNG

Формат PNG был впервые разработан в 1995 году, в то время, когда формат GIF был уже хорошо известен. Чтобы идти в ногу с технологией экрана, требовался более современный формат файла, который становился способным поддерживать гораздо более широкий спектр цветов.

Группа разработчиков объединила свои усилия для создания формата PNG, и было решено, что новый файл изображения должен поддерживать только одно статичное изображение. В октябре 1996 года была создана первая итерация формата файла, а в 1998, 1999 и 2003 годах были выпущены следующие версии, когда он стал международным стандартом.

Когда использовать PNG

Связанный ресурс

IT Pro 20/20: Понимание наших сложных взаимоотношений с AI

В 16-м выпуске IT Pro 20/20 рассматриваются человеческие проблемы, связанные с искусственным интеллектом.

СКАЧАТЬ СЕЙЧАС

файлов PNG иногда может быть больше, чем GIF, поэтому стоит подумать, действительно ли формат файла является лучшим вариантом для конкретного случая использования.Например, если у вас много изображений на одной веб-странице, вы можете подумать о том, чтобы изменить размер изображения, чтобы оно было более низкого качества, или использовать альтернативный формат изображения, который приводит к меньшему размеру файла (например, GIF).

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

Как открывать и редактировать файл PNG

Файлы PNG можно открывать в любом веб-браузере, включая Firefox, Chrome, Edge, Safari и Opera, поскольку в настоящее время это наиболее широко распространенный тип веб-изображений.Если у вас нет программы просмотра изображений на вашем компьютере, вы даже можете открыть ее, перетащив ее со своего рабочего стола в браузер, хотя вы не сможете редактировать ее таким образом.

Файл PNG также можно открывать и редактировать в большинстве программ редактирования изображений, включая Microsoft Paint (несмотря на то, что Microsoft прекращает поддержку встроенной программы редактирования изображений в ближайшем будущем), Paint 3D, GIMP, XnView и, конечно же, Adobe Photoshop.

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

Как преобразовать файл PNG

Вы, конечно, можете преобразовать файл PNG в любой другой популярный формат, включая JPG, ICO, TIF, BMP и GIF, если хотите. Это можно сделать с помощью целого ряда бесплатных онлайн-конвертеров, включая XnConvert, Zamzar, FileZigZag и Adapter.

Рекомендуемые ресурсы

Свет на новые «крутые» облачные технологии и их недостатки

IONOS Cloud Up! Саммит, сессия по облачным технологиям с Расселом Барли

Смотреть сейчас

Создавайте мобильные и веб-приложения быстрее

Три проверенных совета по ускорению разработки современных приложений

Бесплатная загрузка

Снизьте углеродный след ИТ-операций до 88%

Возможность сокращения выбросов углерода

Бесплатная загрузка

Сравнение бессерверных и серверных технологий

Определение общей стоимости владения

Бесплатная загрузка

Что такое файл PNG? Восстановить удаленный или утерянный файл PNG

Что такое файл PNG? Файлы

PNG — это файлы изображений, которые можно легко распознать по расширению файла: PNG или png.Расширение относится к формату файла растровой графики, в котором хранятся изображения. Формат изначально задумывался как замена формата обмена графическими данными (GIF). Проблема с GIF заключалась в том, что он использовал алгоритм сжатия данных Lempel-Ziv-Welch (LZW), который был запатентован Unisys, американской глобальной компанией в области информационных технологий, базирующейся в Блу Белл, штат Пенсильвания.

Руководящая группа Интернет-инжиниринга утвердила PNG в 1996 году и позже опубликовала его в качестве стандарта ISO / IEC в 2004 году.С тех пор формат файлов изображений стал наиболее часто используемым в Интернете форматом сжатия изображений без потерь. Одна из основных причин его успеха — повсеместная совместимость. Все современные операционные системы и веб-браузеры поддерживают PNG со всеми его основными функциями, включая параметры прозрачности, предварительное сжатие и сжатие.

Для чего используется файл PNG?

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

Не то, чтобы мы рассмотрели, что такое формат файла PNG и для чего используется формат файла PNG, нам нужно рассмотреть то, что формат файла PNG не может.Несмотря на то, что он был разработан для замены формата GIF, который допускает анимацию, формат файла PNG является форматом только для одного изображения. Были предприняты попытки расширить сферу его действия, чтобы включить поддержку анимации — особенно в 2001 году с форматом сетевой графики с несколькими изображениями (MNG) и позже в 2008 году с форматом переносимой анимированной сетевой графики (APNG) — но они так и не получили широкой поддержки .

Восстановление PNG

Чтобы восстановить файл PNG, большинство приложений восстановления PNG ищут его начальную 8-байтовую подпись.В эту подпись включены буквы PNG в кодировке ASCII (американский стандартный код для обмена информацией). Это позволяет различать необработанные файлы PNG с помощью простого текстового редактора.

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

Как восстановить файлы PNG с помощью Disk Drill

Получите последнюю версию Disk Drill бесплатно.
Загрузите программное обеспечение на свой компьютер, установите его, следуя инструкциям на экране, и запустите.
Disk Drill проведет вас через процесс восстановления, позволяя выбрать, какие образы следует восстановить.
Когда у вас выбраны изображения PNG, нажмите кнопку «Восстановить».
Теперь ваши изображения должны вернуться в исходное местоположение. Но Disk Drill может сделать гораздо больше, чем просто помочь вам восстановить файлы PNG.

Восстановление данных бесплатно
Ваш помощник для восстановления удаленных файлов

SVG против PNG: в чем разница?

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

PNG — это формат растрового изображения, используемый для полноцветных изображений (в основном фотографий) хорошего качества. Он имеет довольно высокую степень сжатия и поддерживает прозрачность. Хотя он создан для замены GIF, он не поддерживает анимацию и только на 5–20% более сжимается по сравнению с праймером.

SVG и PNG для Интернета

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

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

Давайте рассмотрим все «за» и «против», чтобы решить, когда использовать SVG, а когда PNG.

SVG лучше, чем PNG?

Подобно PNG, формат SVG поддерживает прозрачность, подходит для изображений, содержащих текст, и обеспечивает сжатие без потерь.Следующие особенности делают SVG более предпочтительным вариантом для дизайнеров, разработчиков и специалистов по SEO.

SVG Плюсы:

Очень сжимаемый и легкий; качество изображения остается высоким независимо от степени сжатия.
Его легко масштабировать , поэтому он хорошо смотрится на экране независимо от размера изображения.
Это поддерживается всеми современными браузерами (Chrome, Opera, Firefox, Safari, даже Internet Explorer).
Дизайнеры могут создавать простые визуализации SVG в кодовом или текстовом редакторе , а также экспортировать сложную графику из Adobe Illustrator или Sketch.
Текст, вставленный как отдельный слой, делает изображение SVG легко доступным для поиска .
SVG позволяет дизайнерам сохранять статические или анимированные изображения .
Эти изображения легко редактировать , изменяя параметры в коде CSS.
Вы можете сохранять объект несколько раз во время работы с ним, не влияя на исходное качество.

SVG, однако, не является идеальным выбором для каждого случая из-за следующих минусов.

SVG минусы:

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

SVG легче PNG?

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

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

Когда использовать SVG?

Он лучше всего подходит для разработки иконок для веб-сайтов с адаптивным дизайном и объектов, которые должны идеально отображаться на экранах Retina. Масштабирование не влияет на качество, а формат поддерживает неограниченное количество цветов. Используйте SVG, когда вы хотите получить прозрачные изображения, которые можно легко масштабировать или сжимать, вам нужна легкая анимация или вы планируете быстро или часто изменять изображение.

Когда использовать PNG?

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

Итог

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

Если вы работаете с фотографиями, то PNG — единственный подходящий формат.
Если вам нужна анимация, очевидно, что подходит только SVG .
Во всех остальных случаях решайте, что для вас важнее: размер файла и масштабируемость (SVG) или более сложный дизайн изображений (PNG).

Ярослава

Контент-менеджер, маркетолог и SEO-специалист!

3,6 23 голоса

Рейтинг статьи

PNG (переносимая сетевая графика) Домашний сайт

PNG (переносимая сетевая графика) Домашний сайт Если вы используете Windows версию Netscape Navigator и хотите распечатать эту страницу (и при этом иметь возможность читать), щелкните ссылку png-printable в самом низу этой страницы.

FAQ

Открытый расширяемый формат изображения со сжатием без потерь

(

Not Относится к Папуа-Новой Гвинее, Национальные пастбища пауни,
Гильдия профессиональных нумизматов или формат «Pack ‘N’ Go»)

Добро пожаловать на домашний сайт PNG, поддерживаемый Грегом Рулофсом. Наш герой любит говорить о себе от третьего лица, но не позволяйте этому оттолкнуть вас; это в основном серьезный набор справочных страниц для поиска информации, приложений и программирования код, связанный с 26-летним форматом изображений PNG.

Канонический URL: http://www.libpng.org/pub/png/ (Калифорния, США)

Обратите внимание, что домашний сайт PNG перемещался четыре раза с 1995 г. (хотя URL-адрес менялся только три раза и, надеюсь, больше никогда).Текущий сайт проводится отличными людьми из SourceForge.

Веб-сайт PNG разделен на четыре основные категории информации (синий и белые заголовки ниже), не считая отдельного сайта MNG (охватывающего анимированные и потерявшие кузены). А в сборе карта сайта на 110+ страниц доступна, но основы кратко изложены здесь.

Неофициальную историю, приведенную ниже, стоит прочитать как для общие сведения и краткое изложение основных функций PNG, но для большинства непрограммистов вероятно найдет основное введение, FAQ, а может и больше история представлять наибольший интерес и полезность.С другой стороны, списки приложений, поддерживающих PNG, больше не особенно важны (или поддерживаются), поскольку практически все связанные с изображениями Приложение поддерживает PNG уже более десяти лет. Они тоже теперь исторические по своей природе.

Базовое введение в функции PNG ( рекомендуется для новых посетителей )

Текущее состояние PNG ( рекомендуется для новых посетителей )

Часто задаваемые вопросы ( рекомендуется для новых посетителей )

Неофициальная история PNG (и Более подробная история)

Новости Группы Развития ПНГ

Ссылки на другие ресурсы PNG (включает список рассылки )

Техническая документация PNG

PNG: полное руководство и связанные Книги

Приложения с поддержкой PNG

Приложения с поддержкой PNG

Оборудование с поддержкой PNG

Ресурсы для программирования PNG

Информация о программировании PNG:

PNG изображения:

Ссылки на другие ресурсы PNG (включает указатели на другие изображения PNG)

Сетевая графика с несколькими изображениями (MNG) Домашний сайт
(включает JNG: JPEG с альфа-прозрачностью)

What It Be (Неофициальная история)

Так что же такое PNG и почему он достоин собственного домашнего сайта? PNG (произносится «ping») — это формат Portable Network Graphics, формат для хранения растровые изображения на компьютерах.Неофициально его аббревиатура расшифровывается как «PNG не GIF». PNG был разработан, чтобы стать преемником некогда популярного формата GIF, который стал значительно менее популярным прямо перед Новым годом 1995 года, когда Unisys и CompuServe внезапно объявили, что программы, реализующие GIF, потребуют роялти из-за патента Unisys на метод сжатия LZW, используемый в GIF. Поскольку GIF еще до этого показывал свой возраст разными способами, объявление только ускорило разработку нового и значительно улучшенного формат замены.PNG — результат.

( Между прочим, несмотря на упоминания в некоторых старых изданиях CompuServe в выпусках и в редких статьях в отраслевой прессе, развитие PNG не было по инициативе CompuServe или Консорциума World Wide Web, а также это во главе с ними. Представители обеих организаций внесли свой вклад в усилия, но группа разработчиков PNG существует как отдельная, основанная на Интернете организация. )

Однако это только половина дела; PNG заслуживает домашней страницы, даже если все этого не произошло просто потому, что он чертовски хорош.Да это не так каждый день вы сталкиваетесь с форматом изображения и говорите: « Outraaageous! » На самом деле, вы можете никогда не сказать этого за всю свою жизнь (правда, жаль), но PNG все еще круто. Некоторые из его изящных функций включают:

однозначное произношение (ооо, детка!)
несколько CRC, чтобы можно было проверить целостность файла без просмотр
ультра-умная магическая подпись, которая может обнаруживать самые распространенные типы повреждения файлов
сжатие лучше, чем GIF, обычно от 5% до 25% (но часто 40% или На 50% лучше на крошечных изображениях)
не запатентовано (ну конечно!), Сжатие без потерь
в основном грубое двухмерное переплетение схема
Поддержка 1-, 2-, 4- и 8-битной палитры (например, GIF)
Поддержка 1-, 2-, 4-, 8- и 16-битной шкалы серого
8- и 16-битная выборка (то есть 24- и 48-битная) поддержка truecolor
полная альфа-прозрачность в 8- и 16-битном режимах, а не просто включение-выключение прозрачность как гифка
Режим «палитры-альфа», эффективно преобразующий нормальную палитру RGB в RGBA
Гамма-коррекция для кроссплатформенной регулировки «яркости».
цветокоррекция для кроссплатформенной точной цветопередачи
фрагменты сжатого и несжатого текста для информации об авторских правах и другой информации
полная поддержка 2000 года (Y2K), а затем некоторая (подходит для по крайней мере 63 тысячелетия! йауза!)
Бесплатная и полная эталонная реализация с полный исходный код

Не совсем шикарный , но все равно стоит упомянуть:

официально зарегистрированное Интернет-СМИ («MIME») тип: изображение / png

PNG также поддерживает такие вещи, как предлагаемое квантование, «умную» расширяемость, стандартное цветовое пространство и много других отличных вещей, но оставим все это пока в сторону.Тем, кто хочет быстрого объяснения основных функции можно проверить в Основном введении Грега в PNG. Функции. Те, кто хочет , могут найти все кровавых деталей. библиотека с Выпуск июль 1995 г. Дневник доктора Добба и прочтите Статья Ли Крокера в формате PNG; прочтите книгу Грега О’Рейли, PNG: полное руководство ; или прочитайте полную версию Portable Network Graphics Спецификация , достаточно лаконичная W3C Рекомендация (самая первая!) это удивительно хорошо написано и понятно.(У Грега не было участвовал в написании этого факта, чтобы он мог говорить такие вещи.) страница документации PNG для ссылок на простой Версии ASCII, PostScript (размер письма в США) и PDF, а также см. Страница PNG и официальный пресс-релиз ссылки на соответствующую документацию по гамме и цветокоррекции.

Обратите внимание, что спецификация PNG была обновлена до версии . 1.1 в канун Нового 1998 года (то есть 31 декабря 1998 года). Это включены новые блоки для кросс-платформенной цветокоррекции (sRGB и iCCP), переработанное и гораздо более толковое описание гамма-коррекции и ряд другие мелкие улучшения и уточнения (все с полной обратной совместимостью, курс!).Второе, более мелкое обновление ( версия 1.2 ) был освобожден в августе 1999 г .; единственным изменением было добавление iTXt чанк (международный текст).

Кроме того, PNG положила начало долгому процессу международного стандартизация ^* в 1999 г. ( см. 10 мая 1999 г. новости пункт для деталей ), во многом благодаря его включению в VRML97. В конце концов, он завершил этот процесс и стал совместным Стандарт ISO / IEC 15948: 2004 почти пять лет спустя ( см. Новость от 3 марта 2004 г. ), через несколько месяцев после того, как он был также повторно выпущен W3C (с идентичным содержанием) как их « PNG Второй Издание « Рекомендация .

^* PNG уже был частью Профиль MHEG-5 в области цифрового наземного телевидения в Великобритании; MHEG-5 — это международный стандарт системы телетекста следующего поколения, количество функций с HTML. PNG также используется в MHP, домашней мультимедийной платформе на основе Java для цифровых видеосистем, и был включен в HAVi, несколько несуществующий стандарт домашней аудио-видео совместимости для Домашняя сеть на базе 1394.

И официально завершен дизайн мультиизображения для PNG, известного как MNG . (версия 1.0 спецификации MNG был выпущен 31 января 2001 г.), с большим количеством доступных приложений и бесплатная справочная библиотека.

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

Последнее изменение 22 августа 2021 г. , г. Еще бы.
Авторские права © 1995-2021 Грег Рулофс (контакт). png-printable.html

JPG против PNG для Интернета

Как выбрать лучший тип файла изображения для вашего веб-сайта

Мы не будем обсуждать jpg и jpeg в сегодняшнем посте, хотя, проработав почти десять лет, я все еще переключаюсь между ними. Кстати, сегодня это JPG. Двигаемся дальше…

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

JPG

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

В целом JPG

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

JPG отлично подходят для:

Крупногабаритные прямоугольные изображения шапки и главного героя
веб-страниц с большим количеством изображений (галереи и альбомы изображений, каталоги электронной коммерции и т. Д.)

PNG

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

В целом PNG

опора прозрачности
— это файлы большего размера (они «больше весят»)
имеют более медленное время загрузки
четче и качественнее

PNG отлично подходят для:

прозрачных изображений
файлов логотипов
иконок
иллюстраций
сложные изображения меньшего размера
изображений с текстом как частью графики

Другие параметры формата файла изображения

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

SVG — В отличие от JPG и PNG, тип файла SVG является векторным, что означает, что вы можете неограниченно увеличивать и уменьшать размер изображения и никогда не получить размытый результат. Как? На самом деле это довольно просто. В отличие от растровых изображений, векторные изображения не состоят из одноцветных пикселей. Вместо этого файл состоит из линий, точек и кривых. Итак, когда вы увеличиваете и уменьшаете масштаб файла (или увеличиваете / уменьшаете размер), точки и кривые линий подчиняются математическому уравнению.

GIF — файлы GIF используют 265 цветов из RGB, но, как и их аналог PNG, они не содержат потерь. С этим цветовым ограничением вы бы избежали формата GIF, если бы сохраняли фотографию, любую иллюстрацию с градиентом или любое другое красочное изображение. GIF-файлы обычно используются для кнопок веб-сайтов, а иногда и для значков. И, как вы, наверное, знаете, GIF-файлы также поддерживают анимацию.

Инструменты сжатия и оптимизации изображений

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

Крошечный PNG: https://tinypng.com/
Оптимизатор JPEG: http://jpeg-optimizer.com/
Optimizilla: https://imagecompressor.com/
Изменить размер фотографий: http://www.resize-photos.com/

Часто задаваемые вопросы

Какой формат изображения лучше всего подходит для веб-сайта?

Это зависит от того, что вы ищете. Если вам нужно быстро загружаемое сжатое изображение, выберите формат JPG.Если вы ищете высококачественное четкое изображение, выберите PNG.

Какой тип файла мне следует использовать для логотипа моего веб-сайта?

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

Что лучше: PNG или JPG?

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

Что лучше: PNG или JPG?

PNG имеют более высокое качество.

Что такое PNG? PNG против JPEG

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

Что такое файл изображения PNG?

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

PNG означает Portable Graphics Format и может произноситься как «ping» или «P-N-G».

Изображение меча в формате PNG

Существует три типа файлов PNG: растровые изображения без прозрачности; изображения с альфа-каналом, которые содержат непрозрачный фон и прозрачный слой переднего плана; и индексированные цветные изображения (также известные как палитры), в которых используется только 256 цветов из 16 миллионов или более, доступных на большинстве мониторов.

PNG могут иметь формат без потерь, например GIF, но при сохранении могут создаваться файлы большего размера. Другой тип — JPEG, который сжимает фотографию, удаляя некоторую информацию, чтобы сэкономить место и быстрее загружаться в Интернете. При таком сжатии возникает компромисс: страдает качество, потому что каждый раз, когда данные сжимаются, они теряют часть своего исходного качества.

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

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

PNG могут иметь значения RGB (красный-зеленый-синий) или индексированные цвета.

PNG против JPEG

PNG-изображения не содержат потерь по причинам, перечисленным ниже:

Он использует схему непрогрессивного кодирования, которая не удаляет данные с каждым последующим поколением, например JPEG.Это известно как сжатие без потерь.
Использование прозрачности в файлах PNG позволяет сохранять информацию о цвете без каких-либо дополнительных затрат по сравнению с тем, если бы это был непрозрачный формат файла, такой как JPG или GIF; что может привести к значительно более эффективному использованию дискового пространства при одновременном сохранении большого количества изображений (например, снимков экрана).

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

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

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

GIF, PNG, JPG или SVG. Какой использовать?

Если эта статья кажется вам немного знакомой, мы опубликовали ее первое издание еще в 2009 году. Хотя SVG добавил совершенно новое измерение в веб-дизайн, такие вопросы, как «В чем разница между JPEG и PNG?» по-прежнему актуальны как никогда.Мы подумали, что пришло время по-новому взглянуть на состояние дел с форматами веб-изображений.

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

JPG против PNG против GIF против SVG — в чем разница?

	Категория	Поддон	Используйте для
JPG	С потерей	Миллионы цветов	Фотографии Фотография
GIF	без потерь	Максимум 256 цветов	Простая анимация Графика с плоскими цветами Графика без градиентов
PNG-8	без потерь	Максимум 256 цветов	Аналогичен GIF Лучшая прозрачность, но без анимации Отлично подходит для значков
PNG-24	без потерь	Неограниченное количество цветов	Аналогично PNG-8 Обрабатывает неподвижные изображения и прозрачность
SVG	Вектор / без потерь	Неограниченное количество цветов	Графика / логотипы для Интернета Retina / экраны с высоким разрешением

GIF: формат обмена графическими данными

256 цветовая палитра.

Если вы только что не вышли из слегка курящего DeLorean прямо из 1985 года, вы, скорее всего, уже знакомы с самым глупым форматом изображений в Интернете — GIF (Graphics Interchange Format).

Формат GIF — это тип растрового изображения, но, в отличие от JPEG или PNG, файлы GIF ограничены максимальной палитрой 256 цветов. По сути, каждое изображение GIF содержит предустановленную «коробку цветных карандашей», и невозможно полностью смешать эти цвета, чтобы получить новых цветов.

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

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

Категория: Без потерь

Выбрать GIF для:

Простые анимации
Маленькие иконки
Графика с низким уровнем разброса от пикселя к пикселю (т.е.е. много плоских цветов, таких как логотипы и флаги)

JPEG

В зависимости от ваших предпочтений, вы можете называть этот формат «JPEG» или «JPG» — оба являются допустимыми вариантами одного и того же акронима — Joint Photographic Experts Group.

В отличие от GIF, JPEG — это 16-битный формат, что означает, что он может смешивать красный, синий и зеленый свет для отображения миллионов цветов. Это делает JPG очень удобным для фотографий. Отчасти поэтому это стандартный формат для большинства цифровых фотоаппаратов, представленных на рынке.

Формат JPEG также позволяет гибко выбирать степень сжатия изображения — от 0% (сильное сжатие) до 100% (без сжатия). Как правило, настройка сжатия 60% -75% значительно сжимает файл, сохраняя при этом достойный вид на большинстве экранов.

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

Также обратите внимание, что, в отличие от GIF и PNG, JPEG не может сохранять прозрачность.

Категория: Без потерь

Используйте JPEG для:

Фотографии
Фотография
Изображения со сложными цветами и динамичными

PNG

Более новый формат файлов, чем GIF и JPEG, PNG (переносимая сетевая графика) похож на брак между форматами GIF и JPEG благодаря своим двум вариантам.

PNG-8

PNG-8 во многом похож на GIF и использует ту же 256 цветную палитру (максимум). Он имеет лучшие параметры прозрачности и обычно экспортирует файлы немного меньшего размера. Однако PNG-8 не имеет функции анимации.

PNG-24

PNG-24 позволяет отображать изображения с миллионами цветов — как в JPEG — но также предлагает возможность сохранять прозрачность. Поскольку PNG-24 является форматом файлов без потерь, вы, вероятно, получите файлы большего размера, но если качество изображения важнее размера файла, лучшим вариантом будет PNG-24.Даже в этом случае такие сервисы, как TinyPNG.com, часто могут иметь большое значение для размера вашего файла. По сравнению со своим двоюродным братом JPEG файлы PNG-24 не так универсально совместимы со всеми приложениями и платформами, что делает этот формат менее идеальным для обмена в Интернете. Однако его можно редактировать без ухудшения качества.

Категория: Без потерь

Используйте PNG для:

Веб-графика, требующая прозрачности
Цветные тяжелые и сложные фотографии и графика
Изображения, требующие повторного редактирования и повторного экспорта

SVG

В отличие от трех упомянутых выше форматов, SVG (масштабируемая векторная графика) не является чистым растровым форматом.Вместо этого это векторный формат — близкий родственник формату AI и EPS в Adobe Illustrator — который постоянно становится привлекательным вариантом для веб-дизайнеров и дизайнеров пользовательского интерфейса.

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

SVG лучше всего подходит для отображения логотипов, значков, карт, флагов, диаграмм и другой графики, созданной в приложениях векторной графики, таких как Illustrator, Sketch и Inkscape.Написанный в разметке на основе XML, ваш SVG можно редактировать в любом текстовом редакторе и изменять с помощью JavaScript или CSS. Поскольку векторы можно масштабировать до любого размера, сохраняя при этом четкое качество изображения, они идеально подходят для адаптивного дизайна.

Хотя SVG по своей сути является векторным форматом, можно (даже часто) встроить растровую графику внутрь вашего файла SVG — точно так же, как вы могли бы встроить JPEG в свой HTML.

Это можно сделать либо путем ссылки на источник изображения через его URL-адрес (как вы могли бы ссылаться на JPG на веб-странице), либо путем инкапсуляции пиксельного изображения как URI данных.Это дает SVG непревзойденную гибкость и мощность.

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

Онлайн-сервисы, такие как WordPress, Flickr, Medium, Tumblr и Facebook, либо принудительно конвертируют ваш SVG в формат, который им нравится, либо, что более вероятно, полностью заблокируют вашу загрузку SVG. Есть несколько вариантов хостинга SVG, включая svgur.com, imgh.us и даже Github, как здесь продемонстрировал Алекс.

Как бы я ни был рад видеть, что меньшие службы хостинга используют SVG, Github в настоящее время является единственным сервисом, поддерживающим SVG, я уверен на 99%, что он появится через 5 лет. Если вы используете SVG для веб-дизайна, вы обнаружите, что почти всегда можете уменьшить размер файла по сравнению с чем-то вроде JPEG или PNG. Но учтите, что чем сложнее ваш SVG, тем больше станет файл.

Категория: Вектор / без потерь

Используйте SVG для:

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

Сравнение и контраст

Теперь, когда мы рассмотрели различия между популярными форматами файлов, пора рассмотреть их рядом. Ниже вы увидите, как форматы GIF, JPEG, PNG и SVG обрабатывают изображения как с простыми, так и со сложными цветами, а также с фотографическими изображениями.

Плоская цветная графика

Первый тип изображений, который мы рассмотрим, — это плоская цветная графика. Это касается большинства логотипов и брендов, значков, простых карт, диаграмм и диаграмм. Исходное изображение — 23.Изображение в формате PNG размером 4 КБ и размером 1280 x 1280.

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

GIF: 17,6 КБ

JPEG 100% (без сжатия): 53,3 КБ

JPEG 75%: 33 КБ

PNG-8: 11,8 КБ

PNG-24: 19,6 КБ

SVG: 6 КБ (как чистая векторная графика)

В случае с этим конкретным изображением, при сравнении шести форматов нет большой потери качества, хотя вы заметите небольшие артефакты по краям внутри сжатого JPEG.Это не всегда верно с однотонной цветной графикой, но в большинстве случаев вам будет достаточно изображения с наименьшим количеством байтов. Для этого изображения, если у нас есть исходный векторный файл, очевидным выбором будет SVG размером 6 КБ. Если у нас нет вектора, вариант PNG-8 является достойной альтернативой, поскольку исходное изображение уменьшено с 23,4 КБ до 11,8 КБ.

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

Исходное изображение представляет собой изображение в формате JPEG размером 328 КБ и размером 1280 x 960. Ниже вы сможете увидеть разницу в размере сжатия, а также в качестве изображения.Обратите внимание, что изображения были сохранены с помощью функции Photoshop «Сохранить для Интернета и устройств» с настройками высочайшего качества.

Поскольку у нас нет доступа к векторной версии этого файла, любая SVG-версия этого изображения будет просто JPEG, встроенным в SVG. Это делает его немного избыточным, поэтому я не буду приводить здесь пример SVG.

GIF: 426kb

JPEG 100% (без сжатия): 776 КБ

JPEG 75%: 215 КБ

PNG-8: 327 КБ

PNG-24: 1.7 МБ

Изображения со сложными цветами выглядят лучше при использовании формата JPEG, PNG-24 или SVG. Цвета по большей части сохранены и не имеют некрасивых полос и шума, которые могут возникнуть при использовании форматов GIF и PNG-8.

Цветная фотография

Исходное изображение представляет собой изображение в формате JPEG размером 215 КБ и размером 1280 x 701. Ниже вы сможете увидеть разницу в размере сжатия, а также в качестве изображения. Обратите внимание, что изображения были сохранены с помощью функции Photoshop «Сохранить для Интернета и устройств» с настройками высочайшего качества.

Опять же, здесь SVG мало что дает.

GIF: 453 КБ

JPEG 100% (без сжатия): 410 КБ

JPEG 75%: 410 КБ

PNG-8: 395 КБ

PNG-24: 1,03 МБ

Как и в случае со сложными изображениями, ваши фотографии лучше всего сохранять в формате JPEG, PNG-24 или SVG. На фотографии выше цвет остается сохраненным во всех форматах, за исключением полос и шума, которые выделяются в тенях волос, кожи и фона, а также в верхней части фотографии, как видно в выходных файлах GIF и PNG-8.

1	6	4	6	2	6	4	6
7	7	7	7	7	7	7	7
5	6	5	6	5	6	5	6
7	7	7	7	7	7	7	7
3	6	4	6	3	6	4	6
7	7	7	7	7	7	7	7
5	6	5	6	5	6	5	6
7	7	7	7	7	7	7	7

1	6	4	6	2	6	4	6
7	7	7	7	7	7	7	7
5	6	5	6	5	6	5	6
7	7	7	7	7	7	7	7
3	6	4	6	3	6	4	6
7	7	7	7	7	7	7	7
5	6	5	6	5	6	5	6
7	7	7	7	7	7	7	7

1	6	4	6	2	6	4	6
7	7	7	7	7	7	7	7
5	6	5	6	5	6	5	6
7	7	7	7	7	7	7	7
3	6	4	6	3	6	4	6
7	7	7	7	7	7	7	7
5	6	5	6	5	6	5	6
7	7	7	7	7	7	7	7