JPEG vs PNG vs BMP vs GIF vs SVG

Мені хотілося б знати, який із цих форматів вимагає менше пам’яті для однакової якості зображення та які основні відмінності між цими форматами.

Від чого різниця між TIFF, GIF, JPG, JPEG, PNG та BMP-файлом?

BMP - Bitmap. Це був, мабуть, перший тип формату цифрового зображення, який я пам'ятаю. Кожна картинка на комп’ютері здавалася, що ті дні були BMP. У Windows XP програма Paint автоматично зберігає свої зображення у форматі BMP. Однак у Windows Vista та пізніших зображеннях тепер зберігається JPEG. BMP є базовою платформою для багатьох інших типів файлів.

JPG / JPEG - (Об'єднана група фотографічних експертів) Формат Jpeg використовується для кольорових фотографій або будь-яких зображень з безліччю сумішей або градієнтів. Це не добре з гострими краями і, як правило, трохи розмиває їх, якщо не зберігається у високій якості. Цей формат став популярним у винаході цифрової камери. Більшість, якщо не всі, цифрові камери завантажують фотографії на комп'ютер у вигляді файлу Jpeg. Очевидно, що виробники цифрових камер бачать цінність у високоякісних зображеннях, які в кінцевому рахунку займають менше місця.

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

PNG - (Графіка портативних мереж) Цей формат без втрат є одним з найкращих форматів зображень. Він не завжди був сумісний з усіма веб-браузерами або програмним забезпеченням для зображень, але на сьогоднішній день це найкращий формат зображення для використання на веб-сайті. Я використовую .png для логотипів і скріншотів. Однією з найдивовижніших здібностей є здатність стискати зображення без втрат (без втрати пікселів), хоча остаточний стислий розмір залежить від редакторів зображень.

TIFF - (Формат файлу з тегами зображень) Цей формат файлу не оновлювався з 1992 року і зараз належить Adobe. Він може зберігати зображення та дані (теги) в одному файлі. TIFF можна стискати, але це, швидше, його здатність зберігати дані зображення у форматі без втрат, що робить файл TIFF корисним архівом зображень, оскільки на відміну від стандартних JPEG-файлів, TIFF-файл, що використовує стиснення без втрат (або жоден), можна редагувати і повторно -збережено без втрати якості зображення. Цей файл зазвичай використовується для сканування, факсу, обробки текстів тощо. Це вже не звичайний формат файлів для використання з цифровими фотографіями, оскільки jpeg відрізняється високою якістю і займає менше місця.

У xkcd стилі від lbrandy.com :

Ви повинні знати про кілька ключових факторів ...

По-перше, існує два типи стиснення: без втрат та втрати .

• Без втрат означає, що зображення робиться меншим, але без шкоди для якості.
• Втрата означає, що зображення робиться (навіть) меншим, але на шкоду якості. Якщо ви зберігали зображення у форматі Lossy знову і знову, якість зображення буде прогресивно погіршуватися та погіршуватися.

Існують також різні глибини кольору (палітри): індексований колір та прямий колір .

• Індексований означає, що зображення може зберігати лише обмежену кількість кольорів (як правило, 256), контрольованих автором, у тому, що називається Кольорова карта
• Прямий означає, що ви можете зберігати багато тисяч кольорів, які автор безпосередньо не обрав

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.

Важлива примітка: Photoshop не підтримує прозорість Alpha для файлів PNG-8. (Чорт забирає вас, Photoshop!) Існують способи перетворення файлів Photoshop PNG-24 в PNG-8, зберігаючи їх прозорість. Один з методів - PNGQuant , інший - збереження файлів за допомогою феєрверків .

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-файли записуються за допомогою XML, і тому їх можна відкривати та редагувати в текстовому редакторі, щоб ним можна було керувати на ходу, якщо хочете. Наприклад, ви можете використовувати JavaScript, щоб змінити колір SVG-значка на веб-сайті так, як ви хотіли б тексту (тобто немає потреби в другому зображенні).

Я сподіваюся, що це допомагає!

Існуючі відповіді містять дуже мало технічних даних, тому я включу їх тут.

• JPEG : до 24-бітового кольору (можливо більше?), Змінної (зазвичай високої) стиснення, втрати, відсутня підтримка альфа
• PNG : до 48-бітного кольору, помірне стиснення, без втрат, підтримка альфа
• BMP : до 24-бітного кольору, дуже мало стиснення, без втрат, підтримка альфа
• GIF : до 8-бітного кольору, невелика компресія, без втрат, підтримка прозорості, підтримка анімації

Колірна глибина

• 8-бітний колір == 256 кольорів
• 24-бітний колір == 16 777 216 кольорів
• 48-бітний колір == 281,474,976,710,656 кольорів

Більшість моніторів комп’ютера працюють на 24-бітній глибині кольорів. Людське око може розрізнити приблизно стільки кольорів. Додаткова глибина кольору - це здебільшого можливість зберігати інформацію від датчика, щоб маніпулювати фотографією було більше даних для роботи. Спроба зобразити фотографію у 8-бітовому кольорі призведе до зернистості.

Стиснення

Це в основному стосується того, наскільки великим буде кінцевий файл. Більше стиснення дорівнює меншому файлу. Однак JPEG досягає невеликих розмірів файлів, викидаючи дані. Це називається "втратою" стиснення, тому що ви ніколи не можете повернути оригінальні нестиснені дані. Його стиснення також оптимізоване для фотографій, де високі контрастні краї рідкі. Як зазначено в інших відповідях, це поганий вибір для будь-якого, крім фотографій.

Альфа / прозорість

Альфа посилається на прозорість, але це означає, що прозорості є більше, ніж один. GIF має можливість визначати прозорі пікселі, але він або непрозорий, або 100% прозорий, а "прозорий" використовується як один із 256 кольорів. PNG та BMP мають можливість позначати кожен піксель непрозорим, прозорим або частково прозорим, як шматок кольорового скла. Найчастіше існує 256 рівнів прозорості, хоча PNG насправді може мати до 65 536 рівнів. JPEG не підтримує прозорість.

Анімація

Фактично з цих форматів лише GIF має будь-яку підтримку анімації. Існують специфікації для анімації з PNG (MNG, APNG) та JPEG (MJPEG), але вони широко не підтримуються. (APNG працює в останніх версіях Firefox і Opera.) На практиці більшість анімацій, які ви бачите на веб-сторінках, реалізовані у Flash.

• Використовуйте GIF, якщо зображення має кілька кольорів (як іконки). Також можна використовувати для анімаційних зображень (наприклад, банери оголошень).
• Використовуйте JPG, якщо зображення має багато кольорів (наприклад, фотографії). JPEG - це те саме.
• Використовуйте BMP, якщо хочете зберегти зображення без стиснення. Набагато більший розмір файлів!
• Використовуйте PNG, якщо ви хочете опублікувати зображення в Інтернеті та бути в курсі сучасних стандартів. Плюси: підходить як сучасна заміна як для GIF, так і для JPG, і є відкритим стандартом і забезпечує прозорість. Мінуси: Не підтримується старішим програмним забезпеченням, а розмір файлу може бути більшим порівняно з GIF або JPG.

BMP:

• Старий формат. Немає втрати даних.
• Не стискається - Зберігає значення кожного пікселя. Отже, зображення однакових розмірів мають однаковий розмір файлів (кілобайт / мегабайт). Наприклад, 800 × 600 BMP-зображень завжди мають 1,37 Мб, як популярні шпалери WinXP "Bliss".
• Прозорість / прозорість не підтримується
• Не рекомендується ні для чого

JPG:

• Стиснення втрат.
• Суму збитків можна встановити, наприклад, створюючи графіку та зберігати у Photoshop.
• Збереження як більш високої якості означає менше втрати кольорів / глибини та високого розміру файлів, і навпаки.
• Прозорість / прозорість не підтримується
• Рекомендується для фотографій, а не для графіки / піктограм

PNG:

• Стиснення без втрат (так, найкраще з обох СЛОВ / світу)
• Підтримує прозорість та прозорість, і те, і інше
• Рекомендується для статичної графіки / піктограм, а не для фотографій

GIF:

• Підтримує прозорість, але не прозорість
• Рекомендовано лише для анімованої графіки / піктограм
• Можливо, рухомі фотографії у кадрах у Гаррі Поттера - це GIF: D

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

Просте керівництво:

• Для фотографій використовуйте:
  • Спеціальні формати для камери, якщо ви маєте професійне обладнання та хочете зробити багато післяобробки
  • JPEG в іншому випадку (для публікації фотографій в Інтернеті вам доведеться також конвертувати необроблені формати в JPEG)
• Для чого-небудь із гострими краями, тонкими лініями та кількома кольорами (наприклад, скріншоти чи логотипи) використовуйте:
  • GIF, якщо ви робите веб-сторінку, яка має підтримувати дуже старі веб-переглядачі (в основному IE 6) або якщо ви хочете робити просту анімацію
  • PNG інакше
• Немає вагомих причин використовувати BMP, якщо тільки конкретна програма не приймає інші формати.