Что такое пнг

Народ, подскажите что такое формат PNG и как с ним работать? Ну очень надо

PNG (англ. portable network graphics, сокращение произносится по-английски /pɪŋ) — растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования.

Обычно файлы формата PNG имеют расширение PNG или png и используют обозначение MIME-типа image/png

Формат PNG хранит графическую информацию в сжатом виде. Причём это сжатие производится без потерь, в отличие, например, от JPEG.

Он имеет следующие основные преимущества перед GIF:
Практически неограниченное [2] количество цветов в изображении (GIF использует в лучшем случае 8-битный цвет) ;
Опциональная поддержка альфа-канала;
Возможность гамма-коррекции;
Двумерная чересстрочная развёртка.

Патент на формат GIF принадлежит фирме CompuServe,[источник? ] что ограничивает возможности его использования в свободном программном обеспечении. К тому же в основе сжатия, применяемого к графическим файлам при сохранении их в формате GIF, лежит алгоритм сжатия LZW, патент на который принадлежал компании Unisys (до истечения его срока действия в 2003). PNG же использует открытый, не запатентованный алгоритм сжатия DEFLATE, бесплатные реализации которого доступны в Интернете. Этот же алгоритм используют многие программы компрессии данных, в том числе PKZIP и gzip (GNU zip).

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

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

Различные реализации алгоритма Deflate дают разную степень сжатия, поэтому были созданы программы для пережатия изображений с несколькими вариантами настроек в целях получения наилучшего сжатия — например, форк pngcrush OptiPNG и advpng из комплекта AdvanceCOMP (использует 7-Zip).

Источник

О формате PNG. Краткий тест-драйв

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

PNG vs GIF

Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF довольно сложно. PNG-8 с его индексной палитрой здесь более схож. Приведу скриншоты для сравнения:

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

Кроме того, ещё одно немаленькое преимущество: на самом деле, вопреки распространённому мнению, PNG-8 тоже может использовать полноценный альфа-канал, как и PNG-24. Просто Photoshop его не поддерживает, поэтому Сергей Чикуенок из студии Лебедева рекомендует использовать Adobe Fireworks, чем я и решил заняться (Об этом немного позже).

PNG vs JPEG

А в этой битве, если прозрачность нам не нужна, PNG проигрывает, так сказать, на «среднем сегменте рынка». Хотя, если прилинковать к JPEG’у ICC-профайл, разница в объёме становится незаметной. Мои замеры приводились на – JPEG 100%. А при меньшем качестве (с не особо заметной для глаза разницей) сравнение, к сожалению, становится ещё более печальным.

В общем, смотрите сами:

UPD А вообще, результаты значительно зависят от самого изображения: PNG лучше сжимает градиенты и однотонные участки, но для фотографий лучшее сжатие даёт JPEG. Хотя, говорят (самому с трудом верится), на больших фотографиях PNG и тут лидирует – проверено только что в процессе конвертирования скриншотов к статье (PNG против JPEG-70% – выигрыш раза в полтора).

Жизнь после Photoshop’а или сжимаем дальше

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

Гуглим и качаем – PNGOut. Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.

На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает.

Adobe Fireworks

Честно говоря, Adobe Fireworks стал для меня настоящим открытием: PNG-8, PNG-24 и PNG-32 + куча настроек!

3 версии формата в AF:

PNG-24 и PNG-32 я подробно не рассматривал. Насколько я понял, в их терминологии 32 – с альфа-каналом, а 24 – без. По предварительным прикидкам Photoshop справляется с этй задачей лучше.

А вот PNG-8 разбил все мои (и большинства коллег) стереотипы. Итоговый файл гораздо меньше GIF’а и существует полноценная поддержка прозрачности двумя способами: alpha и index transparency. Единственным минусом по сравнению с PNG-24 остаётся индексная палитра, хотя всё зависит от потребностей. Моё личное мнение – PNG-8 в большинстве случаев уделывает и GIF, и PNG-24.

PNG против GIF в AF, хотя как раз с привычными GIF-JPEG Fireworks работает по умолчанию не очень (с настройками я не игрался). Но даже в сравнении с Photoshop’овским результатом разница в пользу PNG:

И вот всё разнообразие PNG-8 — ради этого стоит устанавливать Adobe Fireworks:

Для сравнения: тот же файл стараниями Photoshop весил 3 188 байт против полученных теперь 450, то есть раз в 6 больше.

Вердикт

По-моему, GIF своё уже отжил. Теперь его существование – в первую очередь вопрос инертности общества. UPD Впрочем, сегмент разных анимационных приятностей Всё рано пока остаётся за GIF :).

Для прозрачных элементов дизайна стоит использовать PNG-8 (реже PNG-24, когда палитры PNG-8 недостаточно для сохранения изображения без потерь).

Для фотографий и сложных графических элементов лидером по-прежнему остаётся JPEG из-за мощных возможностей оптимизации изображения. Хотя в некоторых случаях может оказаться достаточно и PNG-8 – как и раньше, с GIF’ом, смелые эксперименты – залог успеха. UPD Но для действительно больших изображений всё же JPEG проигрывает.

Всем веб-дизайнерам и верстальщикам рекомендую устанавливать Adobe Fireworks и взглянуть на PNG в новом ракурсе.

