Форматы изображений SVG, PNG и JPG: плюсы и минусы. Изображение в формате PNG – как открыть, редактировать и конвертировать файл Что значит формат png
Объявление
Формат файлов PNG Raster image
Файлы PNG (которые обычно называются "пингами") - это файлы в формате, который содержит растровые изображения. Первоначально формат изображений PNG был создан для перехода с формата GIF, так как они оба имеют возможность отображать прозрачные фоны. Другое сходство между этими форматами - использование индексированных цветов и сжатие без потерь. При этом файлы PNG имеют разные наборы ограничений авторских прав. Более того, в отличие от изображений GIF, файлы с расширением PNG не поддерживают анимацию. На сайте Online-onvert.com вы можете легко и бесплатно совершенно бесплатно.
Технические сведения о файлах PNG
Изображения PNG являются лучшим решением (по сравнению с файлами GIF) благодаря тому, что первые используют, кроме прочего, 8-битный канал прозрачности, а также поддерживают 24-битовые цвета RGB, изображения RGB и оттенки серого. Файлы с расширением PNG были разработаны для облегчения процесса их передачи по сети Интернет. Будучи форматом непрофессиональных изображений, формат PNG не поддерживает другие цветовые пространства.
Более того, являясь свободным форматом PNG предлагает для веб дизайнера различные практические преимущества над GIF:
Лучшее сжатие: Для большинства изображений PNG достигает меньшего размера файла чем GIF
Большая глубина цвета: PNG предлагает truecolor до 48 бит, когда в GIF мы имеет только 256 цветную палитру
Прозрачность альфа канала: Когда GIF предлагает только двоичную прозрачность, PNG допускает практически неограниченные эффекты прозрачности, предлагая для прозрачности альфа канал
Уместно заметить, что PNG не позволяет делать анимацию, как это делает GIF. Но существует стандарт Multiple-image Network Graphics (MNG), который это позволяет, но он не так широко поддерживается веб браузерами и графическими редакторами.
Итак, почему же GIF все еще так популярен?
Вы вероятно удивлены, почему 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?
JPEG другой повсеместный веб формат и в большинстве случаев, таких как фотографии (или иже с ними), он даже лучше чем PNG или GIF. PNG не предназначен для конкуренции с JPEG. JPEG компрессия делает значительно меньшие по размеру файлы чем PNG, когда работает с фото. С другой стороны, 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: AlphaImageLoader
В составе 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, и без Ваших замечательных полупрозрачных пикселей.
Реальное использование AlphaImageLoader
Давайте вернемся назад к одному из ранних примеров и попробуем правильно загрузить его в 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 Graphic) относится к растровым изображениям. Формат PNG содержит определенную палитру цветов, применяемых в рисунке. Подобный графический формат довольно часто применяют в сети Всемирной паутины при наделении веб-страниц различными изображениями. Благодаря использованию алгоритма сжатия Deflate, растровые изображения, имеющие расширение файла PNG, доступны для сжатия без явных потерь качества.
Разработали данный формат файла, чтобы заменить формат GIF, ведь последний длительное время требовал наличия платного программного обеспечения. Среди владельцев веб-ресурсов, изображения PNG славятся отменными характеристиками на фоне подобных форматов. PNG поддерживает глубину цвета в пределах до 48 бит. Основное отличие GIF заключается в том, что такой графический файл ограничивается лишь 8 битами (всего 256 цветов). Следует знать, что в отличие от GIF, PNG не обладает поддержкой анимационных эффектов.
Открыть файл, имеющий расширение PNG, можно при помощи фактически любой программы просмотра. В операционной системе Windows, открыть PNG возможно посредством простого двойного щелчка мыши для просмотра изображений. Такой формат изображений запускается и в любых веб-браузерах. Если пользователю необходимо изменить сохранённое изображение в PNG версии, достаточно воспользоваться утилитами редактирования изображений, такими как Adobe Photoshop или Microsoft Windows Photos, а также Corel PaintShop либо ACD Systems.
Данное расширение файла пользуется большой популярностью и несет в себе всю необходимую графическую информацию для полноцветных изображений хорошего качества.
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
Сегодня графический формат без проблем демонстрируется в интернет-обозревателе и стандартных средствах для просмотра графики. Если говорить более развернуто - картина следующая: для работы с форматом в каждой ОС предусмотрен свой инструментарий. Рассмотрим подробно, чем открыть формат PNG.
Онлайн
Для просмотра файлов в интернете используйте следующее ПО:
Windows 7-10
ОС семейства Windows открывают PNG-формат следующим способом:
средство просмотра фотографий;
MS Paint;
веб-браузер (только для просмотра).
Android
Мобильная ОС располагает такими средствами:
iOS
Мобильная кот для Apple работает с PNG-файлами с помощью такого ПО.
PNG (Portable Network Graphics), произносится как «ping» - растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования. PNG является международным стандартом (ISO IEC 15948:2003) и оффициально рекомендован W3C.
Формат PNG хранит графическую информацию в сжатом виде. Причём это сжатие производится без "потерь", в отличие, например, от стандартного JPEG (даже с максимально высоким уровнем качества).
Формат PNG спроектирован для замены устаревшего и более простого формата GIF, а также, в некоторой степени, для замены значительно более сложного формата TIFF.
Если мы говорим о веб дизайне, то по сравнению с GIF он имеет следующие основные преимущества:
Улучшенная компрессия: В большинстве случаев размер PNG изображения меньше аналогичного в формате GIF. - Больше цветов в изображении: Практически неограниченное количество цветов в изображении, в то время как ограничение для GIF равно 256. - Опциональная поддержка альфа-канала: В то время как GIF поддерживает лишь бинарную прозрачность, PGN позволяет достичь неограниченного количества эффектов прозрачности посредством поддержки альфа-канала.
В качестве недостатка стоит конечно отметить отсутствие поддержки анимации, наподобие GIF. Хотя конечно для анимации и существует подобный стандарт под названием Multiple-image Network Graphics (MNG), однако он не широко распространен и соответственно не поддерживается массово современными браузерами.
Онлайн
