Формати зображень SVG, PNG та JPG: плюси та мінуси. Зображення у форматі PNG – як відкрити, редагувати та конвертувати файл Файли png

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

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

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

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

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

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

Прозорість - ключова характеристика GIF і PNG, яка часто є причиною вибору формату веб дизайнера, що використовується. Хоча PNG пропонує більш вичерпну підтримку прозорості, веб дизайнерам часто потрібно створити GIF версію зображень для припасування до старих браузерів. Використовуючи CSS це можливо (і частково банально), через відсилання GIF зображень для старих браузерів та високоякісних PNG у браузери, які їх розуміють. Але це подвійна робота для веб-дизайнера і як результат люди йдуть по меншому опору і продовжують використовувати GIF зображення.

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

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

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

За останні кілька років, градієнт - плавний перехідміж двома або більше квітами, став найкращим другом веб дизайнерів. Особливо популярні витончені, ледь помітні градієнтні заливки, які не кидаючись у вічі створюють відчуття глибини та фактурності.
Іноді GIF це найкращий вибір для градієнта. Якщо градієнт це простий двоколірний перехід, GIF у ньому працює бездоганно. Проте, обмеженість GIF лише 256 кольорами часто створює помітну та неохайну "смугастість" серед складніших градієнтних переходів. JPEG, з іншого боку, може виводити досить приємні градієнти, але часто ціною більшого розміру файлу. І поки JPEG градієнти, як правило, досить хороші, потрібно пам'ятати, що JPEG використовує стиск із втратами, що означає, що отримане зображення ніколи не дотягуватиме до якості стиснутої картинки.

Типовий стиль фонового градієнта, що розглядається, використовується для кнопок, блоків або просто десь ще. Це може виглядати як на малюнку 5-1. За годинниковою стрілкою, від лівого верхнього кута, ми бачимо оригінальне (несжате) зображення, GIF версію, PNG версію і JPEG. Ви бачите, що PNG має найменший розмір (515 байт). Це вчетверо менше, ніж GIF зображення. JPEG трохи більше ніж PNG на 637 байт і він до того ж нижче якістю через стиснення з втратами (правда можливість людського ока визначити відмінність як у цьому простому прикладі залишається під питанням).

Малюнок 5-1
Панель Photoshop'у - Save For Web,
показує відмінності файлового розміру для одного і того ж зображення в різних форматах

Іноді необхідно створити зображення, яке працює однаково на різних підкладках. Деякі загальні приклади – це лого та іконки. У таких ситуаціях традиційно домінували GIF файли, але є кілька причин, чому PNG може бути більше найкращим виборомв цій ситуації. PNG зазвичай виграє у розмірі файлу для логотипів або будь-якого іншого простого "мистецтва". До того ж, вроджена прозорість PNG робить простим створенняодиночних файлів, які працюють поверх будь-якого фону. PNG пропонує двійкову прозорість, як у GIF, але також надає набагато бажаніший варіант з альфа-каналом, в якому пікселі можуть бути частково прозорими, замість того, щоб бути просто включеними або вимкненими. Використання останнього збільшує розмір файлу, іноді навіть більше ніж GIF з двійковою прозорістю, але це дозволяє робити згладжування на межі вашого зображення і робити більш елегантним його розміщення поверх фону.

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

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

Я знаю, що Ви думаєте: вся ця PNG прозорість добре виглядає, але чи практична вона?

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

Internet Explorer 6 і нижче не підтримує прозорість альфа каналу, вбудовану в PNG формат. З того часу, як для більшості численних веб-серферів був зроблений вибір (або не вибір) браузера, ця зяюча дірка стримувала веб дизайнерів далеко від PNG. Але з виходом Internet Explorer 7 ми отримали повну підтримку альфа прозорість PNGу всіх значних браузерах. Що далі, чи є шляхи для роботи з альфа-прозорістю PNG в Internet Explorer 6 та нижче? Отже, якщо Ви хочете використати цей ефект, ніщо не зупинить Вас. Internet Explorer 6 і його ранні версії вимагають до себе більшої, ніж треба, уваги, але це безперечно можливо.

