Формати зображень: основні види та характеристики форматів зображень, коли та які формати використовувати

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

Що таке формати зображень і чому вони важливі

Будь-яка картинка на сайті або в додатку - файл, збережений з певним розширенням. Воно прописується наприкінці його назви: jpeg, png, eps. Це і є формат, який зберігає інформацію про зображення та визначає його розмір, якість та зміст. Якщо вибрано неправильний формат, фотографія не завантажується на веб-ресурсі або відображається неправильно. Ілюстрація стає «піксельною», а гіфка статичною.

Тип розширення вказується у назві файлу

Формат впливає на те, як картинка виглядає в інтерфейсі, та на ряд інших факторів.

• Сумісність із різними програмами.Графічні редактори підтримують не кожен формат зображень. Щоб відкрити файл з роздільною здатністю ai, потрібен Adobe Illustrator. А щоб відредагувати psd-шаблон, доведеться встановити Adobe Photoshop.
• Розмір файлу. Одні формати важать менше, інші – більше. Чим легша вага зображень, тим швидше вони відображаються на сайті. Чим важче зображення, тим більше часу знадобиться користувачеві на завантаження веб-сторінки.
• Масштабованість зображення. Від формату залежить, чи вдасться змінити розмір картинки без втрати якості.

Векторні та растрові зображення: у чому різниця

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

Растрові зображення

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

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

Популярні формати растрових зображень: JPEG, PNG, GIF та TIFF.

Фото — приклад растрового зображення. При збільшенні можна розглянути кожен піксель

Зображення у векторному форматі

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

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

Популярні формати векторних зображень: AI, EPS та SVG.

Іконки — приклад векторної графіки

Які формати зображень існують: ТОП-12 найпопулярніших

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

1. PNG

Абревіатура PNG розшифровується як Portable Network Graphics, що в перекладі з англійської означає портативна мережева графіка. Це растровий формат зображень, який використовується в тих випадках, коли на веб-сторінку потрібно додати логотип, іконку, кнопку або зображення без фону. У пошуковій системі PNG-файл легко дізнатися по фону з біло-сірими квадратиками - вони умовно позначають прозорість.

PNG-зображення в пошуку Google

Переваги PNG:

• Робить картинки прозорим фоном.
• Підтримує близько 17 мільйонів кольорів та 255 ступенів прозорості.
• Зображення стискається без значної втрати якості. Незначні погіршення складно помітити неозброєним оком.
• Формат сумісний з усіма операційними системами, графічними редакторами та браузерами.
• У порівнянні з фотоформатами на кшталт RAW, PNG має компактний розмір.

Недоліки PNG:

• PNG-файли важать більше, ніж GIF та JPEG.
• Під час друку зображення в PNG втрачають якість.

2. JPEG

JPEG - растровий формат, названий на честь групи розробників Joint Photographic Experts Group. Зараз він найпоширеніший в інтернеті, а файли з розширеннями .jpeg, .jpg, .jpe або .jfif зустрічаються в мережі найчастіше. У такому форматі зберігаються фотографії, поліграфічні матеріали, картинки для соціальних мереж, дизайн-макети, вайрфрейми та інші графічні об'єкти.

Формат відмінно відтворює переходи кольору, відблиски, тіні та півтони. Завдяки цьому картинка виходить об'ємною та реалістичною. Файли займають мало місця на комп'ютері та швидко завантажуються у браузері. За потреби вага картинки можна зменшити, але тоді її якість погіршиться. Враховуйте, що JPEG додатково стискається при кожному збереженні: після 3-4 разів зображення стане піксельним.

Формат JPEG підходить для ілюстрацій у блозі на сайті

Переваги JPEG:

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

Недоліки JPEG:

• При стисненні файлу зображення втрачає якість.
• Формат не підтримує прозоре тло. Якщо зберегти іконку в JPEG, то бекграунд стане білим.

3. GIF

