Під час роботи зі зображеннями важливо розуміти різні типи файлів. Який формат найкраще підходить для певної програми?

У цьому посібнику ми пояснимо найпоширеніші типи зображень і в яких випадках їх потрібно використовувати.

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

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

Безвтратне та втратне стиснення: яка між ними різниця?

Безвтратне стиснення — це клас алгоритмів стиснення даних, які дозволяють ідеально відновити початкові дані зі стиснених даних.

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

Тут з’являється втратне стиснення. «Втратне», оскільки воно втрачає частину інформації.

Втратне стиснення дозволяє відновити тільки приблизні дані початкових даних (хоча зазвичай зі значно покращеними рівнями стиснення).

Нижче ви будете бачити терміни «безвтратний» і «втратний», коли ми описуватимемо різні формати зображень.

Що таке формат JPEG? (розширення .jpg та .jpeg)

JPEG — найпоширеніший тип файлу для зображень. Він найкраще підходить для фотографій та інших зображень з багатьма кольорами.

До речі, JPEG означає «Joint Photographic Experts Group» (об’єднана група експертів у галузі фотографії) — команду, яка розробила цей стандарт.

Файли JPEG менші за інші типи файлів, тому їх легко завантажувати та обмінюватися ними.

Чи можуть JPEG бути прозорими або мати прозорий фон?

Ні. На відміну від GIF, SVG та PNG, JPEG не можуть мати прозорого фону. Для цього його потрібно перетворити в інший формат файлу.

.jpeg та .jpg — одне і те ж?

Так. Єдина різниця в тому, що традиційно розширення файлів складаються з трьох символів. .jpg — це скорочена форма .jpeg.

Що таке PNG? Формат PNG (розширення .png)

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

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

PNG можуть мати прозорий фон.

Що таке GIF? Формат GIF (розширення .gif)

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

GIF можна використовувати для статичних зображень. Проте частіше їх асоціюють з анімаціями — серією зображень, які автоматично відтворюються. Наприклад, ось GIF суспільного надбання:

Це всього лише серія зображень, які відтворюються без перестанку.

Зверніть увагу, що GIF також можуть мати прозорий фон.

Як вимовляти GIF?

Засновник формату GIF — Стів Вілхіте — сказав, що він каже «джіф» як у назві арахісової пасти «Jif».

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

Що таке TIFF? Формат TIFF (розширення .tif)

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

Використовуйте TIFF, якщо якість важливіша за розмір файлу. На практиці, особливо при роботі зі зображеннями в інтернеті, найкращий варіант — це PNG.

Що таке SVG? Формат SVG (розширення .svg)

SVG — це Scalable Vector Graphic (масштабована векторна графіка). Це означає, що графіка може масштабуватися до будь-якого розміру без втрати якості.

На відміну від усіх інших форматів, які ми вже обговорили, файли SVG є векторними (JPEG, PNG, GIF та TIFF є растровими файлами).

Це означає, що файли SVG можна масштабувати до будь-якого розміру без втрати якості, а растрові файли втрачатимуть якість.

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

Ось приклад файлу SVG з Mozilla Developer Network. Так виглядає SVG у формі коду XML:

<svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

Цей простий код відтворює таке зображення:

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

Файли SVG також можна анімувати за допомогою інструменту під назвою SMIL. Тобто вони можуть служити як просторові файли GIF. А якщо ви дійсно відважні, то можете програмувати SVG.

JPEG vs PNG: що краще для мережі?

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

Наразі я рекомендую використовувати JPEG для більшості зображень.

Якщо у вас є логотип компанії або дуже важлива фотографія, де важлива якість, найкращий варіант — PNG.

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

Сподіваюся, ви багато чого дізналися про типи зображень.

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