Что такое png файл. Изображение в формате PNG – как открыть, редактировать и конвертировать файл. Дополнительная помощь с файлами PNG

Более того, являясь свободным форматом PNG предлагает для веб дизайнера различные практические преимущества над GIF:

• Лучшее сжатие: Для большинства изображений PNG достигает меньшего размера файла чем GIF
• Большая глубина цвета: PNG предлагает truecolor до 48 бит, когда в GIF мы имеет только 256 цветную палитру
• Прозрачность альфа канала: Когда GIF предлагает только двоичную прозрачность, PNG допускает практически неограниченные эффекты прозрачности, предлагая для прозрачности альфа канал

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

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

Из-за того, что Internet Explorer 6 и более ранние версии не поддерживают полный спектр PNG возможностей (включая прозрачность альфа канала) людям остается верить (хотя это неверно), что Internet Explorer не поддерживает PNG вовсе или как минимум не поддерживает прозрачность. В действительности Internet Explorer 5 и 6 поддерживают достаточно спецификаций PNG, делая его функционально эквивалентным (или более того) неанимированным GIF изображениям. Все другие упоминаемые браузеры, включая Firefox, Netscape 6 и выше, Mozilla, Opera 6 и выше, Safari, и Camino полностью поддерживают PNG прозрачность.

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

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

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

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

Теперь давайте посмотрим на то, как использовать PNG в веб дизайне. Я собрал все файлы для каждого примера в отдельную папку, доступную на friends of ED .

За последние несколько лет, градиент - плавный переход между двумя или более цветами, стал лучшим другом веб дизайнеров. Особенно популярны утонченные, едва различимые градиентные заливки, которые не бросаясь в глаза создают ощущение глубины и фактурности.
Иногда GIF это лучший выбор для градиента. Если градиент это простой двух-цветный переход, GIF в нем работает безукоризненно. Однако, ограниченность GIF только 256 цветами часто создает заметную и неряшливую "полосатость" среди более сложных градиентных переходов. JPEG, с другой стороны, может выводить довольно прятные градиенты, но часто ценой большего размера файла. И пока JPEG градиенты, как правило, достаточно хороши, нужно помнить, что JPEG использует сжатие с потерями, которое означает, что полученное изображение никогда не будет дотягивать до качества несжатой картинки.

Рассматриваемый типичный стиль фонового градиента используется для кнопок, блоков или просто где-то еще. Это может выглядеть как на Рисунке 5-1. По часовой стрелке, от верхнего левого угла, мы видим оригинальное (несжатое) изображение, GIF версию, PNG версию и JPEG. Вы видите, что PNG в результате имеет наименьший размер (515 байт). Это в четыре раза меньше, чем GIF изображение. JPEG немногим больше чем PNG на 637 байт и он к тому-же ниже качеством из-за сжатия с потерями (правда возможность человеческого глаза определить различие в качестве в этом простом примере остается под вопросом).

Рисунок 5-1
Панель Photoshop’а - Save For Web,
показывающая различия файлового размера для одного и того-же изображения в различных форматах

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

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

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

Я знаю, что Вы думаете: вся эта PNG прозрачность хорошо выглядит, но практична ли она?

Хорошие новости заключаются в том, что все современные браузеры полностью поддерживают PNG изображения, включая прозрачность альфа канала, преимущества которого я показал в примерах. Safari (все версии), Firefox (все версии), Opera (версии 6 и выше), Netscape (версии 6 и выше), и Mozilla (все версии) будут на ура отрабатывать все, что я у них попрошу. Но есть и одна плохая новость - единственный браузер, который я еще не упомянул и который имеется у большинства Ваших пользователей: Internet Explorer.

Internet Explorer 6 и ниже не поддерживает прозрачность альфа канала встроенную в PNG формат. С тех пор как для большинства многочисленных веб серферов был сделан выбор (или не выбор) браузера, эта зияющая дыра сдерживала веб дизайнеров далеко от PNG. Но, с выходом Internet Explorer 7 мы получили полную поддержку альфа прозрачности PNG во всех значимых браузерах. Что дальше, есть ли пути для работы с альфа-прозрачностью PNG в Internet Explorer 6 и ниже? Итак, если Вы хотите использовать данный эффект, ничто не остановит Вас. Internet Explorer 6 и его ранние версии требуют к себе большего, чем того надо, внимания, но это определенно возможно.

В составе Internet Explorer имеются различные собственные фильтры. Они используются в CSS, но они не являются какой-либо частью официальной спецификации CSS. Другими словами, они не стандартизированы в веб. К сожалению Internet Explorer 6 и ниже не полностью поддерживают формат PNG (который рекомендован W3C), у Microsoft"а имеется фильтр который устраняет этот недостаток: AlphaImageLoader.