UPD Я действительно не специалист и обзор писался на коленке, о чём говорит эпитет «краткий»; возможно, не на лучших примерах. Поэтому спасибо всем, кто принял активное участие в обсуждении, особенно kmike и @merlin_rterm. В процессе узнал для себя много нового, в частности, специфику сжатия PNG и что JPEG-100 все равно с потерей качества. Большая часть этих интересностей добавлены прямо в тексте статьи, для того, чтобы не отрывать их от контента.

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

Источник

Что такое пнг

PNG Development Group

PNG был создан как свободный формат для замены GIF, поэтому в Интернете появился рекурсивный акроним «PNG is Not GIF» [2] (PNG — не GIF).

Содержание

История формата

Днём рождения PNG можно считать 4 января 1995 года, когда Т. Боутелл предложил в ряде конференций Usenet создать свободный формат, который был бы не хуже GIF. И уже через три недели после публикации идеи были разработаны четыре версии нового формата. Вначале он имел название PBF (Portable Bitmap Format), а нынешнее имя получил 23 января 1995 года. Уже в декабре того же года спецификация PNG версии 0.92 была рассмотрена консорциумом W3C, а с выходом 1 октября 1996 года версии 1.0 PNG был рекомендован в качестве полноправного сетевого формата.

Область применения

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

Формат PNG спроектирован для замены устаревшего и более простого формата GIF, а также, в некоторой степени, для замены значительно более сложного формата TIFF. [3] [2] Формат PNG позиционируется прежде всего для использования в Интернете и редактирования графики.

PNG поддерживает три основных типа растровых изображений [4] :

Формат PNG хранит графическую информацию в сжатом виде. Причём это сжатие производится без потерь, в отличие, например, от JPEG с потерями.

Он имеет следующие основные преимущества перед GIF:

Формат GIF был разработан фирмой CompuServe в 1987 году и изначально был недоступен для свободного использования. Некоторое время назад, до окончания в 2004 году действия патентов на алгоритм сжатия LZW, принадлежавших Unisys и используемых в GIF, его применение в свободном программном обеспечении было затруднено. На данный момент такие затруднения сняты. PNG же с самого начала использует открытый, непатентованный алгоритм сжатия Deflate, бесплатные реализации которого доступны в Интернете. Этот же алгоритм используют многие программы компрессии данных, в том числе PKZIP и gzip (GNU zip).

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

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

Различные реализации алгоритма Deflate дают разную степень сжатия, поэтому были созданы программы для пережатия изображений с несколькими вариантами настроек в целях получения наилучшего сжатия — например, форк pngcrush OptiPNG и advpng из комплекта AdvanceCOMP (использует 7-Zip).

Анимация

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

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

Некоторые — в частности, разработчики Mozilla Foundation — критиковали MNG за сложность и большой размер реализации, и отсутствие обратной совместимости с PNG. В 2004 году они разработали формат APNG, который не был принят в качестве официального стандарта разработчиками PNG и MNG, но его поддержка к 2008 году была реализована в тестовых сборках некоторых браузеров и некоторых программах просмотра изображений.

Совместимость с браузерами

Не все веб-браузеры одинаково отображают содержимое png-файла. Узким местом являются:

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

Источник

Про PNG. Часть первая

14 ноября 2007

Научиться работать с PNG.

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

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

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

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

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

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

Хозяйке на заметку

Считаю своим долгом отметить, что цвет в формате RGB хранится в виде одного числа, а не трех (на каждый канал). Например, цвет R: 253, G: 93, B: 69 хранится как число 16604485 в десятичной системе счисления или как #fd5d45 — в шестнадцатеричной.

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

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

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

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

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

Хозяйке на заметку

Всего существует 5 фильтров: None (никакой фильтрации), Sub (от текущего значения отнять значение левого пикселя), Up (отнять верхний пиксель), Average (отнять среднее значение левого и верхнего пикселей) и Paeth (подставить значение верхнего, левого или верхнего левого пикселя, назван в честь Алана Паэта).

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

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

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

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

Grayscale и greyscale — равнозначные варианты. Я использовал последний потому, что он указан в спецификации на W3C.

Источник

Формат PNG: особенности, преимущества и недостатки.

Обновлено 27 марта, 2020

PNG — один из популярных форматов в веб-графике. Был предложен в 1995 году на конференции Usenet как бесплатная альтернатива лицензируемому GIF. С 1 октября 1996 года существует как полноправный графический формат, поддерживаемый всеми браузерами и графическими редакторами.

Акроним: Portable Network Graphics.

Тип изображения: растровый.

Тип сжатия: без потерь.

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

Плюсы:

Минусы:

Где использовать?

Обновлено 27 марта, 2020

Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.

Источник

PNG: Простое введение в особенности формата

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

Вот ещё несколько страниц сторонних авторов, с различными взглядами на PNG:

Прошу вас особенно обратить внимание на то, что весь нижеприведённый текст это по сути перевод A Basic Introduction to PNG Features (ни о каком GFDL здесь и речи быть не может). По ходу дела я буду высказывать своё скромное мнение на счёт PNG в частности и графики вообще (и вот это мнение уже может распространяться под GFDL).

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