Graphics Interchange Format, відомий як GIF, застосовується для створення, зберігання та розповсюдження анімованих зображень. Гіфка — це послідовність із кількох статичних кадрів, які змінюють один одного з певною швидкістю.Вона виглядає як відео без звуку, але важить значно менше від звичайного відеоролика. За рахунок цього файл займає мало пам'яті та кешу на пристрої та швидко завантажується у браузері. У GIF-форматі зберігають інфографіку, іконки, тексти та елементи інтерфейсу, які мають рухатися та привертати увагу користувачів.

Приклад гіфки на сайті

Переваги GIF:

• GIF - компактна альтернатива короткому відео;
• Гіфки відкриваються у всіх браузерах.
• Зображення можна зберегти без фону.

Недоліки GIF:

• Формат підтримує всього 256 відтінків, тому у нього погана передача кольорів.

4. TIFF

Tagged Image File Format – теговий растровий формат. Його використовують, щоб зберегти 100% якість зображення. TIFF-файл можна копіювати і перезберегти багато разів - чіткість і рівень деталізації картинки при цьому не постраждають. Тому його застосовують переважно в поліграфії, коли готують дизайн-макети етикеток, упаковок і банерів до друку.

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

NASA зберігає знімки з космічних телескопів у форматі TIFF

Переваги TIFF:

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

Недоліки TIFF:

5. EPS

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

Навіть маленькі іконки з розширенням .eps "важкі", тому браузери формату не підтримують. Перед публікацією зображення конвертуйте в JPEG, PNG або WebP. Щоб відкрити файл EPS, використовуйте спеціальний графічний редактор: CorelDraw або Adobe Illustrator.

У EPS зберігають логотипи, щоб змінювати їх розмір під різні носії без втрати якості

Переваги EPS:

• Файл без проблем конвертується у растрові формати.
• Під час масштабування та стиснення зображення EPS зберігає високу якість.
• Наявність шарів дозволяє редагувати окремі елементи зображення.

Недоліки EPS:

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

6. SVG

Scalable Vector Graphics - масштабована векторна графіка. Оптимальний формат для роботи з 2D-зображеннями, який призначений для створення інтерфейсів сучасних сайтів та програм.

SVG — мовна розмітка, тому файли з таким розширенням редагуються в ілюстраторі та за допомогою HTML та CSS. Якщо потрібно змінити відтінок іконки, необов'язково відкривати фотошоп або ілюстратор: достатньо прописати новий колір у коді.

Колекція іконок у SVG-форматі

Переваги SVG:

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

Недоліки SVG:

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

7. RAW

Цей термін знайомий усім, хто захоплюється фотографуванням. З англійської RAW перекладається як «сирий». Назва чудово передає суть формату: це вихідне, невідредаговане зображення, отримане за допомогою камери або смартфона. Коли ви робите фото в JPEG, камера автоматично обробляє та стискає його. RAW-файл - оригінал знімка, який дозволяє творити дива професійним фотографам: видаляти шуми, налаштовувати експозицію та баланс білого, підвищувати контрастність.

Фото справа виглядає надто темним. Формат RAW допоміг врятувати ситуацію та «витягнути» потрібну яскравість без втрати якості

У кожної камери RAW-файли мають своє розширення: у Nikon -. Nef, у Canon -. Crw, у Sony -. Arw. Щоб відкрити та відредагувати фотографію на комп'ютері, доведеться скористатися RAW-конвертером.

Переваги RAW:

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

Недоліки RAW:

• Файл займає багато місця.
• Формат підтримує не всі програми для перегляду та редагування зображень.

8. PSD

PSD – це абревіатура від Photoshop Document. Файли з таким форматом підтримуються лише у програмі Adobe Photoshop. Вони містять зображення з шарами та масками, які можна редагувати незалежно один від одного.

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

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

Переваги PSD:

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

Недоліки PSD:

• Щоб відкрити PSD-файл, потрібний Adobe Photoshop.
• Щоб опублікувати або роздрукувати зображення, його потрібно конвертувати в інший формат.
• Чим більше у картинки шарів, тим вона важча.

9. WebP