В соответствии с разделом на официальном сайте Microsoft , AlphaImageLoader "отображает изображение в пределах границ объекта и между фоном объекта и его содержимым". Другими словами, AlphaImageLoader загружает PNG изображение с его полной прозрачностью, но он загружает его как собственный слой, снизу которого находится содержимое объекта на котором он применяется. PNG изображения, загруженные таким путем, больше действуют как фоновые изображения, чем изображения переднего плана (хотя они в действительности "сидят" сверху фона объекта).

Вобщем, Вы просто можете применить AlphaImageLoader в CSS на элементах img и наслаждаться результатом. Сперва будет загружено изображение, прозрачность остается, но затем изображение будет загружено снова - как переднее содержимое объекта - с непрозрачными областями (таким образом "затеняется" Ваша прозрачная версия).

Вы не можете использовать прозрачное PNG как фоновое изображение CSS для (X)HTML элемента (скажем, для ) и ожидать, что AlphaImageLoader сделает эту работу в Internet Explorer как надо. Помните, что AlphaImageLoader вставляет Ваше изображение между фоном и передним планом объекта. Поэтому, пока он будет грузить Ваше изображение во всей своей прозрачной красе, он также будет продолжать грузить его как фоновое изображение CSS, и без Ваших замечательных полупрозрачных пикселей.

Давайте вернемся назад к одному из ранних примеров и попробуем правильно загрузить его в Internet Explorer. Помните Channel 49, TV станцию в Topeka? Уверен - да. Рисунок 5-21 показывает как выглядит сайт в Internet Explorer 6.

Рисунок 5-21
Заголовок 49abcnews.com , выведенный в Internet Explorer 6 для Windows, с нетронутой прозрачностью PNG.

HTML для верхней части, связанной с погодой, выглядит как Вы возможно уже предположили:

Currently in Topeka, KS:
82° Overcast
Get the forecast and more...

Вы видите изображение, и безусловно это PNG, даже Internet Explorer загружает его безукоризненно. Секретный ингредиент этого - JavaScript. В действительности я использовал немного DOM скриптинга для того, чтобы убрать элемент img на лету и заменить его элементом div, который - Вы догадались - использует AlphaImageLoader. JavaScript описан внутри условных комментариев, другая подручная, но полностью нестандартизированная идиома от Microsoft встроенная в Internet Explorer. Условные комментарии позволяют Вам испольлзовать код только для заранее известной версии Internet Explorer. Код игнорируется всеми другими браузерами, поэтому он никак их не затрагивает. В элементе сайта www.49abcnews.com , Вы найдете:

Спасибо первой строчке, if lte IE6, этот скрипт будет включен в отрисовываемый документ только если он будет показан в версии Internet Explorer меньше или равной (это указывается с помощью lte) 6. Все другие браузеры, включая новоприбывшего Internet Explorer 7, будут это полностью игнорировать.

