GIF, PNG, JPG або SVG: що використовувати?

30

Від автора: якщо ви тільки що не вистрибнули з паруючого Делориана прямо з 1985 року, то вам має бути знайомий самий безглуздий формат в інтернеті — GIF (Graphics Interchange Format). GIF – формат растрових зображень. Однак на відміну від JPEG та PNG-це формат файлів обмежений колірної палітри в 256 кольорів. По суті, в кожному GIF зображенні встановлено «бокс з кольоровими крейдами», і ви не можете отримати новий колір шляхом їх змішування.

GIF, PNG, JPG или SVG: что использовать?

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

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

Категорія: без втрати якості

Використання:

проста анімація;

маленькі іконки;

графіка з низькою варіацією пікселів (тобто монотонні кольору типу логотипів і прапорів).

JPEG

В залежності від ваших уподобань ви можете використовувати цей формат у вигляді «JPEG» або «JPG» — обидва є прийнятними варіантами одного акронім — Joint Photographic Experts Group.

На відміну від GIF формат JPEG 16-бітний, тобто він вміє змішувати червоний, синій і зелений. Це дозволяє відображати мільйони квітів і робить його дуже доброзичливим до фотографій. Почасти так склалося тому, що це стандартний формат, у більшості цифрових камер на ринку.

JPEG дозволяє гнучко настроювати ступінь стиснення зображення: від 0% (сильне стиснення) до 100% (без стиснення). Як правило, 60%-75% вистачить, щоб значно знизити вага файлу, зберігаючи відмінну якість на більшості екранів.

JPEG добре підходить для стиснення і рендеринга фотографій, але це тип стиснення з втратами. Тобто він мало підходить для постійного редагування зображень. Експорт в JPEG призводить до втрати якості, і втрати стають все більше з наступними экспортами. Тому професійні фотографи в основному знімають у форматі без втрат RAW.

Також на відміну від GIF і PNG формат JPEG не зберігає прозорість.

Категорія: з втратами якості

Використання:

статичні зображення;

фотографії;

зображення зі складними кольорами і динамікою.

PNG

На відміну від GIF і JPEG формат PNG (Portable Network Graphics) новий. Завдяки двом версіями формат схожий на мікс GIF і JPEG.

PNG-8

PNG-8 сильно схожий на GIF і використовує також колірну палітру в 256 кольорів (максимум). У нього трохи краще прозорість і трохи менше вага файлу. Проте в PNG-8 немає функції анімації.

PNG-24

PNG-24 дозволяє рендери зображення з мільйонами кольорів, майже як JPEG, але також зберігає прозорість.

PNG-24 – формат без втрат якості, що збільшує вагу файлів. Якщо якість зображень важливіше ваги файлів PNG-24 кращий вибір. Сервіси типу TinyPNG.com часто можуть сильно знизити вагу файлу.

У порівнянні зі своїм зведеним братом JPEG, PNG-24 не є універсально сумісними з усіма додатками і платформами, що робить формат невідповідним для спільного використання в мережі. Тим не менш, формат можна змінювати без втрат якості.

Категорія: без втрат якості

Використання:

веб-графіка з прозорістю;

складні фотографії з безліччю квітів і графіка;

зображення, які необхідно повторно редагувати і експортувати.

SVG

На відміну від трьох форматів вище SVG (Scalable Vector Graphics) – не чисто растровий формат. Це векторний формат, близький до AI в Adobe Illustrator і EPS. Векторна графіка поступово набуває популярності в мережі і у UI дизайнерів.

Іноді зручно представляти SVG як «HTML для ілюстрацій». Цей формат трохи відрізняється від інших.

SVG краще всього підходить для відображення логотипів, іконок, карт, прапорів, графіків і іншої графіки, створеної у векторних графічних редакторах типу Illustrator, Sketch та Inkscape. SVG написаний на XML розмітки, його можна редагувати в будь-якому текстовому редакторі, а також за допомогою JS і CSS. Векторна графіка масштабується під будь-який розмір без втрати якості, що ідеально підходить для адаптивного дизайну.

SVG – векторний формат, проте в нього можна (часто так і робиться) вставити растрову графіку точно так само, як JPEG вставляється в HTML.

