Jakie są różne przypadki użycia PNG vs. GIF vs. JPEG vs. SVG?

Kiedy należy tworzyć określone typy plików obrazów podczas tworzenia stron internetowych lub interfejsów itp.?

Jakie są ich mocne i słabe strony?

Wiem, że PNG i GIF są bezstratne, podczas gdy JPEG jest stratne.
Ale jaka jest główna różnica między PNG a GIF?
Dlaczego powinienem preferować jeden od drugiego? Co to jest SVG i kiedy powinienem go używać?

Jeśli nie zależy ci na każdym pikselu, powinieneś zawsze używać JPEG, ponieważ jest to „najlżejszy”?

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) mniejszy, 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ś zwanym 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.

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 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.

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 w kółko 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 zła dla logo i rysunków: Nie tylko będą wyglądały na rozmyte, ale takie obrazy będą miały większy rozmiar pliku w porównaniu do GIF-ów!

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

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.

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

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 będą nadal większe niż JPEG (dla zdjęć) i GIF / PNG-8 (dla logo i grafiki), 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 plików wektorowych (wszystkie powyższe są 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:

Oznacza to, że SVG jest idealny do logo i ikon, które chcesz zachować ostrość na ekranach Retina lub w różnych rozmiarach. Oznacza to również, że małe logo SVG może być używane w znacznie większym (większym) rozmiarze bez pogorszenia jakości obrazu - coś, co wymagałoby osobnego większego (pod względem wielkości pliku) pliku z formatami rastrowymi.

Rozmiary plików SVG są często małe, nawet jeśli są bardzo duże wizualnie, co jest świetne. Warto jednak pamiętać, że zależy to od złożoności użytych kształtów. Pliki SVG wymagają większej mocy obliczeniowej niż obrazy rastrowe, ponieważ obliczenia matematyczne biorą udział w rysowaniu krzywych i linii. Jeśli Twoje logo jest szczególnie skomplikowane, może spowolnić komputer użytkownika, a nawet mieć bardzo duży rozmiar pliku. Ważne jest, aby maksymalnie uprościć kształty wektorowe.

Ponadto pliki SVG są zapisywane w formacie XML, więc można je otwierać i edytować w edytorze tekstu (!). Oznacza to, że jego wartościami można manipulować w locie. Na przykład możesz użyć JavaScriptu, aby zmienić kolor ikony SVG na stronie internetowej, podobnie jak trochę tekstu (tj. Nie potrzebujesz drugiego obrazu), a nawet ożywić go.

Ogólnie rzecz biorąc, najlepiej nadają się do prostych płaskich kształtów, takich jak logo lub wykresy.

Mam nadzieję że to pomogło!

JPEG nie jest najlżejszy dla wszystkich rodzajów obrazów (a nawet większości). Narożniki i linie proste oraz zwykłe „wypełnienia” (bloki jednolitego koloru) będą zamazane lub będą zawierały artefakty w zależności od poziomu kompresji. Jest to format stratny i najlepiej sprawdza się w przypadku zdjęć, na których artefakty nie są wyraźnie widoczne. Proste linie (takie jak na rysunkach i komiksach) kompresują się bardzo dobrze w PNG i są bezstratne. GIF powinien być używany tylko wtedy, gdy chcesz, aby przezroczystość działała w IE6 lub gdy chcesz animacji. GIF obsługuje tylko paletę 256 kolorów, ale jest również bezstratny.

Więc w zasadzie tutaj jest sposób na określenie formatu obrazu:

• GIF, jeśli wymaga animacji lub przezroczystości, która działa na IE6 (uwaga, przezroczystość PNG działa po IE6)
• JPEG, jeśli zdjęcie jest fotografią.
• PNG, jeśli proste linie jak na komiksie lub innym rysunku lub jeśli potrzebny jest szeroki zakres kolorów z przezroczystością (a IE6 nie jest czynnikiem)

I jak skomentowano, jeśli nie masz pewności, co się kwalifikuje, wypróbuj każdy format z różnymi współczynnikami kompresji i zważ jakość i rozmiar obrazu i wybierz, który według Ciebie jest najlepszy. Podaję tylko podstawowe zasady.

Zwykle używam PNG, ponieważ wydaje się, że ma kilka zalet w stosunku do GIF. Kiedyś były ograniczenia patentowe na GIF, ale wygasły.

Pliki GIF są odpowiednie do grafiki liniowej o ostrych krawędziach (np. Logo) o ograniczonej liczbie kolorów. Wykorzystuje to bezstratną kompresję formatu, która faworyzuje płaskie obszary o jednolitym kolorze z dobrze zdefiniowanymi krawędziami (w przeciwieństwie do JPEG, który preferuje płynne gradienty i bardziej miękkie obrazy).

Pliki GIF mogą być używane do małych animacji i klipów filmowych w niskiej rozdzielczości.

Ze względu na ogólne ograniczenie palety obrazów GIF do 256 kolorów, zwykle nie jest on używany jako format fotografii cyfrowej. Cyfrowi fotograficy używają formatów plików graficznych zdolnych do odtwarzania szerszej gamy kolorów, takich jak TIFF, RAW lub stratny JPEG, który jest bardziej odpowiedni do kompresji zdjęć.

Format PNG jest popularną alternatywą dla obrazów GIF, ponieważ wykorzystuje lepsze techniki kompresji i nie ma limitu 256 kolorów, ale PNG nie obsługują animacji. Formaty MNG i APNG, oba pochodzące z PNG, obsługują animacje, ale nie są powszechnie używane.

JPEG będzie niskiej jakości wokół ostrych krawędzi itp. Iz tego powodu nie nadaje się do większości grafik internetowych. Znakomity na fotografiach.

W porównaniu do GIF, PNG oferuje lepszą kompresję, większą paletę i więcej funkcji, w tym przezroczystość. I to jest bezstratne.

GIF jest ograniczony do 256 kolorów i nie obsługuje prawdziwej przezroczystości. Powinieneś używać PNG zamiast GIF, ponieważ oferuje lepszą kompresję i funkcje. PNG doskonale nadaje się do małych i prostych obrazów, takich jak logo, ikony itp.

JPEG ma lepszą kompresję ze złożonymi obrazami, takimi jak zdjęcia.

Można zrobić włamanie, aby użyć obrazów GIF do pokazania prawdziwych kolorów. Można przygotować animację GIF z 256 klatkami z paletą kolorów z opóźnieniem 0 klatek i ustawić animację, aby była wyświetlana tylko raz. Tak więc wszystkie ramki mogą być wyświetlane jednocześnie. Na końcu renderowany jest obraz w prawdziwym kolorze GIF.

Wiele programów może przetwarzać takie obrazy GIF. Rozmiar pliku wyjściowego jest jednak większy niż plik PNG. Należy go użyć, jeśli jest to naprawdę konieczne.

png ma szerszą paletę kolorów niż gif, a gif jest właściwy, a png nie. gif może wykonywać animacje, czego nie potrafi normalny png. png-transparentność jest obsługiwana tylko przez przeglądarkę mniej więcej nowszą niż IE6, ale dla tego problemu istnieje poprawka JavaScript. Oba obsługują przezroczystość alfa. Ogólnie rzecz biorąc, powiedziałbym, że powinieneś używać png do większości stron internetowych, używając jpeg do zdjęć, zrzutów ekranu lub podobnych, ponieważ kompresja png nie działa zbyt dobrze na te.

GIF oparty na palecie 256 kolorów na obraz (przynajmniej w podstawowym wcieleniu). PNG potrafi „TrueColour”, czyli 16,7 miliona kolorów po wyjęciu z pudełka. Bezstratny PNG kompresuje się lepiej niż bezstratne pliki GIF. GIF może robić przezroczystość „binarną” (krycie 0% lub krycie 100%). PNG może obsługiwać przezroczystość alfa.

Podsumowując, jeśli nie musisz używać przezroczystych alfa obrazów i obsługiwać IE6, PNG jest prawdopodobnie lepszym wyborem, gdy potrzebujesz obrazów w pikselach do ilustracji wektorowych itp. JPG jest nie do pobicia w przypadku zdjęć.

Od 2018 r. Mamy kilka nowych formatów, lepszą obsługę poprzednich formatów i sprytne sposoby korzystania z filmów zamiast obrazów.

Do zdjęć

jpg - wciąż najczęściej obsługiwany format obrazu.

webp- Nowy format z Google. Dobry potencjał, choć przeglądarka wsparcie nie jest wielki.

Dla ikon i grafiki

svg- kiedykolwiek możliwe. Dobrze skaluje się na ekranach siatkówki, można go edytować w edytorach tekstu i dostosowywać za pomocą JS / CSS, jeśli jest ładowany w DOM.

png- jeśli dotyczy grafiki rastrowej (tzn. gdy jest tworzony w Photoshopie). Obsługuje przezroczystość, która jest bardzo istotna w tym przypadku użycia.

Dla animacji

svg- plus animacje css do grafiki wektorowej. Wszystkie zalety svg + moc animacji css.

gif - nadal najczęściej obsługiwany format obrazu animowanego.

mp4- jeśli animowane obrazy są w rzeczywistości krótkimi klipami wideo. Twitter / Whatsapp konwertuje gify na mp4.

apng- przyzwoita przeglądarka wsparcie (tzn bez IE Edge), ale tworząc go nie jest tak proste, jak GIF.

webp- blisko korzystania z mp4. Słabe wsparcie

To miłe porównanie różnych formatów animowanych obrazów.

Wreszcie, bez względu na format, należy go zoptymalizować - Istnieją narzędzia dla każdego formatu (np. SVGO, Guetzli, OptiPNG itp.) I mogą zaoszczędzić znaczną przepustowość.

Główną różnicą jest to, że GIF jest opatentowany i nieco szerzej wspierany. PNG jest otwartą specyfikacją, a przezroczystość alfa nie jest obsługiwana w IE6. Obsługa została ulepszona w IE7, ale nie do końca naprawiona.

Jeśli chodzi o rozmiary plików, GIF ma mniejszą domyślną paletę kolorów, więc na pierwszy rzut oka wydają się być mniejsze. Pliki PNG mają większą domyślną paletę, jednak można zmniejszyć ich paletę kolorów, aby w wyniku tego uzyskać mniejszy rozmiar pliku niż GIF. Problem polega na tym, że ta funkcja nie jest obsługiwana w programie Internet Explorer.

Ponadto, ponieważ pliki PNG mogą obsługiwać przezroczystość alfa, są one jedyną opcją, jeśli chcesz mieć odmianę przezroczystości inną niż przezroczystość binarna.

Jeśli zdecydujesz się na JPEG i masz do czynienia z obrazami dla witryny, możesz rozważyć Google Guetzli koder percepcyjny , który jest dostępny bezpłatnie. Z mojego doświadczenia wynika, że ​​dla stałej jakości Guetzli produkuje mniejsze pliki niż standardowe biblioteki kodujące JPEG, zachowując jednocześnie pełną zgodność ze standardem JPEG (więc twoje obrazy będą miały taką samą kompatybilność jak zwykłe obrazy JPEG).

Jedyną wadą jest to, że Guetzli zajmuje dużo czasu na kodowanie .. ale dzieje się tak tylko raz, gdy przygotowujesz obraz na stronę internetową, a korzyści pozostają na zawsze! Pobieranie mniejszych obrazów zajmuje mniej czasu, więc prędkość Twojej witryny wzrośnie w codziennym użytkowaniu.

GIF ma 8-bitową (256 kolorów) paletę, w której PNG ma maksymalnie 24-bitową paletę kolorów. Tak więc PNG może obsługiwać więcej kolorów i oczywiście algorytm obsługuje kompresję

Jak zauważył @aarjithn, WebP to kodek do przechowywania zdjęć.

Jest to również kodek do przechowywania animacji (animowana sekwencja obrazów). Począwszy od 2020 r. Większość przeglądarek głównego nurtu ma gotową obsługę ( tabela kompatybilności ). Uwaga dla WIC Wtyczka jest dostępna.

Ma przewagę nad GIF, ponieważ jest oparty na koderze wideo VP8 i ma szerszy zakres kolorów niż GIF, gdzie GIF ogranicza do 256 kolorów, rozszerza go do 2 ²⁴ = 16777216 kolorów, wciąż oszczędzając znaczną ilość miejsca.