GIF vs JPG vs PNG – Який формат зображення слід використовувати та коли?

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


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

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

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

GIF (Графічний формат обміну) – для дітей, що танцюють

Ах, GIF. Це принесло нам чарівних котів, танцюючих немовлят та зайві блискучі ґудзики, які блищали та блищали.

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

Фактичний формат був розроблений у 1987 році, і він досить простий. Ви отримуєте 256 кольорів на зображення, вибрані з спектру RGB (червоний, зелений та синій). Якщо у вас є анімований GIF, то кожен кадр має свою власну палітру. Ця система допомагає зменшити розміри файлів… відносно кажучи. Довгі анімовані GIF-карти з великою роздільною здатністю можуть легко працювати в сотні мегабайт, що може трохи зашкодити, якщо ви перебуваєте в обмеженому плані даних.

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

Це віслюк, який я сфотографував у жовтні 2017 року:

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

Я називаю його Гері, і він дуже холодний у всьому. Чудова модель. У будь-якому випадку це насправді високоякісне зображення JPG. Ось така ж картинка, але у форматі GIF:

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

Подивіться, як це майже виглядає акварель? Тепер це абсолютно добре для анімації – люди не повинні дивитися на деталі кожного кадру. Вони повинні насолоджуватися дією.

Під час створення веб-сайту я, як правило, не використовував GIF як частину власного інтерфейсу … анімовані фони минулих років переслідують усіх нас. У будь-якому випадку GIF найкраще використовувати як вміст. Закиньте його в середину свого блогу, щоб загнати точку додому або полегшити настрій.

JPG (Об’єднана група фотографічних експертів) – для дружніх ослів та інших зображень з високою деталізацією

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

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

Давайте ще раз поглянемо на нашого старого доброго друга, Гері. Ось він у зображенні JPG із якістю, встановленою на 100 (найвище значення). Зображення «важить» 633 кілобайти.

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

А тепер давайте встановимо якість зображення на 80. Якщо придивитись уважно, деталі точно загублені, але не дуже. І навіть з цією мінімальною втратою деталей, розмір зображення зменшився до 121 кілобайт.

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

При рівні якості 50 зображення починає демонструвати набагато більш серйозне стиснення зображення. Однак помітні зменшення повернень у розмірі файлів помітні. Ми втратили лише 41 кілобайт, що загалом знизило нас до 80.

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

І на рівні якості 30, це просто не варто. 65,4 кілобайт.

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

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

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

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

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

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

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

Тож де JPG вміщується на веб-сайті? Фотографії, прості та прості. Хочете велику фонову фотографію для веб-сайту? JPG. Фото ваших товарів на дисплеї? JPG. Кадри з вашої щорічної подорожі? Ви бачите, куди я йду з цим.

PNG (Portable Network Graphics) – переважно для логотипів та значків

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

Формат, який ми зазвичай використовуємо, називається PNG-24, і він підтримує до 16 мільйонів кольорів, це означає, що він діє як формат без втрат. Жодна деталь не втрачається. Колись.

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

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

І збільшена версія:

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

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

Ця фотографія Ґері, гарненький ослик? Його версія PNG важить 2,32 мегабайти, що є величезним для зображення цих розмірів. Я не включив його сюди, тому що я поважаю будь-які обмеження пропускної здатності або обмеження даних, які у вас можуть бути.

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

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

GIF vs JPG vs PNG - Який формат зображення слід використовувати та коли?

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

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

Зближуючи все це разом

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

Якщо говорити про простоту речей, ось цей чіт-лист, про який я згадував раніше:

ФорматНайбільша міцністьНайбільша слабкістьЗазвичай використовується дляТип
GIFАнімаціяСкладністьАнімовані зображення; мемиВтрачений
JPGСкладність і стиснення файлівСтиснення робить простішу графіку погано виглядатиФотографіїВтрачений
PNGПроста, чиста графіка; якість без втрат; прозорістьСкладні зображення, як фотографії, можуть мати великі розміри файлівЛоготипи; проста графікаБез втрат

Нарешті, це вже давно встановлені формати зображень, тому їх досить просто у використанні: просто завантажте їх на свій веб-сайт та перейдіть. Було б дуже, дуже важко знайти розробників веб-сайтів (наприклад, Wix або GoDaddy) або веб-хостів, які не підтримують усіх трьох.

Три формати також підтримуються у всіх основних браузерах (Chrome, Firefox, Edge, Safari) та в переважній більшості менш відомих браузерів. Дотримуйтесь загальних порад у статті, і ви будете добре…

…поки WebP не замінить JPG, GIF і, можливо, навіть PNG. Але це зовсім інша стаття, тому не запускайте мене.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me