Область применения

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

Сжатие

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

PNG поддерживает три основных типа изображения, это: «truecolor«, «grayscale» и индексированное на основе палитры (8-битный). JPEG поддерживает только два первых, а GIF лишь третий (хотя при использовании серой палитры может фальсифицироваться и «grayscale«). Плотность сжатия происходит из способности смешивать различные типы изображения в одном PNG файле. Заставляя приложение сохранить 8-битное изображение как 24-битный «truecolor» (или RGB), в результате вы не получите маленького файла. Это может быть неизбежно в случае когда оригинал был изменён с добавлением более 256 цветов (например если в качестве фона был добавлен сплошной градиент), но многие изображения преднозначеные для сети, состоят из 256 цветов, а иногда и всего из нескольких (например из десяти).

Основная ошибка, это включение слишком большого количества данных палитры в PNG изображение. Эта ошибка наиболее заметна при конвертировании небольших GIF изображений (маркеров, кнопок и др.) в формат PNG. Эти изображения занимают в среднем 1000 байт и содержат 256 вводных в палитру данных из которых необходимы лишь 50, что приводит более чем к 600 байтам потраченного впустую пространства.

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

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

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

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

Автор не упомянул наверное одну из лучших программ в своём роде, называется она OptiPNG (542KB) и доступна «as-is» под несколько операционных систем (существует ещё версия OptiPNG Plus, но у неё с «public-domain» проблемы).

Лучшей OptiPNG я посчитал из-за простоты использования хотя бы по сравнению с тем же pngcrush, о котором упоминалось выше.

Итак, за собственно сам уровень сжатия в OptiPNG отвечают следующие ключики:

Фильтры сжатия

Посредством примера (по общему признанию критический и нереалистичный случай), 512 x 32,768 изображение содержит все 16,777,216 возможные в 24-бита цвета, сжимается более чем в 300 раз лучше с фильтрацией, чем без. Несжатое изображение весило 48MB, сжатое, но без фильтров 36MB, а версия с фильтрами всего 115,989 байт (0.1 MB). Более того, Paul Schmidt создал 4096 x 4096 версию размером 59,852 байт, с общим коэффициентом сжатия 841:1, что более чем в 600 раз лучше версии без фильтров. Ted Samuels пропустил всё это через утилиту Ken‘а Silverman‘а PNGOUT (ссылки на другие конвертеры ищите на специальной странице ) и урезал до 57,549 байт, добившись тем самым коэффициента в 875:1 (см. эту страницу для загрузочной версии и дополнительной информации).

Как измерение, всё это просто кажется нереалистичным, однако заметьте, что эти, с виду гиперсжатые, PNG могут самостоятельно быть сжаты с дополнительным коэффициентом где-нибудь приблизительно от 21 до 97 (в зависимости от изображения) простым применением gzip. Конечно, gzip PNG не так ужасно полезны в большинстве случаев, а вот MNG хорош для всего, сокращая размер на 456 байт.

Альфа-каналы

Также известный как маска-канал, альфа-канал это просто способ объединить переходную прозрачность с изображением. Принимая во внимание, что GIF поддерживает простую бинарную прозрачность (это когда любой пиксель может быть либо полностью прозрачным, либо абсолютно непрозрачным), PNG позволяет 254 уровня частичной прозрачности между нормальным изображением (или 65,534 уровня прозрачности для специальных «очень безумных» форматов, но здесь мы больше концентрируемся на изображениях, используемых в интернете).

Все три типа PNG изображений («truecolor«, «grayscale» и индексированная палитра) могут содержать альфа-информацию, хотя обычно она применяется лишь с «truecolor» изображениями. Вместо того, чтобы сохранять три байта для каждого пикселя (красный, зелёный и синий), сохраняются четыре: красный, зелёный, синий и альфа, таким образом получается RGBA. Вся эта переходная прозрачность позволяет вам создавать замечательные «спецэффекты», хорошо выглядящие на любом фоне. Например эффекта фотовиньетки, для портрета, можно добиться путём установки полностью непрозрачной центральной области (то есть для лица и плеч), прозрачной остальной обстановки и с созданием плавного перехода между двумя этими различными областями. Рассматривая изображение в браузере типа Arena, портрет будет плавно осветляться на белом фоне, и затемняться на чёрном. Ещё один идеальный спецэффект с альфа-прозрачностью, это отбрасывание тени. Так на изображениях ниже показан тукан, в первом случае отбрасывающий тень на красочный фон, во втором на свою копию.

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

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

К стати, поразительная вещь, но GIMP, кажется, об этом не в курсе. Сколько раз я не пытался сохранить в нём прозрачное индексированное PNG изображение, мои попытки оканчивались неудачей. То есть RGBA пожалуйста, «grayscale» на здоровье, а вот чтоб индексированное с прозрачностью, ни в какую. Что же всё таки делать, если понадобилось небольшое прозрачное изображение? Ну, выход, как всегда, есть, и о нём уже говорилось выше, нужно просто использовать pngquant (24KB).

