Коли слід використовувати певні типи файлів зображень при створенні веб-сайтів чи інтерфейсів тощо?
Які їхні сили і слабкість?
Я знаю, що PNG та GIF без втрат, а JPEG - втрати.
Але в чому головна відмінність PNG від GIF?
Чому я віддаю перевагу одному перед іншим? Що таке SVG і коли я повинен його використовувати?
Якщо ви не переймаєтесь кожним пікселем, чи завжди ви повинні використовувати JPEG, оскільки це "найлегший"?
Відповіді:
Ви повинні знати про кілька ключових факторів ...
По-перше, є два типи стиснення: без втрат і втрати .
Існують також різні глибини кольору (палітри): індексований колір та прямий колір .
BMP - без втрат / індексованих та прямих
Це старий формат. Це без втрат (при збереженні не втрачаються дані зображення), але також зовсім мало стиснення, що означає збереження, оскільки BMP призводить до ДУЖЕ великих розмірів файлів. Він може мати палітри як індексованих, так і прямих, але це невелика розрада. Розміри файлів настільки зайві, що ніхто ніколи не використовує цей формат.
Добре для: насправді нічого. Немає нічого, що BMP перевершує або не покращує інші формати.
GIF - лише без втрат / індексується
GIF використовує стиснення без втрат, це означає, що ви можете зберігати зображення знову і знову і ніколи не втрачати будь-які дані. Розміри файлів набагато менші, ніж BMP, оскільки насправді використовується хороша компресія, але вона може зберігати лише індексовану палітру. Це означає, що для більшості випадків використання у файлі може бути максимум 256 різних кольорів. Це звучить як зовсім невелика кількість, і це так.
GIF-зображення також можуть бути анімовані та мати прозорість.
Підходить для: Логотипів, лінійних малюнків та інших простих зображень, які мають бути невеликими. Тільки реально використовується для веб-сайтів.
JPEG - втрата / пряма
Зображення JPEG були розроблені для того, щоб зробити детальні фотографічні зображення якомога меншими, видаляючи інформацію, яку людське око не помітить. Як результат, це формат Lossy, а збереження одного і того ж файлу знову і знову призведе до втрати більшої кількості даних з часом. Він має палітру тисяч кольорів і тому чудово підходить для фотографій, але стиснення втрат означає, що це погано для логотипів та лінійних малюнків: вони не тільки виглядатимуть нечітко, але й такі зображення також матимуть більший розмір файлу порівняно з GIF!
Добре для: Фотографії. Також градієнти.
PNG-8 - без втрат / індексується
PNG - це новіший формат, а PNG-8 (індексована версія PNG) - справді хороша заміна GIF. Однак, на жаль, у нього є кілька недоліків: по-перше, він не може підтримувати анімацію, як може GIF (ну, може, але, здається, підтримує її лише Firefox, на відміну від анімації GIF, яку підтримує кожен браузер). По-друге, у нього є деякі проблеми з підтримкою старих браузерів, таких як IE6. По-третє, важливе програмне забезпечення, як Photoshop, має дуже погану реалізацію формату. (Чорт забирає вас, Adobe!) PNG-8 може зберігати лише 256 кольорів, як GIF.
Добре для: Головне, що PNG-8 робить краще, ніж GIF - це підтримка прозорості Alpha.
PNG-24 - Без втрат / Прямий
PNG-24 - це чудовий формат, який поєднує кодування без втрат з прямим кольором (тисячі кольорів, як і JPEG). У цьому плані це дуже схоже на BMP, за винятком того, що PNG насправді стискає зображення, тому в результаті утворюються набагато менші файли. На жаль, файли PNG-24 все ще будуть більшими, ніж JPEG (для фотографій), а GIF / PNG-8 (для логотипів та графіки), тому вам все-таки потрібно врахувати, чи дійсно ви хочете їх використовувати.
Навіть незважаючи на те, що PNG-24 дозволяють тисячам кольорів при стисненні, вони не призначені для заміни зображень JPEG. Фотографія, збережена як PNG-24, ймовірно, буде щонайменше у 5 разів більша, ніж еквівалентне зображення JPEG, з дуже незначним поліпшенням видимої якості. (Звичайно, це може бути бажаним результатом, якщо ви не переймаєтесь розміром файлів і хочете отримати найкраще якісне зображення.)
Як і PNG-8, і PNG-24 підтримує прозорість альфа.
SVG - без втрат / вектор
Філетип, який набирає популярності в даний час, - це SVG, який відрізняється від усіх перерахованих вище тим, що це векторний формат файлу (вище всі растрові ). Це означає, що він фактично складається з ліній і кривих замість пікселів. Коли ви збільшуєте векторне зображення, ви все ще бачите криву або лінію. Коли ви збільшуєте масштаб растрового зображення, ви побачите пікселі.
Наприклад:
Це означає, що SVG ідеально підходить для логотипів та значків, які ви бажаєте зберегти різкість на екранах сітківки або різних розмірів. Це також означає, що невеликий логотип SVG може бути використаний у набагато більшому (більшому) розмірі без погіршення якості зображення - те, що вимагатиме окремого більшого (з погляду розміру файлу) файлу з растровими форматами.
Розміри файлів SVG часто невеликі, навіть якщо вони візуально дуже великі, що чудово. Однак варто пам’ятати, що це залежить від складності використовуваних форм. SVG вимагають більшої обчислювальної потужності, ніж растрові зображення, оскільки математичні обчислення беруть участь у малюванні кривих та ліній. Якщо ваш логотип особливо складний, він може сповільнити комп'ютер користувача і навіть мати дуже великий розмір файлу. Важливо, щоб ви максимально спростили свої векторні форми.
Крім того, SVG-файли записуються у XML, тому їх можна відкривати та редагувати у текстовому редакторі (!). Це означає, що його значеннями можна керувати з льоту. Наприклад, ви можете використовувати JavaScript, щоб змінити колір SVG-значка на веб-сайті, як би ви хотіли якийсь текст (тобто немає потреби в другому зображенні) або навіть анімували їх.
Загалом вони найкращі для простих плоских фігур, таких як логотипи або графіки.
Я сподіваюся, що це допомагає!
JPEG не найлегший для всіх видів зображень (або навіть більшості). Кути та прямі лінії та звичайні «заливки» (блоки суцільного кольору) будуть здаватися розмитими або мати в них артефакти залежно від рівня стиснення. Він є програшним форматом і найкраще працює для фотографій, де не можна чітко побачити артефакти. Прямі лінії (наприклад, на малюнках і коміксах тощо) дуже добре стискаються в PNG, і це без втрат. GIF слід використовувати лише тоді, коли ви хочете, щоб прозорість працювала в IE6 або вам потрібна анімація. GIF підтримує лише 256 кольорову палітру, але також є без втрат.
Тому в основному тут є спосіб визначити формат зображення:
І як зауважено, якщо ви не впевнені в тому, що було б кваліфіковано, спробуйте кожен формат із різними коефіцієнтами стиснення і зважте якість та розмір зображення та виберіть, який саме ви вважаєте найкращим. Я даю лише великі правила.
Зазвичай я йду з PNG, оскільки, здається, має кілька переваг перед GIF. Раніше існували патентні обмеження на GIF, але термін дії їх минув.
GIF-карти підходять для ліній з різкими краями (наприклад, логотипи) з обмеженою кількістю кольорів. Це використовує перевагу стиснення без втрат формату, що надає перевагу рівним ділянкам рівномірного кольору з чітко окресленими краями (на відміну від JPEG, який надає перевагу плавним градієнтам і більш м'яким зображенням).
GIF можна використовувати для невеликих анімацій та фільмів із низькою роздільною здатністю.
Зважаючи на загальне обмеження палітри GIF на 256 кольорів, воно зазвичай не використовується як формат цифрової фотографії. Цифрові фотографи використовують формати файлів зображень, здатні відтворювати більший діапазон кольорів, таких як TIFF, RAW або втрачений JPEG, що більше підходить для стискання фотографій.
Формат PNG є популярною альтернативою зображенням GIF, оскільки він використовує кращі методи стиснення і не має обмеження в 256 кольорів, але PNG не підтримує анімацію. Формати MNG та APNG, отримані з PNG, підтримують анімацію, але широко не використовуються.
JPEG матиме низьку якість навколо гострих країв і т. Д., І з цієї причини він не підходить для більшості веб-графіки. Це чудово на фотографіях.
Порівняно з GIF, PNG пропонує кращу компресію, більшу палітру та більше функцій, включаючи прозорість. І це без втрат.
GIF обмежений 256 кольорами і не підтримує реальної прозорості. Ви повинні використовувати PNG замість GIF, оскільки він забезпечує кращу компресію та функції. PNG чудово підходить для невеликих і простих зображень, таких як логотипи, значки тощо.
JPEG має кращу компресію зі складними зображеннями, такими як фотографії.
Є злом, який можна зробити, щоб використовувати зображення GIF для показу справжнього кольору. Можна підготувати анімацію GIF з 256 кольоровими палітрами з затримкою 0 кадрів і встановити анімацію, щоб вона відображалася лише один раз. Отже, всі кадри могли бути показані одночасно. Наприкінці виводиться справжнє кольорове зображення GIF.
Багато програмного забезпечення здатні створювати такі зображення GIF. Однак розмір вихідного файлу більший, ніж файл PNG. Його потрібно використовувати, якщо це дійсно необхідно.
png має ширшу палітру кольорів, ніж gif і gif є належною, тоді як png не є. gif може робити анімації, що нормально-png не може. png-прозорість підтримується лише браузером приблизно останнім часом, ніж IE6, але для цієї проблеми існує виправлення Javascript. Обидва підтримують прозорість альфа. Загалом, я б сказав, що ви повинні використовувати png для більшості веб-графіки, використовуючи jpeg для фотографій, скріншотів або подібних, оскільки стиснення png не працює надто добре для грудної клітки.
GIF на основі палітри 256 кольорів на зображення (принаймні в його базовому втіленні). PNG може зробити "TrueColour", тобто 16,7 мільйонів кольорів з коробки. PNG без втрат стискається краще, ніж GIF без втрат. GIF може робити "двійкову" прозорість (0% непрозорість або 100% непрозорість). PNG може обробляти альфа-прозорі плівки.
Загалом, якщо вам не потрібно використовувати альфа-прозорі зображення та підтримувати IE6, PNG, мабуть, кращий вибір, коли вам потрібні ідеальні для пікселів зображення для векторних ілюстрацій тощо. JPG є неперевершеним для фотографій.
Станом на 2018 рік у нас є кілька нових форматів, краща підтримка попередніх форматів та кілька хитрому хаку використання відео замість зображень.
Для фотографій
jpg - як і раніше найбільш підтримуваний формат зображення.
webp- Новий формат від Google. Хороший потенціал, хоча підтримка браузера не велика.
Для іконок та графіки
svg- коли можливо. Він добре масштабується на екранах сітківки, можна редагувати в текстових редакторах і настроюється через JS / CSS, якщо він завантажений у DOM.
png- якщо це стосується растрової графіки (тобто при створенні у фотошопі). Підтримує прозорість, яка є дуже важливою у цьому випадку використання.
Для анімації
svg- плюс анімація css для векторної графіки. Всі переваги svg + потужність css анімації.
gif - як і раніше найбільш підтримуваний формат анімованих зображень.
mp4- якщо анімовані зображення насправді короткі відеокліпи. Twitter / Whatsapp перетворює gif-файли в mp4.
apng- пристойну підтримку браузера (тобто немає IE, Edge), але створювати її не так просто, як gifs.
webp- близький до використання mp4. Погана підтримка
Це приємне порівняння різних форматів анімованих зображень.
Нарешті, який би не був формат, обов'язково оптимізуйте його - Є інструменти для кожного формату (наприклад, SVGO, Guetzli, OptiPNG тощо), які можуть зберегти значну пропускну здатність.
Основна відмінність - GIF запатентований і трохи ширше підтримується. PNG - це відкрита специфікація, а прозорість альфа не підтримується в IE6. Підтримка була покращена в IE7, але не повністю виправлена.
Що стосується розмірів файлів, GIF має меншу кольорову палітру за замовчуванням, тому вони, як правило, мають менший розмір файлів на перший погляд. У файлах PNG розміщена велика палітра за замовчуванням, однак ви можете зменшити їх кольорову палітру, щоб, коли ви це зробите, вони мали менший розмір файлу, ніж GIF. Проблема знову в тому, що ця функція не підтримується в Internet Explorer.
Крім того, оскільки PNG можуть підтримувати прозорість альфа, вони є єдиним варіантом, якщо ви хочете змінити прозорість, відмінну від двійкової прозорості.
Якщо ви вибрали JPEG і маєте справу з зображеннями для веб-сайту, ви можете розглянути сприймальний кодер Google Guetzli , який є у вільному доступі. На мій досвід, Guetzli створює менші файли, ніж стандартні бібліотеки кодування JPEG, зберігаючи повну сумісність зі стандартом JPEG (тому ваші зображення матимуть таку ж сумісність, що і звичайні зображення JPEG).
Єдиним недоліком є те, що Гетцлі потребує багато часу для кодування .. але це робиться лише один раз, коли ви підготуєте зображення для веб-сайту, тоді як переваги залишаються назавжди! Для завантаження невеликих зображень потрібно менше часу, тому швидкість вашого веб-сайту збільшуватиметься у щоденному використанні.
GIF має 8-бітну (256 кольорову) палітру, де PNG є 24-бітовою кольоровою палітрою. Отже, PNG може підтримувати більше кольорів і, звичайно, алгоритм підтримує стиснення
Як вказував @aarjithn, що WebP є кодеком для зберігання фотографій.
Це також кодек для зберігання анімації (послідовність анімованих зображень). Станом на 2020 рік, більшість основних браузерів не підтримує його ( таблиця сумісності ). Примітка для WIC плагін доступний.
Він має переваги перед GIF, оскільки він заснований на відеокодеку VP8 і має більш широкий діапазон кольорів, ніж GIF, де GIF обмежується 256 кольорами, він розширює його до 2 24 = 16777216 кольорів, зберігаючи при цьому значну кількість місця.