Итак, что же в файле JavaScript fixWeatherPng.js? Взглянем:

Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() { var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style.filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; // Some 49abcnews.com-specific CSS styling omitted for brevity. img.replaceNode(div); }

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

Начинаем, сперва мы ищем изображение с которым мы будем работать по его id атрибуту и сохраняем его в переменной img. Сохраняем атрибут src (URL на файл изображения) в переменной src. Затем мы прячем элемент img выставляя CSS свойство visibility в hidden.

В итоге мы заменяем оригинальный элемент img (который скрыт) на вновь созданый элемент div, к которому удачно прицеплен AlphaImageLoader.

Использование DOM скриптинга для вставки Вашего AlphaImageLoader - фильтрующего биты на лету, имеет свою нелицеприятную, но необходимую сторону - некорректный CSS. Более того, вне Вашей (X)HTML разметки будут содержаться несемантические div элементы. И пока все это описано внутри условных комментариев, для других браузеров нет шанса быть испорченными кодом от Microsoft. (handyblogger: Здесь Джефф пытается тонко указать на "корявое" решение от Microsoft)

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

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

Первая: даже Internet Explorer 6 и его более ранние версии практически полностью поддерживают PNG в части того, что может GIF (конечно за исключением анимации). PNG практически всегда показывает меньший размер файлов позволяя быстрее их загружать и расходовать меньше ресурсов.

Вторая: Internet Explorer 7 предлагает полную поддержку для альфа прозрачности PNG. Эффекты, которые могут быть получены с полной гаммой полупрозрачных опций практически безграничны. Я ожидаю, что дизайнерам, которые найдут интересные пути использования прозрачности PNG, по принципу тех, что описаны в этой статье, будут открыты двери на новый уровень стилей еще невиданных до этого. Я дал Вам полезные идеи того, что Вы можете создавать с помощью прозрачности PNG, но не останавливайтесь на этом. Ищите себя!

Отрывок из Web Standards Creativity от Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, и Rob Weychert; опубликовано friends of ED. Copyright Jeff Croft 2007. Использовано с разрешения Apress, Inc.

PNG (Portable Network Graphics) - графический формат растрового типа, содержащий 8-битную цветовую палитру. Разработанный для PNG-файлов алгоритм сжатия Deflate уменьшает размер сохраняемого изображения без потери качества итоговой картинки.

В этой статье вы также узнаете чем открыть файл PNG.

PNG – второе по популярности интернет-форматом после JPG.

Среди прочих достоинств стоит отметить:

• чересстрочную верстку;
• встроенную программную коррекцию цветовой палитры и гаммы.

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

У формата 2 версии:

• PNG-8 (индексная цветовая гамма схожа с таковой в GIF);
• PNG-24 (полноценная и полноцветная палитра, имитирующая JPEG).

В 1995 году, в эпоху развития свободного интернета, резко встал вопрос о проприетарности сложного формата GIF. Был необходим столь же надежный но бесплатный и свободный формат для обмена графическими данными во всемирной паутине. В это время на международном консорциуме W3C были представлены спецификации PNG 1.0, утвержденные уже в 1996.

Формат создавался как альтернатива GIF. Последний до 2004 года был «закрытым», т. е. имел ряд ограничений для вольного использования (требовал авторских прав владельца при сохранении, патентные лицензии при размещении). PNG лишили подобных недостатков, при этом реализовали поддержку глубины цвета до 48 бит и 8-битного альфа-канала для передачи картинки.

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

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

Для просмотра файлов в интернете используйте следующее ПО:

ОС семейства Windows открывают PNG-формат следующим способом:

• средство просмотра фотографий;
• MS Paint;
• веб-браузер (только для просмотра).

Мобильная ОС располагает такими средствами:

Мобильная кот для Apple работает с PNG-файлами с помощью такого ПО.

Формат png что это? Часто задаваемый вопрос пользователей в Интернете. Его мы рассмотрим в этой статье. В ней будут раскрыты вопросы использования этого формата, какими программами открывать данный формат, как создаётся PNG файл.

Здравствуйте друзья! В Интернете люди пользуются различными форматами для просмотра и сжатия картинок. Один из них, это Png. Для начала рассмотрим вопрос, формат png что это? После этого будет понятно, зачем этот формат нужен и где он используется.

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

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

Следующая особенность формата – разнообразная гамма цветов. С помощью программ, которые редактируют подобные картинки, в него могут добавить анимацию, гамму-коррекцию и другие цвета.

Используется формат Png, чаще всего, для просмотра картинок в браузере или на компьютере. С помощью этого формата можно создавать уникальные картинки, презентации и Гиф-анимации. Картинки в png формате удобно накладывать на другие изображения, ведь они не имеют фона. Кроме того, они отличаются высоким качеством изображения.

Файл Png сам по себе открывается просто, стандартными средствами Windows. Для этого нажимаете по соответствующей картинке два раза левой кнопкой мыши (Скрин 1).

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

Также Вы можете нажать по файлу правой кнопкой мыши и выбрать из меню такие параметры – «Открыть с помощью», «Яндекс» (Скрин 2).

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

Ещё его можно открыть специальными программами. Например, программой Paint. Чтобы это сделать, нажимаем по картинке правой кнопкой мыши. Далее, выбираете из меню мыши – кнопку «Изменить». Вместе с тем, Ваша картинка будет открыта в этой программе.

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

В Интернете есть программы для работы с png файлами, которые можно скачать бесплатно. Если Вам они нужны, заходите в Интернет и пишете в поиске браузера соответствующий запрос (Скрин 3).

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

Как правило, использование утилит ПНГ подразделяют на несколько категорий:

• предназначенные для работы в Windows, Mac, Linux;
• на мобильных устройствах.

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

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

Этих программ Вам вполне хватит, чтобы отредактировать картинку в PNG и её открыть.

Рассмотрим ещё программы для редактирования ПНГ файлов на других устройствах:

Конечно, это не все программы. На просторах Сети Вы сможете найти ещё больше похожих программ.

Допустим, Вы скачали с Интернета картинку в другом формате и хотите её преобразовать в Png файл. Как это делается? Для полного понимания этого вопроса, рассмотрим весь процесс создания ПНГ в программе Пейнт, которая у Вас есть в компьютере.

Первое, что нужно сделать – это открыть картинку в данной программе (вся инструкция по её открытию показана выше). Далее, нажимаете на следующие пункты (Скрин 4).

Выбираете раздел – «Изображение в формате PNG». После выбора формата, нужно выбрать подходящее место на компьютере, чтобы сохранить эту картинку и тем самым создать Png файл.

В Интернете есть бесплатные конверторы png файлов. Воспользуемся одним из них – «convertio.co/ru/png-converter», а затем перечислим небольшой список конверторов. Итак, нажимаете кнопку на сервисе – «С компьютера» и выбираете те картинки, которые хотите конвертировать в Png (Скрин 5).

Есть ещё такие конверторы, которые Вы можете использовать:

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

Итак, эта статья помогла нам разобраться с вопросом, формат png что это. Этот формат картинок иногда бывает необходим. Например, для публикации в статьях на блоге, если Вы зарабатываете через Интернет, или рекламируете какие-либо товары, услуги в Интернете. Картинки в Png формате имеют высокое качество, их можно использовать для создания и для оформления лендингов. Удачи Вам!

С уважением, Иван Кунпан.

Файл PNG — растровое изображение, сохраненное в формате Portable Network Graphic. В каждом PNG-рисунке содержится палитра — набор используемых цветов. Для уменьшения размера файла применяется сжатие без потерь качества по алгоритму Deflate. Используется преимущественно в Интернете в качестве изображений для веб-страниц. Формат был разработан для замены GIF, который, помимо своих недостатков, до 2004 имел ограничения для использования в свободном программном обеспечении. Новый формат PNG решил эти проблемы. В частности, в нем реализована поддержка 8-битного альфа-канала и поддержка глубины цвета до 48 бит. В то время как в GIF-формате возможна только полная прозрачность и цветовая палитра ограничена всего 256 цветами (8 бит). Однако, в отличие от предшественника, этот формат не поддерживает анимацию. С этой целью был создан другой формат MNG. В файлах PNG также невозможно использование палитры CMYK, потому как этот формат не предназначен для профессиональной работы с графикой. Файлы PNG можно открыть в любом браузере и практически в любой программе для просмотра и редактирования изображений. В Windows файл с расширением PNG можно открыть двойным кликом мыши.

Расширение файла.png представляет собой рисунок PNG. Просмотр и обработка растрового изображения в формате PNG возможна с помощью следующих программ: Microsoft Windows Photos, Microsoft Windows Photo Viewer, Microsoft Paint, Adobe Photoshop CC. Также перечисленные программы могут конвертировать изображения, картинки и рисунки данного формата.

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

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

Файл с расширением файла PNG является файлом Portable Network Graphics . Формат использует сжатие без потерь и обычно рассматривается как альтернатива GIF. Но в отличие от GIF, в файлах PNG не поддерживается анимация.

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

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

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

Все браузеры (например, Chrome, Firefox, Internet Explorer и т. д.) будут автоматически просматривать файлы PNG, которые вы открываете в Интернете, а это означает, что не нужно загружать на компьютер каждый PNG файл, который вы хотите посмотреть. Вы также можете использовать браузер для открытия уже имеющихся на компьютере PNG файлов при помощи комбинации клавиш Ctrl + O. Большинство таких программ также поддерживают drag-and-drop, поэтому можно просто перетащить PNG файл в браузер, чтобы открыть его.

Также существует несколько автономных вариантов для открытия таких изображений - это специальные графические редакторы. Несколько популярных — XnView, IrfanView, FastStone Image Viewer, Google Drive, Eye of GNOME и gThumb. Для редактирования PNG файлов можно использовать практически любую из перечисленных программ, приложения Paint и Paint.NET , популярную утилиту GIMP, а также всем известный Adobe Photoshop.

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

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

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

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

Mac OS X 10.4 и последующие версии хранят скриншоты в качестве файлов PNG. Ubuntu Linux также хранит печатные скриншоты в формате PNG.

MIME-тип: image/png

Скачать программу для формата PNG

В этой статье я хочу рассказать об одной очень неприятной особенности «Фотошопа», которая проявляется при сохранении прозрачных изображений в PNG24. Возьмем исходное изображение и скопируем какой-нибудь фрагмент в PNG24. Я это сделал так: с помощью инструмента Polygonal Lasso выделил фрагмент, скопировал и вставил в новый документ, после чего сохранил через Save for Web:

PNG24, 456 Кб

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

Логично предположить, что в абсолютно прозрачных областях должен быть какой-нибудь один цвет, чтобы эффективнее упаковать изображение. Однако вот что сохранил «Фотошоп» в RGB-слое (я это увидел через редактор Seashore):

И невооруженным глазом видно, что остались большие фрагменты абсолютно ненужной информации:

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

1. Откроем пример в «Фотошопе» и выделим изображение на слое: Ctrl+клик по маленькому изображению слоя в палитре Layers.

2. Перейдем в режим быстрой маски (клавиша Q).

3. С помощью Image → Adjustments → Threshold оставим только те пиксели маски, цвет которых был черным. Для этого перетащим ползунок в крайнее левое положение.

4. Выходим из режима быстрой маски (клавиша Q) и инвертируем выделение (Select → Inverse или Ctrl+Shift+I). Выделенными остались только абсолютно прозрачные пиксели.

5. Заливаем выделенную область черным цветом (способов много, например, через Edit → Fill).

6. Снова инвертируем выделение и добавляем слою маску (иконка в палитре слоев).

7. Теперь делаем Save for Web и смотрим, как изображение чудесным образом «похудело» на 122 КБ.

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

Продолжение будет.

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

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

Начнем с терминологии. Предполагаю, что большинство читателей пользуются фотошопом и встречали там названия PNG-8 и PNG-24. Это не два разных формата, а всего лишь вариации одного и того же PNG. Формат позволяет хранить три типа изображений: greyscale (для описания изображения используется один канал — белый), indexed-colour (используется палитра цветов, как в GIF) и truecolor (используется три канала — RGB).

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

Вторым важным преимуществом является фильтрация строк (scanline filtering, или delta filters), благодаря которой PNG-упаковщик может получить гораздо более удобные данные для сжатия.

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

Как видно из примера, GIF-кодировщик отдал бы на сжатие строки, которые плохо упаковываются по горизонтали (потому что одинаковые цвета распространяются по вертикали). А вот как может преобразовать эти данные PNG-кодировщик:

Перед каждой строкой появилась цифра 2. Это — фильтр, который был применен к строке. В данном случае это фильтр Up, который говорит декодеру: «Для текущего пикселя возьми значение пикселя выше и прибавь к нему текущее значение». В нашем случае это 0, потому что цвета текущего и верхнего пикселей не отличаются. А эти данные можно эффективней упаковать, если у нас достаточно большое изображение.

Почему я написал может ? Потому что в нашем идеализированном случае более эффективной была бы такая схема:

Тут применен фильтр 1 под названием Sub, который говорит декодеру: «Возьми значение пикселя левее текущего и прибавь ему текущее значение». В данном случае 1.

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

Проверим работу фильтров:

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

Это значит, что каждая строка может иметь свой фильтр. Получается, что способов фильтрации одного изображения может быть 5 высота картинки. В общем-то, задача хорошего кодировщика как раз заключается в том, чтобы подобрать такие значения фильтров, при которых объем файла будет минимальным. К сожалению, фотошоп не всегда хорошо справляется со своей работой, поэтому на помощь приходят различные утилиты вроде OptiPNG и PNGCrush, которые в большое количество проходов подбирают разные способы фильтрации и стратегии сжатия данных, значительно сокращая тем самым объем некоторых сложных изображений. Однако стоит помнить, что эти программы не гарантируют уменьшение объема для каждого файла, они всего лишь пытаются найти оптимальный способ кодирования данных.

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

Преимущества greyscale над truecolor очевидны: к примеру, белый цвет в первом случае записывается (в десятичной системе счисления) числом 255, а во втором — 16777215.

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

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

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

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

Вероятно, что каждый конвертер файлов изображений, с которым вы работаете, сможет преобразовать файл PNG в другой формат (например, ICO, GIF, BMP, TIF и т.д.). С этим также легко справятся некоторые онлайн-конвертеры PNG, такие как FileZigZag и Zamzar.

Другой вариант преобразования PNG-файла – использовать одно из средств просмотра изображений, о которых я уже упоминал. Хотя они существуют главным образом как «открывашки» различных типов изображений, некоторые из них поддерживают сохранение/экспорт открытого PNG-файла в другой формат изображения.

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

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

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

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

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

Например, если у вас есть Photoshop, поместите изображение в его собственный слой, удалите фоновый слой, а затем используйте любой инструмент (например, Eraser, Marquee, Lasso), чтобы стереть части изображения, которые должны быть прозрачными.