WebP розшифровується як web picture, що у перекладі означає «інтернет-картинка». Формат придумав Google спеціально для веб-графіки у 2010 році. Він дозволяє зменшити вагу зображень та прискорити їх завантаження на сайті, зберігши при цьому високу якість WebP називають покращеним аналогом JPEG, оскільки файли з такою роздільною здатністю важать на 20-25% менше.

У WebP конвертуються лише PNG та JPEG-файли

Переваги WebP:

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

Недоліки WebP:

• WebP підтримують не всі CMS (Content Management System – система керування контентом).

10. CDR

Абревіатура CDR походить від назви програми CorelDRAW, призначеної для створення графіки. Також CDR-файли відкриваються в Adobe Illustrator та конвертуються за допомогою безкоштовних сервісів. Формат універсальний: він дозволяє малювати векторні об'єкти та обробляти растрові зображення, застосовувати до них ефекти та фільтри, працювати з текстом. Його використовують у поліграфії, рекламі, веб-дизайні та інших областях, оскільки .cdr розширення гарантує високу якість картинки.

CorelDRAW – програма для створення CDR-зображень

Переваги CDR:

• Підтримує растрову та векторну графіку.
• У програмі CorelDRAW доступний величезний набір інструментів для роботи із зображеннями.

Недоліки CDR:

• Файл відкривають не всі графічні редактори, а перед публікацією його доведеться конвертувати.

11. PDF

Кожен стикався з PDF, коли замовляв квитки онлайн чи завантажував квитанцію про оплату. Повна назва формату – Portable Document Format. Компанія Adobe Systems розробила його спеціально для електронного документообігу, але його застосування набагато ширше. Файл підтримує тексти, зображення, посилання, аудіо та відеофрагменти. Тому зараз у PDF зберігають книги, гайди, чек-листи, презентації та навчальні посібники.

Приклад гайду заходів у форматі PDF. Всі посилання в документі клікабельні

Переваги PDF:

• Підтримує різні формати вмісту всередині документа.
• Файл легко завантажити, відкрити, надіслати та роздрукувати.
• Документ можна захистити від сторонніх очей та незаконного використання, якщо встановити пароль або додати електронний друк.

Недоліки PDF:

12. AI

AI – скорочення від Adobe Illustrator, програми для роботи з векторною графікою. Вона підходить для створення логотипів, іконок та ілюстрацій та верстки макетів, тому її та .ai розширення використовують у веб-дизайні. Об'єкти в даному форматі масштабуються, зберігаючи вихідну якість.

AI-форматі використовують для розробки та зберігання лого компаній

Переваги AI:

Недоліки AI:

Де і як використовувати зображення різних форматів

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

• Растрова графіка — фотографії та ілюстрації. Якщо плануєте роздрукувати картинку, вибирайте розширення з гарною деталізацією та кольором: .raw або .tiff. Щоб додати зображення на сайт, краще вибирати компактніші формати на кшталт JPEG і PNG.
• Векторна графіка використовується для створення елементів інтерфейсу та брендованої символіки. Віддавайте перевагу «легким» та сучасним форматам – SVG або WebP.

Розширення файлу залежить від того, яка програма для редагування у вас встановлена. Перед публікацією PSD, AI і CDR-файли доведеться конвертувати: тоді їх вдасться розмістити в інтернеті або роздрукувати.

Як стиснути та збільшити картинку без втрати якості

Якщо зображення занадто маленьке для білборду або занадто важке для сайту, спробуйте оптимізувати зображення.

• Зменшити вагу файлу допоможуть різні методи стиснення.Спробуйте змінити його формат або зменшити розмір, але пам'ятайте, що у другому випадку втрата якості неминуча. Оптимальний спосіб - використовувати сторонній сервіс на зразок Optimizilla.Він перетворює великі файли на маленькі, зберігаючи оригінальний рівень деталізації.
• Збільшити зображення складніше, ніж зменшити. Якщо справа стосується векторної графіки, жодних проблем: розтягніть картинку, скористайтеся сервісом Upscale Media або функцією інтерполяція в графічному редакторі — вона змінює розмір пікселів. А ось растрове зображення при масштабуванні неминуче втратить чіткість.

Висновок

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