Formaty obrazów wyjaśnione: JPG, PNG, WebP, AVIF, GIF, BMP i ICO
Którego formatu użyć do zdjęć, logo, zrzutów ekranu, stron internetowych, druku i mediów społecznościowych, i dlaczego.
Każdy format obrazu to zestaw kompromisów między rozmiarem pliku, jakością, przezroczystością, animacją i zgodnością. Wybierz niewłaściwy, a dostaniesz albo rozdęty plik, albo rozmyte logo. Ten przewodnik pokazuje, w czym każdy format jest dobry, z liczbami potrzebnymi do podjęcia decyzji.
Dwa rodzaje kompresji
Kompresja bezstratna zapisuje każdy piksel dokładnie i po prostu znajduje bardziej wydajny sposób zapisania tych samych danych, tak jak robi to ZIP. Otwórz i zapisz bezstratny obraz tysiąc razy, a pozostanie niezmieniony. Tak działają PNG, BMP, GIF i bezstratny WebP.
Kompresja stratna odrzuca informacje, celując w szczegóły, na które ludzkie oko jest najmniej wrażliwe: drobną fakturę, subtelne różnice kolorów, szum o wysokiej częstotliwości. Wynik może być dziesięć razy mniejszy od pliku bezstratnego bez widocznej różnicy, ale każdy ponowny zapis traci trochę więcej. Tak działają JPG, stratny WebP i AVIF.
Zasada pierwsza wynika z tego wprost: używaj formatów stratnych do fotografii, które są pełne szumu i faktury, za którymi nikt nie zatęskni, a formatów bezstratnych do grafik z ostrymi krawędziami, płaskimi kolorami i tekstem, gdzie liczy się każdy piksel.
Format po formacie
JPG (JPEG)
Format zdjęć od 1992 roku. Stratny, 8-bitowy kolor, brak przezroczystości, brak animacji. Obsługiwany przez wszystko, co kiedykolwiek powstało. Ustawienie jakości od 0 do 100 steruje kompromisem; 80 do 85 to codzienny złoty środek. Jego słabości to widoczne „blokowanie” przy niskiej jakości, obwódki wokół ostrych krawędzi i brak przezroczystości. Używaj go do zdjęć trafiających gdziekolwiek poza przeglądarkę: e-mail, druk, platformy sprzedażowe, starsze oprogramowanie.
PNG
Bezstratny, do 16-bitowego koloru, pełna przezroczystość alfa, brak animacji (APNG istnieje, ale jest rzadkością). Właściwy wybór do logo, ikon, zrzutów ekranu, diagramów, wykresów i każdego obrazu, który potrzebuje przezroczystego tła. Jego słabością jest rozmiar: zdjęcie w PNG może być dziesięć razy większe od JPG. Nigdy nie używaj PNG do fotografii na stronie internetowej.
WebP
Format webowy Google, obsługiwany dziś przez każdą aktualną przeglądarkę. Ma tryb stratny i bezstratny, w obu obsługuje przezroczystość i obsługuje animację. Stratny WebP jest o około 25 do 35% mniejszy od JPG przy tej samej jakości; bezstratny WebP jest o około 25% mniejszy od PNG. To najlepszy format ogólnego przeznaczenia do wszystkiego, co wyświetla się w przeglądarce. Jego słabością jest zgodność poza przeglądarką: starsze programy desktopowe, niektóre klienty poczty i wiele formularzy przesyłania wciąż go odrzuca.
AVIF
Jeszcze nowszy, oparty na kodeku wideo AV1. Zwykle o 50% mniejszy od JPG i o 20% mniejszy od WebP przy tej samej jakości, z przezroczystością, animacją i szeroką gamą kolorów. Obsługiwany przez wszystkie aktualne przeglądarki od 2024 roku. Kodowanie jest wolne, zwłaszcza w przeglądarce, a wsparcie w programach poza przeglądarką wciąż jest nierówne. Używaj go, gdy rozmiar pliku jest krytyczny i kontrolujesz środowisko wyświetlania; obok podawaj zapasowy WebP lub JPG.
GIF
Z 1987 roku. Ograniczony do 256 kolorów na klatkę, jednokolorowa przezroczystość i animacja, która jest jedynym powodem, dla którego wciąż jest wszędzie. Fatalny do fotografii, w porządku do prostych grafik, nie do pobicia pod względem zgodności. Do obrazów nieruchomych PNG robi wszystko to, co GIF, tylko lepiej; do animacji MP4 lub animowany WebP są znacznie mniejsze.
BMP
Nieskompresowana bitmapa Windows. Ogromne pliki, brak przezroczystości w typowym użyciu, brak kompresji. Przetrwał tylko dlatego, że jest banalnie prosty do odczytu, co ma znaczenie dla urządzeń wbudowanych i starego oprogramowania. Nigdy nie używaj go w sieci ani do przechowywania.
ICO
Format ikon Windows i favicon przeglądarek. Zawiera kilka rozmiarów tego samego obrazu w jednym pliku, aby można było wybrać właściwy do karty, zakładki lub skrótu na pulpicie. Tworzy się go z PNG za pomocą narzędzia PNG do ICO.
Tabela porównawcza
| Format | Kompresja | Przezroczystość | Animacja | Rozmiar zdjęcia vs JPG | Zgodność |
|---|---|---|---|---|---|
| JPG | Stratna | Nie | Nie | 1× | Uniwersalna |
| PNG | Bezstratna | Tak, pełna alfa | Nie | 5 do 10× | Uniwersalna |
| WebP | Obie | Tak, pełna alfa | Tak | 0,65 do 0,75× | Wszystkie przeglądarki, większość nowoczesnych aplikacji |
| AVIF | Obie | Tak, pełna alfa | Tak | 0,5× | Wszystkie aktualne przeglądarki, niewiele aplikacji |
| GIF | Bezstratna, 256 kolorów | Tak, włącz/wyłącz | Tak | 2 do 4× (i gorsza jakość) | Uniwersalna |
| BMP | Brak | Nie | Nie | 20 do 30× | Uniwersalna, ale rzadko używany |
Który format do jakiego zadania
- Zdjęcia na stronie internetowej: WebP przy jakości 75 do 85, z zapasowym JPG, jeśli musisz obsługiwać bardzo stare przeglądarki. AVIF, jeśli chcesz mieć najmniejsze możliwe strony.
- Logo i ikony na stronie internetowej: SVG, jeśli je masz; w przeciwnym razie PNG lub bezstratny WebP.
- Zrzuty ekranu: PNG. Kompresja stratna rozmywa tekst.
- Załączniki e-mail: JPG do zdjęć, PNG do grafik. Nie wysyłaj WebP; zbyt wiele programów pocztowych źle go obsługuje.
- Druk: JPG przy jakości 95 lub PNG/TIFF, przy 300 pikselach na cal drukowanego rozmiaru.
- Media społecznościowe: JPG lub PNG; każda platforma i tak rekompresuje przy przesyłaniu, więc prześlij w wysokiej jakości i we właściwych wymiarach.
- Wycinki produktów z przezroczystością: PNG dla maksymalnej zgodności, WebP na strony internetowe.
- Favicony: ICO plus PNG na ekrany główne telefonów.
Konwersja między nimi
Każda konwersja na tej stronie odbywa się w Twojej przeglądarce. Najczęstsze ścieżki to PNG do WebP i JPG do WebP na strony internetowe, WebP do JPG i WebP do PNG dla zgodności oraz PNG do JPG do zmniejszania zdjęć wyeksportowanych w złym formacie. Kompresor obrazów obsługuje każdą z nich z przetwarzaniem wsadowym.