Впрочем, несмотря на все минусы, единственным способом уменьшить размер PNG файла, помимо сжатия, остаётся индексирование. А в случае когда с индексированием необходим ещё и альфа-канал, pngquant становиться практические незаменимым инструментом. И очень жаль, что свободное ПО таких масштабов как GIMP не знает всех возможностей формата PNG, да ещё и при том, что исходники того же pngquant доступны «as-is«.

Гамма-коррекция

Гамма-коррекция существует для исправления различий того, как компьютеры (а особенно мониторы) интерпретируют цветовые значения. Вэб-дизайнеры, вероятно, знают случаи, когда созданные на Macintosh изображения выглядят слишком тёмными на PC, или созданные на PС выглядят слишком светлыми на Mac‘ах. Изображение, которое хорошо смотрится на SGI Workstation, не хочет отображаться на Macintosh или PC. Изображение созданное на одном PC неверно отображается на всех остальных.

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

Чересстрочность или прогрессивная развёртка, была известна на протяжении долгого времени. GIF стал поддерживать её с 1989-го, TIFF приблизительно в тоже время (хотя не стандартизированным путём), JPEG с начала 90-ых (хотя это не было широко распространено до 1996-го). Метод чересстрочности PNG концептуально схож с GIF и визуально подобен прогрессивному JPEG (то есть, двухмерен).

Вот GIF анимация (автор Willem van Schaik ), показывающая преимущества двухмерной чересстрочной схемы PNG, по сравнению с одномерной версией GIF.

Первое, на что следует обратить внимание, так это на то, что пока видна приблизительно одна восьмая изображения в GIF, PNG изображение уже становиться видимым сразу же после выполнения первого прохода. Первый проход PNG это только 1/64-ая часть данных изображения. Первый проход GIF 1/8-ая. К тому времени, когда первый проход GIF завершился, уже были отображены четыре прохода PNG, и в отличие от GIF-пикселей, растянутых с коэффициентом 8:1, пиксели PNG были растянуты лишь на 2:1. Более того, на самом деле в нечётных проходах никакого растяжения нет вообще и только чётные растягиваются вертикально на 2:1. Это означает, что, например, внедрённый в изображение текст будет доступен для чтения в два раза быстрее, в PNG изображении.

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

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

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

Третий тип проверки целостности применим лишь к кусочку/кусочкам данных изображения и схож с CRC-значениями. Так где CRC-значения кусочков изображения обращается к фильтрованным, сжатым данным в кусочке, контрольная сумма Adler-32 обращается к завершённому потоку распакованных данных (независимо от того, сколько кусочков изображения могли быть охвачены). В действительности это используется лишь в библиотеках сжатия самого нижнего уровня как средство проверки плохо кодирующего/декодирующего программного обеспечения.

Произношение

Нет второстепенных вопросов для авторов почти совершенного формата! Да, действительно, даже акроним и произношение были главными темами обсуждения. Причина этому конечно GIF. Кто-то произносит с мягким «G», как «джемпер», кто-то с жёстким, как «гараж» и никто в действительности не знает почему. Но, чтоб вы знали в данном случае правильным будет мягкое «G», поскольку так говорят сами авторы.

PNG всегда пишется по буквам «PNG» (или Portable Network Graphics) и произносится как «пинг», а не «пинджи» или «пэ эн гэ» (впрочем вполне нормально, что люди не говорящие на английском произносят PNG по буквам).

Под конец пара слов относительно использования данного формата в вэб, а точнее относительно связанных с этим проблем. Первая из них, и о ней уже много говорили, это патент на LZW (замечательный алгоритм сжатия применяющийся в GIF, не хочу сказать лишнего, но мне кажется, что он сжимает лучше, чем все эти zlib, используемые в PNG) принадлежащий Unisys. Хорошая новость в том, что патент на территории США истёк 20 Июня, 2003 года. Плохая в том, что он всё ещё действует на территории таких стран как Италия, Франция, Канада, Германия, Англия и Япония. Понятно, что Россия всегда в стороне от подобных вопросов, и каждый что-то решает для себя.

Огорчает не только Microsoft (и я об этом уже говорил), огорчает свободное программное обеспечение. Все эти странные проблемы с тем же Konqueror‘ом. Я уже не говорю о GIMP‘е. Не говорю хотя бы потому, что не использовал все эти новые версии 2.0. Просто надеюсь, там всё исправили.

Copyright 2004, Иван Зенков

Данный документ (кроме отдельно указанных частей, переводного текста и др.) распространяется в соответствии с GNU Free Documentation License опубликованной Free Software Foundation и изготовлен в полном соответствии со стандартами w3 консорциума.

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

Источник

SVG vs. PNG: в чем разница и когда их использовать

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

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

Давайте узнаем разницу между SVG и PNG и в каких случая лучше применять тот или иной тип изображения.

Что такое SVG?

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

Векторы — это фрагменты кода, написанные в формате XML, которые представляют формы, линии и цвета для уточнения того, как это работает.

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

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

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

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

Плюсы и минусы SVG

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

Файл SVG имеет довольно много преимуществ по сравнению с PNG, но он подойдет далеко не в каждой ситуации. Вот недостатки векторных типов файлов:

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

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

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

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