У складі Internet Explorer є різні власні фільтри. Вони використовуються в CSS, але вони не є частиною офіційної специфікації CSS. Іншими словами, вони не стандартизовані в Інтернеті. На жаль Internet Explorer 6 і нижче не повністю підтримують формат PNG (який рекомендований W3C), у Microsoft є фільтр який усуває цей недолік: AlphaImageLoader.

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

Втім, Ви можете застосувати AlphaImageLoader в CSS на елементах img і насолоджуватися результатом. Спершу буде завантажено зображення, прозорість залишається, але потім зображення буде завантажено знову - як передній вміст об'єкта - з непрозорими областями (так "затінюється" Ваша прозора версія).

Ви не можете використовувати прозоре PNG як фонове зображення CSSдля (X)HTML елемента (скажімо, для ) і очікувати, що AlphaImageLoader зробить цю роботу в Internet Explorer як слід. Пам'ятайте, що AlphaImageLoader вставляє зображення між фоном і переднім планом об'єкта. Тому, поки він буде вантажити Ваше зображення у всій своїй прозорій красі, він також продовжуватиме вантажити його як фонове зображення CSS і без Ваших чудових напівпрозорих пікселів.

Повернімося назад до одного з ранніх прикладів і спробуємо правильно завантажити його в Internet Explorer. Пам'ятаєте Channel 49, TV станцію в Topeka? Впевнений – так. Малюнок 5-21 показує, як виглядає сайт в Internet Explorer 6.

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

HTML для верхньої частини, пов'язаної з погодою, виглядає як Ви, можливо, вже припустили:

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

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

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

Отже, що ж у файлі JavaScript fixWeatherPng.js? Погляньмо:

Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; // Кілька 49abcnews.com-specific CSS стиляє заміщений для brevity. img.replaceNode(div); )

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

Починаємо, спершу ми шукаємо зображення з яким ми будемо працювати за його атрибутом і зберігаємо його в змінній 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 є одним із найпопулярніших і пропонує користувачам зберігати стислі картинки, не втративши при цьому їх якості. Найбільше PNG використовується для редагування графіки або в інтернеті. Далі ми розглянемо кілька простих способів, завдяки яким ви зможете відкрити файл цього формату у себе на комп'ютері.

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

На просторах інтернету існує безліч графічних редакторів та спеціального софту для перегляду та редагування зображень. Вони надають користувачам велику кількість функцій та інструментів, що робить процес роботи з картинками максимально комфортним. Розглянемо процес відкриття PNG-зображення на прикладі програми GIMP:

Якщо GIMP з будь-яких причин не влаштовує вас, пропонуємо ознайомитися з повним спискомпрограм для перегляду зображень у нашій статті за посиланням нижче. Там ви точно знайдете щось слушне.

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

У всіх версіях Windows є вбудована програма для перегляду зображень. З її допомогою здійснюється відкриття файлів формату PNG. Давайте докладніше розглянемо цей процес:

Якщо вам необхідно, щоб усі PNG-зображення відкривалися через стандартний засіб перегляду фотографій Windows, виконайте наступні дії:

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

У цій статті ми докладно розглянули прості способивідкриття картинок формату PNG. Як бачите, у даному процесінемає нічого складного і все виконується буквально за кілька дій.

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

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

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

Розширення PNG - це формат файлу, який використовується для зберігання зображень без втрати якості. Це найпопулярніший формат фотографій в Інтернеті спеціально розроблений для використання в Мережі.

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

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

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

Програма Png — Перегляд фотографій Windows за умовчанням часто використовується для відкриття файлів PNG, оскільки це системна програма Windows. Але є багато інших способів їх перегляду.

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

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

Файли зображень можна перетворювати у різний спосіб, наприклад, конвертувати в png і з нього за допомогою різних програм і онлайн сервісів. Наприклад, це дозволяє робити редактор Png - Фотоконвертер.

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

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

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

Mac OS X 10.4 та наступні версії зберігають скріншоти як файли PNG. Ubuntu Linuxтакож зберігає друковані скріншоти у форматі PNG.

MIME-тип: image/png

Завантажити програму для формату PNG

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

