PNG

Вас бентежило, чому одне зображення має фон, а інше – прозоре? Або чому файл JPG виглядає розмитим після кількох збережень?

Формат PNG вирішує ці проблеми.

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

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

Формат PNG – досить популярний варіант, основною відмінністю якого є прозорість фону. Його історія ведеться з 1995 року, коли він був розроблений як альтернатива GIF.

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

Формат PNG

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

Фон із сірими квадратиками в пошуковику дає змогу легко візуально розпізнати прозорість. Однак після скачування і відкриття зображення квадратики мають зникнути, а фон має бути порожнім.

Прозорість не є обов’язковою опцією для PNG. Ви можете використовувати цей формат просто як повноколірне зображення і без вирізання фону.

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

Створення формату PNG почалося 1995 року, коли з’явилося бажання мати альтернативу графічному GIF. Однак використання GIF вимагало придбання ліцензії в компанії, яка його розробила, що було не завжди зручно. Замість нього виник новий формат, PNG, який є вільно розповсюджуваним і доступним для кожного користувача.

Плюси та мінуси формату PNG

Плюси:

• Якість зображення не змінюється за будь-якого ступеня стиснення.
• Зручний для проміжних версій картинок, оскільки після редагування і перезбереження якість не погіршується.
• Тримає висококонтрастне попіксельне зображення екрана на скріншотах без об’єднання сусідніх пікселів.
• Використовує максимально можливу кількість кольорів: 256 кольорів для веб-графіки (PNG-8), 16 мільйонів – для повнокольорових (PNG-24) і зображень у відтінках сірого.
• Підтримує багаторівневу прозорість, що дає змогу створювати прозорі градієнти, ефект відкидання тіні на сусідні елементи на веб-сторінці. Файли PNG добре підходять для логотипів, малюнків і фотографій, якщо потрібно зручно накласти на багатоколірні зображення.
• Містить метадані (EXIF), які закріплюють авторські права.
• Зберігає веб-графіку маленького розміру, що прискорює завантаження сайтів.
• Надає можливість роботи з шарами.

Мінуси:

• PNG зберігає повнокольорові зображення, такі як фото та ілюстрації, більшого розміру, ніж еквівалентні .jpeg, .tiff або .gif.
• Графічний формат PNG не придатний до анімації, не призначений для друку, розроблений спеціально для зображень у Мережі, не підтримує колірну модель CMYK.

Робота з форматом PNG

Припустимо, ви завантажили зображення в іншому форматі з Інтернету і хочете перетворити його у формат PNG. Як це зробити?

Розглянемо процес створення PNG-зображення в Paint, яка є на вашому комп’ютері. Спочатку відкрийте картинку в програмі. Потім виберіть «Зображення у форматі PNG». Після цього визначте відповідне місце для збереження файлу PNG на комп’ютері.

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

Програми для роботи з форматом PNG

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

В основному інструментарій PNG класифікується за низкою критеріїв, а саме:

• розроблених для функціонування в операційних системах Windows, Mac і Linux;
• застосовуваних на мобільних гаджетах.

Існує кілька програмних продуктів для Windows, які дають змогу відкривати та редагувати PNG файли:

• Movavi Fhoto Editor – це визначний застосунок для виправлення зображень і фотографій у Windows, який підтримує файлові формати PNG.
• Microsoft Paint – програма, яку ми вже згадували. Вона доступна на будь-якому ПК з Windows, здійснює функції перегляду та конвертації PNG-файлів в інші формати.
• Artweaver – утиліта, що володіє якісними можливостями для виправлення різних картинок, включаючи PNG-формат.
• Adobe Photoshop – програма, яка знайома багатьом користувачам, вона дає змогу редагувати зображення на високому рівні, робити їх унікальними і зберігати у форматі PNG.

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

• MacPhun ColorStrokes – це швидкий додаток для редагування PNG-зображень, призначений насамперед для операційної системи MAC.
• GIMP – просте ПЗ для створення і виправлення картинок PNG та інших форматів, що працює в Linux.
• Adobe Photoshop Express для Android – спеціальний додаток, що встановлюється на телефони через App Store або Google Play, який може відредагувати зображення для блогу або соціальних мереж.

Звичайно, це далеко не всі програми. В інтернеті можете знайти ще багато схожих додатків.

Стиснення або конвертація формату PNG

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

Використовуючи ці інструменти для стиснення файлів PNG, можна легко зменшити їхній розмір:

• Compress JPEG – безкоштовний онлайн-інструмент, що забезпечує стиснення кількох форматів, включно з PNG. Для зменшення розміру файлу просто перетягніть його на сайт.
• Compress PNG додатково дає змогу налаштовувати відсоток стиснення, що може зменшити кольоровість зображення, якщо вам потрібно сильніше скоротити обсяг.
• Iloveimg – ще один онлайн-інструмент для стиснення файлів PNG. Крім того, тут доступний інструмент обрізки, зміни розміру, перетворення. Після завантаження файлу і кліка на кнопку «Стиснути», додаток автоматично завантажить міні-версію PNG.

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

Нижче перелічено кілька конвертерів файлів, які можуть допомогти:

• FreeConvert пропонує широкий вибір онлайн-інструментів, включаючи конвертер зображень у формат PNG. Просто завантажте файл із комп’ютера або хмарного сховища та виберіть опцію PNG, щоб його перетворити.
• Convertio – це конвертер PNG, який може стати улюбленим помічником, якщо вам потрібно змінити формат файлів. Convertio працює із зображеннями, документами, електронними книжками, векторами і САПР з різноманітного списку розширень. Ви можете конвертувати файли до 100 МБ, однак якщо об’єм перевищено, буде потрібно заплатити невелику суму. Інструмент має розширення, щоб спростити завдання.

Коли варто обирати PNG

Не кожна задача потребує PNG. Якщо тобі потрібно зображення без фону, з чіткими лініями, текстом або іконками – PNG підходить ідеально.

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

Для анімацій краще підійдуть формати типу GIF або відео.

PNG у сучасному вебі

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

Також PNG чудово себе показує у форматах Retina, де важлива деталізація.

Оптимізація PNG для вебу

PNG без стиснення може важити багато. Щоб зменшити вагу без втрати якості:

• Використовуй PNG-8, якщо достатньо 256 кольорів.
• Перед завантаженням на сайт проганяй зображення через TinyPNG, ImageOptim або Squoosh.
• Видаляй непотрібні метадані.

Це особливо важливо для мобільного трафіку.

Висновок

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

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