Однако SVG лучше подходят для адаптивного и «retina-ready» дизайна из-за их масштабируемости и отсутствия ухудшения качества. Кроме того, они поддерживают анимацию, в то время как PNG — нет, а у всех остальных типов растровых файлов, поддерживающих анимацию, таких как GIF, APNG и WebP, есть свои проблемы.

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

Что такое PNG?

PNG расшифровывается как «портативная сетевая графика», и это название отражает то, насколько широко распространен данный тип файлов. Любой, кто когда-либо пользовался компьютером, скорее всего, работал с PNG, так как это самый распространенный тип файлов в Интернете после JPEG.

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

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

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

Плюсы и минусы PNG

Что делает PNG наиболее широко используемым форматом файлов изображений в Интернете? Конечно же, его преимущества, среди которых:

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

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

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

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

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

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

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

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

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

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

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

Файлы SVG также идеально масштабируются под любой размер экрана, что делает их отзывчивыми и «retina-ready» по умолчанию. В то же время PNG теряют качество при изменении размера, и заставить их хорошо масштабироваться — непростая задача, особенно если у вас есть только крошечные изображения, которые плохо отображаются на больших экранах.

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

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

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

В заключение

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

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

Всем успешной работы и творчества!

Источник

JPEG и PNG — в чём разница форматов?

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

Формат JPEG

JPEG (он же JPG) — это формат изображений, который использует сжатие с потерями и не поддерживает прозрачность. Позволяет настраивать уровень качества сохраняемого изображения — при его снижении удаляются детали и добавляются шумы на изображение, однако размер становится более компактным. JPG в зависимости от настроек может обеспечить сжатие как 2:1, так и 100:1 — но качество прямо пропорционально коэффициенту сжатия. Название формата — аббревиатура от Joint Photographic Experts Group.

JPEG поддерживает цветовые пространства 24-bit RGB и CMYK, а также 8-bit Grayscale. CMYK и Grayscale используются достаточно редко и их поддержка вызывает нарекания.

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

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

Формат PNG

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

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

PNG до 2017 года не поддерживал EXIF, но затем его поддержка была реализована в стандарте. В фотографии PNG используется редко — для компактного хранения файлов больше подходит JPEG, а для профессиональной работы лучше подходят RAW-форматы DNG или TIFF.

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

Резюме. JPEG и PNG — какой формат оптимальнее использовать?

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

Иконки, схемы, картинки с большим количеством текста и изображения с прозрачностью оптимальнее сохранять в PNG 24. Алгорим компрессии PNG 24 сжимает изображения без потери качества.

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

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

Источник

Чем открыть формат PNG на компьютере и онлайн?

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

На практике задача является примитивной и может быть с легкостью выполнена сразу же после установки операционной системы Windows без помощи специального программного обеспечения. Ведь в составе ОС уже есть необходимый инструментарий.

Достаточно 2 раза кликнуть по картинке и он откроется с помощью утилиты «Просмотр фотографий Windows».

Помимо него можно выбрать:

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

Просмотр, редактирование и конвертация в Windows

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

Прежде чем открыть файл Png нам естественно понадобится скачать дистрибутивы с официальных сайтов.

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

Отметим, что Photoshop это профессиональная рабочая платформа, которую используют уже дизайнеры и специалисты, знающие про формат Png если не всё, то близко к этому. Был включен в данный список исключительно для информации.

Во время инсталляции программа может попросить выставить расширения, которые она будет обрабатывать. Выглядит это примерно так:

Необходимо выбрать только графические изображения. Для этого нажмите на кнопку «Images only» и после этого автоматически обработается весь список. Вы можете проделать это вручную и выбрать только нужные, но зачем нужна такая лишняя трата времени?

Зачем это делать? Помимо картинок такие приложения без проблем открывают видео, часто понимают Djvu, PDF и другие форматы. В контексте подобных задач они не настолько хороши, чтобы применять их для этого. Просмотр фильмов будет 100% неудобным, поэтому лучше доверьтесь в этом плане нам.

После завершения установки вы сможете открывать любые картинки двойным нажатием.

Если при открытии возникают ошибки

Если вы не можете открыть файл Png в Windows 7, 8, 10 и ОС выдает сообщение о том, что она не может открыть этот файл, то действовать надо следующим образом:

Все советы многократно проверены на практике и мы смело рекомендуем их выполнять. Никакого вреда это не нанесет.

Работаем в онлайн режиме

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

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

Если файл Png поврежден

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

Можно попробовать следующие программы:

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

Источник

Что значит пнг? Объясните пож

PNG (англ. portable network graphics, сокращение произносится по-английски /pɪŋ) — растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования.

Обычно файлы формата PNG имеют расширение PNG или png и используют обозначение MIME-типа image/png

Формат PNG хранит графическую информацию в сжатом виде. Причём это сжатие производится без потерь, в отличие, например, от JPEG.

Он имеет следующие основные преимущества перед GIF:
Практически неограниченное [2] количество цветов в изображении (GIF использует в лучшем случае 8-битный цвет) ;
Опциональная поддержка альфа-канала;
Возможность гамма-коррекции;
Двумерная чересстрочная развёртка.