PNG24, 456 Кб

Як ми з'ясували в першій частині, в PNG24 зображення по суті складається з двох шарів: RGB, що містить дані про колір кожного пікселя, і альфа-каналу з інформацією про їх прозорість.

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

І неозброєним оком видно, що залишилися великі фрагменти абсолютно непотрібної інформації:

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

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

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

3. За допомогою Image → Adjustments → Threshold залишимо лише ті пікселі маски, колір яких був чорним. Для цього перетягнемо повзунок у крайнє ліве положення.

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

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

6. Знову інвертуємо виділення та додаємо шару маску (іконка на палітрі шарів).

7. Тепер робимо Save for Web і дивимося, як зображення чудовим чином схудло на 122 КБ.

Ще раз повторюю, що всі дії дуже зручно записуються в Actions, після чого виконуються одним натисканням клавіші.

Продовження буде.

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

Спробуємо розібратися, які переваги дає цей формат, щоб навчитися ними користуватися під час підготовки ілюстрацій для Інтернету.

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

Найголовніша перевага формату PNG - це, звичайно ж, нові алгоритми стиснення. Усі пам'ятають, що GIF ефективно стискає лише горизонтальні одноколірні області? Про це обмеження тепер можна забути:

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

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

Як видно з прикладу, GIF-кодувальник віддав би на стиск рядки, які погано упаковуються по горизонталі (бо однакові кольори поширюються по вертикалі). А ось як може перетворити ці дані PNG-кодувальник:

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

Чому я написав може? Тому що в нашому ідеалізованому випадку ефективнішою була б така схема:

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

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

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

Уважний читач може помітити, що фільтри використовуються не до всього файлу повністю, а до рядків.

Це означає що кожнарядок може мати свійфільтр. Виходить, що способів фільтрації одного зображення може бути 5 висота картинки. Загалом завдання гарного кодувальника якраз полягає в тому, щоб підібрати такі значення фільтрів, при яких обсяг файлу буде мінімальним. На жаль, фотошоп не завжди добре справляється зі своєю роботою, тому на допомогу приходять різні утиліти на кшталт OptiPNG і PNGCrush, які у велику кількість проходів підбирають різні способи фільтрації та стратегії стиснення даних, значно скорочуючи обсяг деяких складних зображень. Однак варто пам'ятати, що ці програми не гарантують зменшення обсягу для кожного файлу, вони лише намагаються знайти оптимальний спосібкодування даних.

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

Переваги greyscale над truecolor очевидні: наприклад, білий колір у першому випадку записується (у десятковій системі числення) числом 255, а в другому - 16777215.

Тепер, озброївшись знаннями про зберігання даних у форматі PNG, ми можемо застосовувати їх у підготовці зображень для Інтернету. Про це у наступних статтях.

Ви можете отримати файл, який має файл extension ending in .png. Files with file extension. , Які засоби вони "не можуть бути вміщені в будь-який час.

PNG-файли є компресованим raster image-файли зазвичай реалізовані для visual elements, що містяться в веб-сайті між іншими Web graphics. Image content of these .png files consists of index colors integred by bitmap images, and lossless digital image compression and encoding specifications that are implementated in these .png files are similar to the compression standards integrated in GIF files. Також відомо як портативний мережевий графіки, PNG формат був розвинений в межах обмеження GIF зображення, в термінах кольорової підтримки і licensing patent. Transparency channel of thes PNG files have been improved to implement 8-bit support. CMYK support is no available in thes PNG files.

Створення файлу .png, або будь-якого іншого файлу на вашому комп'ютері, може бути двостороннім. Якщо ваші файли з'єднання встановлюються коректно, пристосування, що "відповідно до Open Your. Це "також можливо, що ви маєте правильне застосування на вашому PC, але .png файли є", і він поєднаний з ним. У цьому випадку, коли ви намагаєтеся відкрити .png файл, ви можете скористатися тим, що Windows application is the correct one for that file. Від того, щоб відкрити .png файл, буде відкрито відповідне застосування.

Adobe Photoshop CS6 for Mac

ACD Systems Canvas 14

ACD Systems ACDSee 15

Файл 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.

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