JPEG vs PNG vs BMP vs GIF vs SVG

40

Chciałbym wiedzieć, który z tych formatów wymaga mniej pamięci dla tej samej jakości obrazu i jakie są główne różnice między tymi formatami.

Narek
źródło
15
Btw, JPG i JPEG odnoszą się do tej samej rzeczy (patrz np. En.wikipedia.org/wiki/JPEG ), więc tytuł można nieco uprościć.
Jonik
1
Nie wiesz, jak moja odpowiedź nie odpowiada na twoje pierwotne pytanie i jak wybrana odpowiedź ...? : - /
Django Reinhardt
4
> który z tych formatów wymaga mniej pamięci Um, zdefiniuj „mniej pamięci”. Czy masz na myśli, że zajmuje mniej miejsca na dysku? (JPEG dla zdjęć, PNG i / lub GIF dla zrzutów ekranu.) Czy masz na myśli, że skompresowany plik zajmuje mniej miejsca w pamięci? (To samo, co miejsce na dysku.) Czy masz na myśli, że zdekodowany obraz zajmuje mniej miejsca w pamięci ( Brak ; wszystkie są zasadniczo takie same, gdy są dekodowane do
formatu

Odpowiedzi:

54

Od Jaka jest różnica między TIFF, GIF, JPG, JPEG, PNG i plikiem BMP?

BMP - Mapa bitowa. Był to prawdopodobnie pierwszy rodzaj formatu obrazu cyfrowego, który pamiętam. Każde zdjęcie na komputerze wydawało się być BMP. W systemie Windows XP program Paint automatycznie zapisuje obrazy w BMP. Jednak w systemie Windows Vista i nowszych obrazy są teraz zapisywane w formacie JPEG. BMP jest platformą bazową dla wielu innych typów plików.

JPG / JPEG - (Joint Photographic Experts Group) Format JPEG jest używany do fotografii kolorowych lub wszelkich zdjęć z wieloma mieszankami lub gradientami. Nie jest dobry z ostrymi krawędziami i ma tendencję do ich rozmycia, chyba że jest przechowywany w wysokiej jakości. Ten format stał się popularny wraz z wynalezieniem aparatu cyfrowego. Większość, jeśli nie wszystkie, aparaty cyfrowe pobierają zdjęcia na komputer w postaci pliku JPEG. Oczywiście producenci aparatów cyfrowych widzą wartość w wysokiej jakości obrazach, które ostatecznie zajmują mniej miejsca.

GIF - Format wymiany grafiki najlepiej nadaje się do tekstu, rysunków, zrzutów ekranu, kreskówek i animacji. Gif jest ograniczony do łącznej liczby 256 kolorów lub mniej, więc obrazy Gif są stosunkowo małe. Jest powszechnie używany do szybkiego ładowania stron internetowych. To także świetny baner lub logo dla Twojej strony internetowej. Obrazy animowane można również zapisywać w formacie GIF jako sekwencję obrazów statycznych. Na przykład migający baner zostałby zapisany jako plik Gif.

PNG - (Portable Networks Graphic) Ten bezstratny format jest jednym z najlepszych formatów obrazów. Nie zawsze był kompatybilny ze wszystkimi przeglądarkami internetowymi lub oprogramowaniem graficznym, ale obecnie jest to najlepszy format obrazu do użycia na stronie internetowej. Używam .png do logo i zrzutów ekranu. Jedną z jego najbardziej zadziwiających zdolności jest możliwość bezstratnej kompresji obrazów (bez utraty pikseli), chociaż ostateczny rozmiar skompresowanego obrazu różni się w zależności od edytora obrazu.

TIFF - (Tagged Image File Format) Ten format pliku nie był aktualizowany od 1992 roku i jest obecnie własnością Adobe. Może przechowywać obraz i dane (tagi) w jednym pliku. TIFF można skompresować, ale raczej jego zdolność do przechowywania danych obrazu w formacie bezstratnym sprawia, że ​​plik TIFF jest użytecznym archiwum obrazów, ponieważ w przeciwieństwie do standardowych plików JPEG, plik TIFF z bezstratną kompresją (lub brak) może być edytowany i ponownie - zapisane bez utraty jakości obrazu. Ten plik jest powszechnie używany do skanowania, faksowania, przetwarzania tekstu i tak dalej. Nie jest już popularnym formatem plików do zdjęć cyfrowych, ponieważ JPEG jest świetnej jakości i zajmuje mniej miejsca.

harrymc
źródło
1
Należy pamiętać, że bez pewnego rodzaju „hackowania” IE6 nadal nie obsługuje przezroczystości alfa w plikach PNG, tj.
Częściowo
2
... a zaskakująca ilość osób nadal korzysta z IE6 ( tinyurl.com/56kp ). I MS chce wspierać to do 2014 roku! :( ( tinyurl.com/qvdyn5 )
Josh Comley
9
BMP: To nie jest podstawa dla innych formatów plików. O ile wiem nagłówek BMP i struktura plików nie są udostępniane innym formatom (na przykład w przeciwieństwie do TIFF). JPEG: Został stworzony i istniał w Internecie, zanim aparaty cyfrowe stały się powszechne. Również wiele aparatów cyfrowych pozwala na zapisanie „surowego” formatu, który zwykle jest formatem TIFF, aczkolwiek z zawartością specyficzną dla dostawcy. GIF: Nie ogranicza się do 256 kolorów na obraz, tylko do 256 kolorów na ramkę (patrz en.wikipedia.org/wiki/Graphics_Interchange_Format#True_color ).
Joey,
4
TIFF: rozpowszechniony format plików i kontenerów dla nieprzetworzonych zdjęć z aparatów cyfrowych (aparatów innych niż wyceluj i zrób zdjęcie). TIFF pozwala na umieszczenie w nim prawie dowolnych danych (stąd oznaczonych ), co oznacza również, że obsługuje dowolne metody kompresji od LZW (GIF), LZ77 (PNG) do JPEG i innych. Również TIFF pozwala na wiele obrazów (stron) w jednym pliku.
Joey,
4
Chociaż odpowiedź jest dobra w odpowiedzi na różnicę formatów obrazu pod względem historii i ogólnego zastosowania, w pierwotnej odpowiedzi zapytano również o względne rozmiary i jakość ...
camster342
76

W stylu xkcd z lbrandy.com :

alternatywny tekst

Robert MacLean
źródło
4
Ładnie ilustruje to zagadnienie :) (nawet jeśli nigdy nie widziałem, aby ktokolwiek popierałby taką politykę „Zawsze JPEG!”)
Jonik
7
+1 Ponieważ to zdjęcie tak dobrze ilustruje problem jpeg ...
Johan
5
Chciałbym móc podwoić głos! Wysyłam to każdemu, kto wysyła mi kiepskie pliki JPEG!
Tim Büthe
3
© 2008 Louis Brandy. Wszelkie prawa zastrzeżone....?
Arjan
3
Facebook ma na przykład tę zasadę „Zawsze JPEG”. Przesyłam ładny bezstratny obraz PNG o wielkości 99 KB, a Facebook konwertuje go do brzydkiego pliku JPEG o wielkości 175 KB.
Paul
63

Powinieneś być świadomy kilku kluczowych czynników ...

Po pierwsze, istnieją dwa rodzaje kompresji: bezstratna i stratna .

  • Bezstratny oznacza, że ​​obraz jest zmniejszony, ale bez uszczerbku dla jakości.
  • Utrata oznacza, że ​​obraz jest (nawet) zmniejszony, ale ze szkodą dla jakości. Jeśli wielokrotnie zapisujesz obraz w formacie stratnym, jakość obrazu będzie się stopniowo pogarszać.

Istnieją również różne głębokości kolorów (palety): Kolor indeksowany i Kolor bezpośredni .

  • Indeksowany oznacza, że ​​obraz może przechowywać tylko ograniczoną liczbę kolorów (zwykle 256), kontrolowanych przez autora, w czymś, co nazywa się mapą kolorów
  • Bezpośrednie oznacza, że ​​możesz przechowywać wiele tysięcy kolorów, które nie zostały bezpośrednio wybrane przez autora

BMP - bezstratny / indeksowany i bezpośredni

To jest stary format. Jest bezstratny (żadne dane obrazu nie są tracone przy zapisywaniu), ale kompresja jest też niewielka lub wcale, co oznacza zapisywanie, ponieważ BMP powoduje BARDZO duże rozmiary plików. Może mieć palety indeksowane i bezpośrednie, ale to niewielka pociecha. Rozmiary plików są tak niepotrzebnie duże, że nikt tak naprawdę nigdy nie używa tego formatu.

Dobre dla: Naprawdę nic. Nie ma w czym BMP wyróżnia się, ani nie jest lepiej wykonywany przez inne formaty.

BMP vs GIF


GIF - tylko bezstratny / indeksowany

GIF używa bezstratnej kompresji, co oznacza, że ​​możesz zapisywać obraz w kółko i nigdy nie stracić żadnych danych. Rozmiary plików są znacznie mniejsze niż BMP, ponieważ faktycznie używana jest dobra kompresja, ale może ona przechowywać tylko paletę indeksowaną. Oznacza to, że w większości przypadków w pliku może być maksymalnie 256 różnych kolorów. To brzmi jak niewielka ilość i tak jest.

Obrazy GIF mogą być również animowane i mają przezroczystość.

Dobre dla: logo, rysunków i innych prostych obrazów, które muszą być małe. Naprawdę używany tylko na stronach internetowych.

GIF a JPEG


JPEG - Lossy / Direct

Obrazy JPEG zostały zaprojektowane w taki sposób, aby szczegółowe obrazy fotograficzne były jak najmniejsze, usuwając informacje, których ludzkie oko nie zauważy. W rezultacie jest to format stratny, a zapisywanie tego samego pliku raz za razem spowoduje utratę większej ilości danych w miarę upływu czasu. Ma paletę tysięcy kolorów, a więc świetnie nadaje się do zdjęć, ale kompresja stratna oznacza, że ​​jest szkodliwa dla logo i rysunków: nie tylko będą wyglądały na rozmyte, ale będą miały większy rozmiar pliku w porównaniu do GIF-ów!

Dobry dla: zdjęć. Również gradienty.

JPEG vs GIF


PNG-8 - Bezstratny / indeksowany

PNG to nowszy format, a PNG-8 (indeksowana wersja PNG) jest naprawdę dobrym zamiennikiem plików GIF. Niestety ma on jednak kilka wad: po pierwsze, nie może obsługiwać animacji takiej jak GIF (może, ale wydaje się, że obsługuje go tylko Firefox, w przeciwieństwie do animacji GIF obsługiwanej przez każdą przeglądarkę). Po drugie, ma pewne problemy z obsługą starszych przeglądarek, takich jak IE6. Po trzecie, ważne oprogramowanie, takie jak Photoshop, ma bardzo słabą implementację tego formatu. (Cholera, Adobe!) PNG-8 może przechowywać tylko 256 kolorów, takich jak GIF-y.

Dobre dla: Najważniejszą rzeczą, którą PNG-8 robi lepiej niż GIF-y, jest obsługa przezroczystości alfa.

PNG-8 kontra GIF

Ważna uwaga: Photoshop nie obsługuje przezroczystości alfa dla plików PNG-8. (Cholera, Photoshop!) Istnieją jednak sposoby konwersji Photoshop PNG-24 na pliki PNG-8 przy zachowaniu ich przezroczystości. Jedną z metod jest PNGQuant , drugą jest zapisywanie plików za pomocą Fireworks .


PNG-24 - Bezstratny / Bezpośredni

PNG-24 to świetny format, który łączy bezstratne kodowanie z bezpośrednim kolorem (tysiące kolorów, podobnie jak JPEG). Pod tym względem jest bardzo podobny do BMP, z tym wyjątkiem, że PNG faktycznie kompresuje obrazy, dzięki czemu powstają znacznie mniejsze pliki. Niestety pliki PNG-24 nadal będą znacznie większe niż JPEG, GIF i PNG-8, więc nadal musisz się zastanowić, czy naprawdę chcesz z nich skorzystać.

Mimo że PNG-24 pozwalają na kompresję tysięcy kolorów, nie są przeznaczone do zastępowania obrazów JPEG. Zdjęcie zapisane jako PNG-24 będzie prawdopodobnie co najmniej 5 razy większe niż równoważne zdjęcie JPEG, przy bardzo niewielkiej poprawie widocznej jakości. (Oczywiście może to być pożądany wynik, jeśli nie martwisz się rozmiarem plików i chcesz uzyskać obraz o najlepszej jakości).

Podobnie jak PNG-8, PNG-24 obsługuje również przezroczystość alfa.


SVG - bezstratny / wektorowy

Typ pliku, który obecnie zyskuje na popularności, to SVG, który różni się od wszystkich powyższych tym, że jest to format pliku wektorowego (powyższe są wszystkie rastrowe ). Oznacza to, że faktycznie składa się z linii i krzywych zamiast pikseli. Po powiększeniu obrazu wektorowego nadal widać krzywą lub linię. Po powiększeniu obrazu rastrowego zobaczysz piksele.

Na przykład:

PNG vs SVG

SVG vs PNG

Oznacza to, że SVG jest idealny do logo i ikon, które chcesz zachować ostrość na ekranach Retina lub w różnych rozmiarach.

Ponadto pliki SVG są zapisywane przy użyciu XML, więc można je otwierać i edytować w edytorze tekstów, aby można było nimi manipulować w locie, jeśli chcesz. Na przykład, możesz użyć JavaScript, aby zmienić kolor ikony SVG na stronie internetowej podobnie jak w przypadku tekstu (tj. Nie potrzebujesz drugiego obrazu).

Mam nadzieję że to pomogło!

Django Reinhardt
źródło
Dobra ilustracja Uważaj na artefakty spowodowane kompresją. Wydaje mi się, że formaty kompresji wideo podobne do JPEG mają problem polegający na tym, że strefy ciągłe czerwone będą „krwawić” na krawędziach.
James P.
1
Mylisz się, że PNG nie obsługuje animacji. PNG potrafi to zrobić dobrze, większość przeglądarek i przeglądarek go nie obsługuje. pl.wikipedia.org/wiki/APNG Firefox obsługuje go całkiem nieźle. people.mozilla.com/~dolske/apng/demo.html
Rob
1
@DjangoReinhardt Wiem, że podałeś przykład w swojej odpowiedzi, ale jeśli chodzi o SVG vs PNG, w jakich okolicznościach możemy zobaczyć większy SVG (w rozmiarze pliku) niż PNG?
Hanna
1
@Johannes Świetne pytanie. Istnieją pewne wady SVG, szczególnie jeśli są szczególnie skomplikowane (lub źle zapisane - ale to wina autora, a nie formatu pliku). Spróbuję dodać coś, co na to odpowie - chociaż podejrzewam, że SVG zawsze będzie mniejszy (lub równy rozmiar) do PNG.
Django Reinhardt
1
Kolejny fajny fakt: pliki BMP mają rozmiar podobny do PNG, jeśli je spakujesz.
jiggunjer
28

Istniejące odpowiedzi zawierają bardzo mało danych technicznych, dlatego dołączę to tutaj.

  • JPEG : do 24-bitowych kolorów (być może więcej?), Zmienna (zwykle wysoka) kompresja, stratna, brak obsługi alfa
  • PNG : do 48-bitowych kolorów, umiarkowana kompresja, bezstratna, obsługa alfa
  • BMP : kolor do 24 bitów, bardzo mała kompresja, bezstratna, obsługa alfa
  • GIF : kolor do 8 bitów, mała kompresja, bezstratna, obsługa przezroczystości, obsługa animacji

Głębia koloru

  • 8-bitowy kolor == 256 kolorów
  • Kolor 24-bitowy == 16,777,216 kolorów
  • 48-bitowy kolor == 281,474,976,710,656 kolorów

Większość monitorów komputerowych działa z 24-bitową głębią kolorów. Ludzkie oko potrafi odróżnić tyle kolorów. Dodatkowa głębia kolorów ma głównie na celu zachowanie informacji z czujnika, dzięki czemu manipulacja zdjęciem ma więcej danych do pracy. Próba przedstawienia zdjęcia w 8-bitowym kolorze spowoduje ziarnistość.

Kompresja

Odnosi się to w zasadzie do wielkości końcowego pliku. Większa kompresja oznacza mniejszy plik. Jednak JPEG osiąga małe rozmiary plików, wyrzucając dane. Jest to określane jako kompresja „stratna”, ponieważ nigdy nie można odzyskać oryginalnych nieskompresowanych danych. Kompresja jest również zoptymalizowana do zdjęć, na których krawędzie o wysokim kontraście są rzadkie. Jak stwierdzono w innych odpowiedziach, jest to zły wybór dla czegokolwiek innego niż zdjęcia.

Alfa / Przezroczystość

Alfa odnosi się do przezroczystości, ale sugeruje, że istnieje więcej niż jeden poziom przejrzystości. GIF ma zdolność definiowania przezroczystych pikseli, ale jest albo nieprzezroczysty, albo w 100% przezroczysty, a „przezroczysty” jest wykorzystywany jako jeden z 256 kolorów. PNG i BMP mogą oznaczać każdy piksel jako nieprzezroczysty, przezroczysty lub częściowo przezroczysty, jak kawałek kolorowego szkła. Najczęściej istnieje 256 poziomów przezroczystości, chociaż PNG może mieć nawet 65 536 poziomów. JPEG nie obsługuje przezroczystości.

Animacja

W rzeczywistości spośród tych formatów tylko GIF ma wsparcie dla animacji. Istnieją specyfikacje animacji w formatach PNG (MNG, APNG) i JPEG (MJPEG), ale nie są one powszechnie obsługiwane. (APNG działa w najnowszych wersjach Firefox i Opera.) W praktyce większość animacji wyświetlanych na stronach internetowych jest zaimplementowana we Flashu.

wfaulk
źródło
APNG zyskuje duże poparcie.
Phoshi,
Jasne. Nie zauważyłem.
wfaulk
Cóż, większość współczesnych przeglądarek obsługuje to, ale jest mało znana. IE8 nie obsługuje tego, nie sądzę (ale mogę go odczytać jako PNG, więc wyświetla pierwszą klatkę)
Phoshi 10.10.2009
Świetne przetwarzanie myśli ..
InfantPro'Aravind '
25
  • Użyj GIF, jeśli obraz ma kilka kolorów (jak ikony). Może być również stosowany do animowanych obrazów (takich jak banery reklamowe).
  • Użyj JPG, jeśli obraz ma wiele kolorów (np. Zdjęcia). JPEG jest tym samym.
  • Użyj BMP, jeśli chcesz zapisać obraz bez kompresji. Znacznie większy rozmiar pliku!
  • Użyj PNG, jeśli chcesz opublikować obraz w Internecie i być na bieżąco z nowoczesnymi standardami. Zalety: Odpowiedni jako nowoczesny zamiennik zarówno dla GIF, jak i JPG, i jest otwartym standardem i pozwala na przezroczystość. Minusy: nieobsługiwane przez starsze oprogramowanie, a rozmiar pliku może być większy niż porównywalny plik GIF lub JPG.
Torben Gundtofte-Bruun
źródło
3
+1 za praktyczne rozważenia, kiedy użyć każdego z nich.
Andrew Coleson,
4
Uważaj na używanie plików PNG. Jako format bezstratny, na ogół nie nadają się do zdjęć i tym podobnych, ze względu na rozmiar pliku. Zdecydowanie nie jest to „nowoczesny zamiennik” do wszystkich celów. Transkodowanie z JPG na PNG byłoby naprawdę głupie.
Paul McMillan,
@Paul - Zgadzam się, z pewnością nie jest użyteczny do wszystkich celów, w szczególności nie do zdjęć, ale w przypadku grafiki internetowej zastępuje JPG.
Torben Gundtofte-Bruun 10.10.2009
2
Nie sądzę, aby kiedykolwiek istniała potrzeba BPM.
Arjan
1
PNG jest prawie zawsze mniejszy niż GIF. Ma doskonały schemat kompresji. Gdy jest większy niż GIF o takim samym wyglądzie, zwykle jest to wina kiepskiego oprogramowania (np. Photoshop przed CS2). Użyj palety (nie 24-bitowej!) PNG i napraw je za pomocą optymalizatora PNG: imageoptim.pornel.net, a już nigdy nie będziesz chciał tracić przepustowości na pliki GIF.
Kornel,
13

wprowadź opis zdjęcia tutaj


BMP:

  • Stary format Bez utraty danych.
  • Bez kompresji - przechowuje wartość każdego piksela. Dlatego zdjęcia o tych samych wymiarach mają taki sam rozmiar pliku (kilobajty / megabajty). Np. Obrazy 800 × 600 BMP są zawsze 1,37 MiB, podobnie jak popularne tapety „Bliss” WinXP.
  • Przejrzystość / półprzezroczystość nie jest obsługiwana
  • Nie polecam do niczego

JPG:

  • Kompresja stratna.
  • Kwotę straty można ustawić np. Podczas tworzenia grafiki i zapisywania w Photoshopie.
  • Zapisywanie w wyższej jakości oznacza mniejszą utratę kolorów / głębi i większy rozmiar pliku i odwrotnie.
  • Przejrzystość / półprzezroczystość nie jest obsługiwana
  • Zalecany do zdjęć, a nie do grafiki / ikon

PNG:

  • Bezstratna kompresja (tak, najlepsze z obu SŁÓW / światów)
  • Obsługuje przezroczystość ORAZ półprzezroczystość, oba są różne
  • Zalecane do grafiki statycznej / ikon, a nie do zdjęć

GIF:

  • Obsługuje przezroczystość, ale nie półprzezroczystość
  • Zalecane tylko dla grafiki / ikon ANIMOWANYCH
  • Może ruchome zdjęcia w ramkach w Harrym Potterze to GIF-y: D
Shumon Saha
źródło
1
Niezły przegląd. Ale dlaczego BMP jest oznaczony w tabeli jako „bezstratny: fałszywy”? W tekście prawidłowo podajesz IMHO, że BMP jest rzeczywiście bezstratny .
mpy
2
Wiem, że to stary wątek i dziękuję za odpowiedź, ale zauważ, że BMP jest opcjonalnie kompresowany za pomocą bardzo uproszczonej, bezstratnej kompresji RLE.
ysap,
Jakikolwiek inny powód, dla którego PNG NIE jest zalecany do zdjęć, oprócz większego rozmiaru pliku w porównaniu do JPEG? Najpierw zeskanowałem moje stare zdjęcia w formacie JPEG, a następnie ponownie zeskanowałem je w formacie PNG po tym, jak zorientowałem się, że skanuję zdjęcie, które zostanie zapisane w stratnym formacie.
JAT86
4

BMP używa albo surowych bitów z małym nagłówkiem, albo kodowania run-length . JPEG wykorzystuje dyskretną transformację kosinusową . Zobacz blok na dole artykułów Wikipedii, aby zapoznać się z innymi algorytmami kompresji / kodowania.

Ignacio Vazquez-Abrams
źródło
Ja lubię PCX. Dawno temu, kiedy zdecydowałem się nauczyć asemblera, dla mojego pierwszego programu napisałem przeglądarkę PCX. To było dość edukacyjne. (I nie nie napisać przeglądarkę JPG). :-D
Synetech,
3

Prosty przewodnik:

  • Do zdjęć użyj:
    • Surowe formaty specyficzne dla kamery, jeśli masz profesjonalny sprzęt i chcesz dużo post-processingu
    • W przeciwnym razie JPEG (do publikowania zdjęć w Internecie musisz również przekonwertować nieprzetworzone formaty na JPEG)
  • Do czegokolwiek z ostrymi krawędziami, cienkimi liniami i kilkoma kolorami (np. Zrzuty ekranu lub logo) użyj:
    • GIF, jeśli robisz stronę internetową, która musi obsługiwać bardzo stare przeglądarki (głównie IE 6), lub jeśli chcesz wykonywać proste animacje
    • PNG inaczej
  • Nie ma dobrego powodu, aby używać BMP, chyba że określony program nie akceptuje innych formatów.
Michael Borgwardt
źródło
1
IE obsługuje PNG od wersji 4.x (5 na Mac), ale po prostu nieprzezroczysty PNG.
Arjan
1
IE6 faktycznie obsługuje nawet przezroczysty PNG, jeśli ma przezroczystość podobną do GIF-a. Tylko pliki PNG z pełną wersją alfa nie są obsługiwane.
Kornel,
1
W rzeczywistości obsługiwana jest przezroczystość alfa, pod warunkiem, że jest to 8-bitowy plik PNG. Dziwne, ale prawdziwe.
Django Reinhardt,