Патент на формат GIF принадлежит фирме CompuServe,[источник? ] что ограничивает возможности его использования в свободном программном обеспечении. К тому же в основе сжатия, применяемого к графическим файлам при сохранении их в формате GIF, лежит алгоритм сжатия LZW, патент на который принадлежал компании Unisys (до истечения его срока действия в 2003). PNG же использует открытый, не запатентованный алгоритм сжатия DEFLATE, бесплатные реализации которого доступны в Интернете. Этот же алгоритм используют многие программы компрессии данных, в том числе PKZIP и gzip (GNU zip).

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

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

Различные реализации алгоритма Deflate дают разную степень сжатия, поэтому были созданы программы для пережатия изображений с несколькими вариантами настроек в целях получения наилучшего сжатия — например, форк pngcrush OptiPNG и advpng из комплекта AdvanceCOMP (использует 7-Zip).

Источник

Форматы изображений SVG, PNG и JPG: плюсы и минусы

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

Было время, когда вы просто использовали JPG, чтобы соответствовать пространству на 72 dpi и двигались дальше. Уже нет. Экраны с высоким разрешением, несколько видовых экранов и необходимость иметь быстрый веб-сайт сделали все это гораздо более сложным процессом. Давайте рассмотрим плюсы и минусы каждого из этих форматов!

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

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

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

Плюсы SVG

Минусы SVG

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

Существует два типа PNG — PNG-8 и PNG-24. PNG-8 использует более ограниченную цветовую палитру всего с 256 цветами, имеет несколько лучшую прозрачность и экспортируется в небольшом размере. PNG-24 использует неограниченную цветовую палитру, поддерживает прозрачность, но экспортируется в большом размере. Оба типа PNG имеют сжатие без потерь.

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

Плюсы PNG

Минусы PNG

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

JPG также предлагает возможность выбрать, каким сжатие изображения должно быть от 0% (сильное сжатие) до 100% (без сжатия). Большинство дизайнеров выбирают что-то в диапазоне от 60 до 70 процентов. Изображения по-прежнему хорошо выглядят на этом уровне сжатия, но размеры файлов значительно меньше.

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

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

Плюсы JPEG

Минусы JPEG

Какой формат следует использовать?

Теперь, когда вы знаете, каковы некоторые различия между SVG, PNG и JPG, что из них вы должны использовать?

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

Вам нужен векторный или растровый формат?

Растр: JPG или PNG

Вам нужна прозрачность?

Вы используете многоцветное изображение?

Это большая фотография?

Содержит ли изображение текст?

Сжатие без потерь важно для вас?

Нужно ли обновлять и перенастраивать графику?

Нет: PNG или JPG

Вы используете анимацию?

Нет: JPG или PNG

Вывод

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

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

Всем успешной работы и творчества!

Источник

Что такое пнг

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

Описание на русском	Рисунок PNG
Описание на английском	Portable Network Graphic
Разработчик
HEX:	89 50 4E 47 0D 0A 1A 0A 00 00 00 0D 49 48 44 52
ASCII:	PNG…….IHDR

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

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

Что находится в файлах PNG

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

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

Как открыть файл PNG

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

Для чего предназначен формат PNG?

Программа 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 и из него с помощью различных программ и онлайн сервисов. Например, это позволяет делать редактор Png — Фотоконвертер.

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

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

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

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

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

Графический формат PNG: обработка и просмотр

Логично предположить, что в абсолютно прозрачных областях должен быть какой-нибудь один цвет, чтобы эффективнее упаковать изображение. Однако вот что сохранил «Фотошоп» в 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, после чего выполняются одним нажатием клавиши.

Рекомендую проделывать все описанное при сохранении любого изображения с прозрачностью в PNG24, так как подобный недостаток проявляется и в картинках, нарисованных «с чистого листа».

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

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

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

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

GIF, 2568 байт

PNG-24, 372 байта

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

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

Считаю своим долгом отметить, что цвет в формате RGB хранится в виде одного числа, а не трех (на каждый канал). Например, цвет R: 253, G: 93, B: 69 хранится как число 16604485 в десятичной системе счисления или как #fd5d45 — в шестнадцатеричной.

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

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

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

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

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

Всего существует 5 фильтров: None (никакой фильтрации), Sub (от текущего значения отнять значение левого пикселя), Up (отнять верхний пиксель), Average (отнять среднее значение левого и верхнего пикселей) и Paeth (подставить значение верхнего, левого или верхнего левого пикселя, назван в честь Алана Паэта).

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

PNG-24, фильтр None
56084 байта

PNG-24, фильтр Up
23585 байт

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

Файл формата PNG — что это?

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

PNG-24 (фотошоп → truecolor),
8167 байт

PNG-24 (фотошоп + OptiPNG → greyscale),
6132 байта

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

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

Источник

Продолжаем разговор. Форматы изображений: PNG, JPEG, TIFF (Часть 2)

Расширение не только сообщает вам систему камеры, которой сделан снимок, но и сохраняет всю информацию с датчика камеры. Расширение файла позволяет ему взаимодействовать с программами для предпросмотра и редактирования. Во второй части нашего исследования речь пойдет о форматах PNG, JPEG, TIFF. (Часть 1).

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

По сравнению с другими форматами файлов, такими как файлы CRF или NEF, файл PNG встречается чаще. PNG расшифровывается как Portable Network Graphics file и придерживается сжатия без потерь. Файл PNG был создан для замены формата изображения в формате GIF, но используется на всей платформе.

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