Вставити зображення можна за URL (посилання на JPG на сторінці) або з допомогою інкапсуляції піксельного зображення у вигляді Data URI. Це робить SVG максимально гнучким і потужним форматом.

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

Онлайн сервіси типу WordPress, Flickr, Medium, Tumblr і Facebook будуть або примусово конвертувати SVG у підходящий для них формат, або, що більш ймовірно, відразу заблокують завантаження SVG. В мережі є купа хостингів SVG, серед яких svgur.com, imgh.us і навіть Github, як Alex продемонстрував тут.

Мені подобається, що є маленькі хостинги SVG, проте я на 99% впевнений, що наступні 5 років тільки GitHub буде SVG-friendly. При використанні SVG у веб-дизайні майже завжди можна стиснути вага файлу на відміну від JPEG і PNG. Але чим складніше SVG, тим більше вага файлу.

Категорія: векторна графіка/без втрат якості

Використання:

логотипи і графіка у веб-дизайні;

ретина екрани.

Порівняння

Ми дізналися про відмінності популярних форматів, тепер пора порівняє їх обличчям до обличчя. Нижче ви побачите, як GIF, JPEG, PNG і SVG обробляють зображення з простими і складними кольорами, а також зображення.

Графіка з монотонними квітами

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

Нижче показано порівняння ваги файлів і якість. Зображення були збережені через функцію в Photoshop «Зберегти для web і пристроїв» з максимальною якістю.

GIF: 17.6 KB

GIF, PNG, JPG или SVG: что использовать?

JPEG 100% (без стиснення): 53.3 KB

GIF, PNG, JPG или SVG: что использовать?

JPEG 75%: 33 KB

GIF, PNG, JPG или SVG: что использовать?

PNG-8: 11.8 KB

GIF, PNG, JPG или SVG: что использовать?

PNG-24: 19.6 KB

GIF, PNG, JPG или SVG: что использовать?

SVG: 6 KB (чиста векторна графіка)

GIF, PNG, JPG или SVG: что использовать?

У випадку з цим зображенням не помітно великих втрат якості при порівнянні шести форматів. Хоча можна помітити невеликі артефакти по краях стисненого JPEG.

Не завжди все буде так з графікою з монотонними квітами, але в більшості випадків проблем з такими зображеннями не виникне. Для цього зображення найкращий варіант за умови, що у нас є оригінал – SVG з вагою в 6Кб. Якщо векторної графіки немає, на заміну можна використовувати PNG-8. Вага файлу знижується з 23,4 Кб до 11,8 Кб.

Зображення зі складними кольорами

Оригінал – 328Кб JPEG з роздільною здатністю 1280 х 960. Нижче показано порівняння ваги файлів і якості. Зображення були збережені через функцію в Photoshop «Зберегти для web і пристроїв» з максимальною якістю.

У нас немає векторної версії цього зображення, тому будь-яка SVG версія буде являти собою просто JPEG всередині SVG. Цей формат тут буде зайвим.

GIF: 426kb

GIF, PNG, JPG или SVG: что использовать?

JPEG 100% (без стиснення): 776 KB

GIF, PNG, JPG или SVG: что использовать?

JPEG 75%: 215 KB

GIF, PNG, JPG или SVG: что использовать?

PNG-8: 327 KB

GIF, PNG, JPG или SVG: что использовать?

Зображення зі складними кольорами краще виглядають в JPEG, PNG-24 і SVG. Кольори здебільшого зберігаються, і немає цих страшних кілець і шуму, який зазвичай вилазить в GIF і PNG-8.

Кольорові фотографії

Оригінал – 215Кб JPEG з роздільною здатністю 1280 х 710. Нижче показано порівняння ваги файлів і якості. Зображення були збережені через функцію в Photoshop «Зберегти для web і пристроїв» з максимальною якістю.

SVG тут також мало що дасть.

GIF: 453 KB

GIF, PNG, JPG или SVG: что использовать?

JPEG 100% (без стиснення): 90 KB

GIF, PNG, JPG или SVG: что использовать?

JPEG 75% : 82 KB

GIF, PNG, JPG или SVG: что использовать?

PNG-8: 361 KB

GIF, PNG, JPG или SVG: что использовать?

PNG-24: 1.03 MB

GIF, PNG, JPG или SVG: что использовать?

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