Для чего нужен файл PNG?

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

Когда вы снимаете изображение с помощью камеры, как минимум, вы получите изображение в формате JPEG. Изменяя настройки, вы можете превратить ваши JPEG в файлы RAW. Однако необработанные RAW-файлы имеют больший размер. Некоторые камеры позволяют захватывать форматы файлов RAW + JPEG, сохраняя две версии одного и того же изображения.

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

Где же были потеряны данные?

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

Каковы последствия использования JPEG?

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

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

Итак, когда лучше всего использовать JPEG?

В чем разница между PNG и JPEG?

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

Изображение JPEG полезно для низкоконтрастной сцены. Для резкого контраста используйте файл PNG

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

Что такое TIFF?

Формат файла TIFF не распространен в цифровой фотографии, потому что большинство камер не имеют возможности делать фотографии в этом формате. TIFF является аббревиатурой от Tagged Image File Format. Это означает, что он не потеряет данные изображения при постобработке.

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

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

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

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

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

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

Видеоканал Фотогора

Источник

Использование прозрачности PNG формата в веб дизайне

Великолепная статья от Джефф Крофт (Jeff Croft) с моим вольным переводом, небольшим исследованием и дополнением ввиде еще одной сводной статьи.

PNG, GIF и JPEG

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

Что такое PNG?

Обычно PNG произносится как «пинг» и означает Portable Network Graphics. Это формат с минимальными потерями на сжатии. Другими словами он сохраняет графическое изображение с минимальными размерами файла без уменьшения качества картинки. Он был разработан на смену вездесущего GIF формата, легальное использование которого требовало наличие лицензии у производителей графического софта (сейчас действие патента на GIF/LZW истекло). PNG это международный стандарт (ISO IEC 15948:2003) в официальных рекомендациях W3C.

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

Уместно заметить, что 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 и тем, как он может надежно использоваться в браузерах, Вам предоставляется возможность воспользоваться всеми преимуществами которые он предлагает.

А что про JPEG?

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

Несколько замечательных примеров использования скромного PNG

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

Градиент

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

Изображение, которое должно работать на любом фоне

Для веб сайта KTKA Channel 49 News in Topeka, Kansas изготовили прекрасную погодную иконографику, которая отображает свое текущее состояние в заголовке сайта. Спасибо за ловкий програмный трюк, который там используется, когда заголовок меняет цветовые схемы в зависимости от времени суток и изображению погоды необходимо быть одинаковым на различных подложках. Взгляните на Рисунки 5-2 и 5-3.

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

Если бы вместо этого я выбрал GIF, я был бы ограничен двоичной прозрачностью GIF. Результат этого Вы можете увидеть на Рисунке 5-4. Я думаю мы все согласимся, что это несовсем хорошо выглядит.

Полупрозрачное HTML покрытие

Рисунок 5-5
Gingeroot, спроектированный таланливым Wilson Miner

Вилсон (Wilson) собрал полупрозрачную область и текст в JPEG изображение. Он заранее сделал его в Photoshop. Это прекрасно работает и покрывает все потребности дизайна сайта. Но что если текст в этой просвечивающейся области необходимо менять очень часто и возможно даже для каждого посетителя? В этом случае, будет более практичным поместить текст в изображение. Текст необходимо будет встраивать с помощью HTML и CSS. Используя прозрачность альфа канала PNG мы можем эмулировать стиль Вилсона без необходимости размещать текст в изображении.

Я начну с фотографии моей дочери, Haley Madysan, размещенной в простой XHTML страничке с некоторым базовым стилем CSS. Замечу, что я использую встроенный стиль CSS только для целей демонстрации. В реальной ситуации использование внешних ссылок на страницу стилей более предпочтительно из-за большей гибкости, меньшей повторяемости кода и большей практичности в управлении самим файлом.

Вот так, я более или менее сдублировал то, что Вы видели на сайте Вилсона Gingeroot, за исключением (пока) какой-либо прозрачности, как показано на Рисунке 5-6.

Рисунок 5-6
Эмуляция стиля Gingeroot с помощью HTML и CSS, (пока) без прозрачности

Теперь я создам аналогичное, пиксель в пиксель, изображение в Photoshop. Я заполняю изображение светло-голубым оттенком и ставлю непрозрачность слоя на 70%. В завершении, я сохраняю картинку в Photoshop используя установки PNG-24 с включенной прозрачностью. Затем я просто использую изображение как фон для покрытия, вместо сплошного серого, как Вы видели на Рисунке 5-6.

Результат довольно схожий с оригиналом, но с HTML и CSS текстом он стил более гибким, посмотрите на рисунок 5-7

Рисунок
5-7 Добавление прозрачности через формат PNG, которое дублирует стиль Gingeroot

Вилсон Майнер (Wilson Miner) теперь использует схожую концепцию в другой области сайта Gingeroot. На страницах, которые показывают доступные товары, прозрачность PNG используется для отображения в левом верхнем углу фотографий обозначения On Sale, как показано на Рисунке 5-8. Единожды создав изображение On Sale, и сохранив его с прозрачным фоном как PNG картинку, Вилсон устранил необходимость в создании различных версии изображений товаров, с флагом-обозначением и без него.

В другом творческом примере, дизайнер Брайн Велосо (Bryan Veloso) (handyblogger: это тот самый, который создал набор стандартных шаблонов блогов для Google Blogger и который на самом деле является реальным локомотивом веб дизайнерского сообщества) использует прозрачность PNG изображения прикрепленного к верху страницы для создания эфекта «увядания», в котором текст как-бы проявляется когда Вы прокручиваете страницу вниз. Эффект найденый на Revyver.com (см. Рисунки 5-10 и 5-11) выглядит даже лучше, чем он описан, поэтому не упустите шанс взглянут на него (handyblogger: сейчас Брайн сменил дизайн и этой фенечки уже нет 🙁 ). Кроме этого, дерево, установленное впереди текстового содержимого страницы производит неожиданный визуальный эффект, своеобразный «вау!» фактор для тех, кто видит это впервые.

Рисунок 5-10
На Revyver.com, дизайнер Bryan Veloso использует прозрачность PNG для создания эффекта “увядания”, когда Вы прокручиваете вниз страницу, и размещает свой художественный замысел поверх текстового содержимого страницы. Рисунок 5-11
Просматривая PNG изображение Брайна в Photoshop, мы видим идею, как с помощью прозрачности альфа канала получается задуманный эффект.

Водяные знаки

На моем персональном вебсайте (Рисунок 5-12), я демонстрирую большую галерею фотографий (сейчас там более двух тысяч фотографий). В реалии эти фотографии загружены на Flickr, популярный онлайновый ресурс публикации фото, и затем отображаются локально на моем сайте с помощью API Flick’ера.

Рисунок 5-12
Страница детализации фотографии с сайта jeffcroft.com.

HTML используемый для показа фото на странице выглядит вот так:

Я создал в Photoshop версию моего лого в белом, как изображение 80х80 пикселей и установил у него непрозрачность 50%. Сохранил его в стандартных установках PNG-24, и в итоговой картинке она сохранилась как 50% прозрачность. Затем я просто добавил это изображение в мой HTML вот так:

И немного правильно спозиционировал его с помощью CSS:

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

Рисунок 5-13
Искусное лого сайта jeffcroft.com появляется с помощью прозрачности PNG в левом верхнем углу фотографии.

Если Вы хотите отличиться, Вы можете использовать DOM написав скрипт для вставки дополнительного (X)HTML и выполняя разметку водяными знаками на лету. (handyblogger: обратите внимание, что Джеф использует этот прием лишь для того, что-бы указать посетителю на copyright изображения, но ни как для того, чтобы защитить его от копирования)

Маска

Рисунок 5-14
Создание изображения в Photoshop для использования его в качестве PNG маски

Как я говорил, технический аспект этого очень похож на водяные знаки из предыдущей секции. Начнем с HTML:

Посмотрите на результат Рисунок 5-15

Рисунок 5-15
PNG маска покрыла фото и создала эффект перфорации.

Иконки с изменяемым цветом

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

Возможно нам необходим набор иконок изображающих виды спорта (Рисунок 5-16)

Рисунок 5-16
Некоторая спортивная иконография.

Рисунок 5-17
Создание трафаретов масок PNG для каждой иконки.

После подгонки размеров изображений (я выбрал 48х48 пикселей), я сохранил их используя в Photoshop настройки по умолчанию для PNG-24 с прозрачностью. Затем я создал простой XHTML файл, в котором описал каждое изображение:

Как Вы можете видеть на Рисунке 5-19 я могу изменить цвет иконок просто поменяв значение цвета в моем CSS.

Рисунок 5-19
Изменение цвета фона в CSS соответствующим образом меняет цвет иконок.

Этот вид простого изменения цвета может быть очень удобен, когда Вам необходимо переработать дизайн Вашего сайта. Вместо того, что-бы переделывать все изображения иконок, Вы просто изменяете цвет в CSS. Прием можно также замечательно использовать при наведении мышью на изображения со ссылками. Для примера, Вы можете использовать красный для обычного цвета и голубой при «наезде» мышью:

Вы даже можете использовать дополнительный CSS для более творческих вещей, таких как добавление обрамления (Рисунок 5-20)

Рисунок 5-20
Использование CSS для большего улучшения вывода иконок с добавкой обрамления.

Dan Cederholm писал об очень похожей технике в своем блоге еще в 2003, и PJ Onori раздавал замечательный набор иконок (названный Sanscons) базирующийся на этой технике на своем вебсайте.

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

Хорошо, но в каких браузерах это работает?

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

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 изображения, загруженные таким путем, больше действуют как фоновые изображения, чем изображения переднего плана (хотя они в действительности «сидят» сверху фона объекта).

Вы не можете использовать прозрачное PNG как фоновое изображение CSS для (X)HTML элемента (скажем, для

Реальное использование AlphaImageLoader

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

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

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

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

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

Далее создаем новый элемент div и сохраняем его в переменной div. Применяем к нему фильтр AlphaImageLoade, используя URL из переменной src, который мы сохранили ранее.

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

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

В заключении

Первая: даже 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.

Источник