Przewodnik dla początkujących do JPEG vs PNG (i jak korzystać z obu)

Czym byłaby sieć z obrazami? W ciągu kilkudziesięciu lat Internet zmienił się z cyfrowej drukarki igłowej w dynamiczny serwer multimediów, w tym obrazów, wideo, animacji i nie tylko. Jeśli chodzi o cyfrowe fotosy, może być zamieszanie między JPEG a PNG, szczególnie kiedy używać każdego z nich.

Jeśli spojrzysz na obraz JPEG obok tego samego, ale jako PNG, prawdopodobnie nie zobaczysz różnicy. Jest to idealne rozwiązanie, ponieważ oba formaty obrazu mają na celu odtworzenie możliwie najlepszego obrazu w Internecie. Istnieją jednak różne przypadki użycia i techniki optymalizacji, o których należy pamiętać.

W tym artykule porównamy JPEG z PNG i powiemy, kiedy należy użyć każdego formatu obrazu. Najpierw jednak zapoznajmy się z każdym typem pliku.

Różnica między JPEG a PNG

Na pierwszy rzut oka (w sensie dosłownym) nie ma różnicy między JPEG i PNG. Innymi słowy, jeśli umieścimy dwa obrazy i poprosimy Cię o wybranie, który z nich jest JPEG, a który PNG, przez większość czasu nie będziesz w stanie powiedzieć. Na przykład zrób następujący obraz:

Czy jesteś w stanie podjąć decyzję, czy ten motyl szkarłatny mormon jest obrazem JPEG czy PNG? Oczywiście bez układu odniesienia nie da się dokonać porównania:

Istnieją wyraźne różnice, chociaż w tym przypadku nie zrobi to wielkiej różnicy. Kiedy próbujesz podjąć decyzję (bez zaglądania do narzędzi programistycznych w przeglądarce), możemy udostępnić pewne szczegóły techniczne:

• Format plików Joint Photographic Experts Group (JPEG) oferuje stratną kompresję obrazów cyfrowych. Oznacza to, że jakość obrazu jest zauważalna, jeśli równowaga między tą wartością a rozmiarem pliku jest zbyt duża. JPEG to „płaskie” pliki. Innymi słowy, nie mogą wyświetlać przezroczystości w pliku. Chociaż możesz dostosować poziom kompresji, nawet przy najlepszych ustawieniach JPEG będzie plikiem 8-bitowym, co wpływa na zakres dynamiczny. Co więcej, plik JPEG często zawiera profil kolorów, który mówi monitorom, jak wyświetlać kolory.
• Natomiast obrazy Portable Network Graphics (PNG) są plikami gotowymi do użycia w Internecie. Jest to bardziej dynamiczny format niż JPEG, z możliwością wyprowadzania plików 24-bitowych. Jest to również format „bezstratny”, co oznacza, że ​​można go powielić bez pogorszenia jakości obrazu. Jednak nie można dostosować kompresji plików PNG i nie ma profilu kolorów. Mimo to plik PNG jest idealny do użytku w Internecie, biorąc pod uwagę jego specyfikacje techniczne.

Wydaje się, że jest to jasne – pliki PNG pasują do sieci, a JPEG nie. Cóż, to nie jest cała historia. Każdy typ pliku doskonale nadaje się do określonych aplikacji. Następnie omówimy je.

JPEG vs PNG: kiedy należy używać każdego z nich

Sieć najlepiej wykorzystuje zarówno pliki JPEG, jak i PNG. W rzeczywistości zazębiają się w ładny sposób bez większego skrzyżowania. Jako przydatny dźwięk, oto kiedy powinieneś użyć JPEG vs PNG:

Jeśli chcesz wyświetlić zdjęcie, użyj JPEG. Dla każdego innego pliku – zwłaszcza grafiki cyfrowej – użyj PNG.

Chociaż ta rada nie dotyczy każdej sytuacji (chociaż dotyczy prawie każdego przypadku). Na przykład, jeśli połączysz rysunki cyfrowe z obrazami, zarówno JPEG, jak i PNG będą technicznie niepoprawne w użyciu. Później będziesz mieć więcej wiedzy, aby podjąć właściwą decyzję, chociaż istnieje kilka innych wskazówek, które możesz podać.

Na przykład, jeśli przewidujesz kopiowanie obrazów, użyj innego formatu pliku niż JPEG. Dzieje się tak, ponieważ formaty kompresji stratnej odtwarzają tylko przybliżoną wersję pliku. Natomiast PNG to reprodukcja 1:1, ponieważ oferuje bezstratną kompresję.

Ponadto, jeśli chcesz zmienić rozmiar obrazu po jego zapisaniu, użyj JPEG, ponieważ dobrze radzi sobie ze skalowaniem. PNG używają innej struktury kodowania, która ulega degradacji po zmianie wymiarów (lub innych atrybutów technicznych).

Inne formaty obrazów, o których powinieneś wiedzieć

Oczywiście JPEG vs PNG nie jest jedynym porównaniem formatów plików graficznych, które należy wziąć pod uwagę. Istnieje wiele innych typów plików, które konkurują o uwagę i mają inne zastosowania:

• Format interfejsu graficznego (GIF). Jeśli opublikujesz na Twitterze mem lub film z reakcjami, który jest animowany, jest to GIF. W rzeczywistości PNG chciał zastąpić pliki GIF w swojej oryginalnej specyfikacji i oba oferują warstwy przezroczystości.
• Tagged Image File Format (TIFF). Ten rastrowy format plików doskonale nadaje się do drukowania ze względu na obsługę przestrzeni kolorów CMYK.
• Format obrazu surowego (RAW). Będziesz go używać tylko wtedy, gdy jesteś fotografem i jest on dostępny wyłącznie dla używanego aparatu. Chociaż możesz przeglądać pliki RAW na swoim komputerze, potrzebujesz dedykowanego oprogramowania do ich przeglądania. Rozmiary plików są astronomiczne, ponieważ dane są kompletne. W rzeczywistości formaty RAW nie są obrazami, ale danymi, które po zakodowaniu reprezentują obraz.
• Plik obrazu o wysokiej wydajności (HEIF). To jest podstawowy format plików urządzeń z systemem iOS. Oferuje lepszą kompresję i rozmiary plików niż JPEG i może obsługiwać wiele różnych formatów multimedialnych.

Chociaż każdy z tych plików graficznych będzie używany w Internecie (z wyjątkiem plików RAW w odniesieniu do wyświetlania), nadal dominuje JPEG vs PNG. Oba mają specyficzne przypadki użycia, w których zalety i wady dobrze się równoważą.

Jak przygotować obrazy do przesłania (na 3 sposoby)

Pomimo tego, że JPEG vs PNG jest remisem, jeśli chodzi o końcową jakość wyświetlania, musisz poradzić sobie z każdym formatem w inny sposób, aby uzyskać z niego jak najwięcej. Istnieją trzy obszary, na które możesz wpłynąć na rozmiar pliku, jakość i ogólne przygotowanie obrazów:

• Upewnij się, że wymiary uwzględniają odpowiednie przypadki użycia, z jakimi się spotkasz.
• Wybierz rozdzielczość obrazu odpowiednią do internetu.
• Użyj „gustownej” kompresji, aby jeszcze bardziej zmniejszyć rozmiar plików obrazów bez zbytniego wpływu na jakość.

Jak można się spodziewać, jest tu delikatna równowaga. Zacznijmy od wymiarów twojego obrazu.

1. Ustaw swoje wymiary

Wymiary obrazu są ważniejsze dla użytkownika końcowego niż jakikolwiek inny punkt w łańcuchu. Dzieje się tak, ponieważ przeglądarka musi załadować obraz, a duży plik spowoduje erozję User Experience (UX). Chociaż to nie jedyna kwestia. Oczywiście kluczowa jest również jakość. Jeśli zdecydujesz się na mały rozmiar obrazu, wpłynie to na ostateczną jakość obrazu (bardziej w przypadku plików JPEG niż PNG).

Odpowiedzią jest trafienie w optymalny punkt w kilku obszarach, zaczynając od wymiarów obrazu. Zasadniczo chcesz, aby Twoje obrazy były wystarczająco duże, aby mogły oddawać potrzebne szczegóły. Jest punkt przesady, który różni się w zależności od platformy docelowej i samego obrazu.

Nowoczesny czujnik kadrowania i pełnoklatkowe aparaty cyfrowe mogą tworzyć obrazy o domyślnych wymiarach około 6000 pikseli x 3000 pikseli (chociaż istnieją ogromne różnice między aparatami). Natomiast obrazy z „długą krawędzią” o rozdzielczości około 2000 pikseli są powszechne w mediach społecznościowych. Pamiętaj, że jest to wyświetlanie w pełnym widoku urządzenia.

W przypadku obrazów na blogach ta zasada 2000 pikseli może wynosić nawet 1000 pikseli. Uwzględnia to również obrazy w wysokiej rozdzielczości lub „Retina”. Często potrzebują podwojonych wymiarów, aby wyświetlać ostre obrazy na ekranach o wysokiej rozdzielczości. W rzeczywistości rezolucja jest dobrym punktem wyjścia.

2. Ustaw odpowiednią rozdzielczość

Jednym z podstawowych elementów ekranów cyfrowych są piksele. Te małe kropki tworzą cały wyświetlacz, chociaż piksele nie mają jednolitego rozmiaru. Z tego powodu, przygotowując nasze obrazy JPEG i PNG, musimy również wziąć pod uwagę rozdzielczość.

Używamy pikseli na cal (PPI), aby omówić, ile pikseli może zmieścić się na ekranie. Możesz to również wyrazić w centymetrach lub jako „kropki”. Ta ostatnia dotyczy fizycznych formatów druku, a środowiska graficzne często używają DPI. W związku z tym usłyszysz, że jest używany zamiennie, chociaż PPI jest poprawnym terminem.

Chociaż specyfikacja obrazu PNG wykorzystuje 72 PPI jako optymalną rozdzielczość projektową, nie uwzględnia to nowoczesnych ekranów o wysokiej rozdzielczości. Chociaż możesz podwoić wymiary obrazu, aby renderować go ostrym na wszystkich ekranach, możesz również zrobić to samo z rozdzielczością. Na przykład zrób ten zrzut ekranu pulpitu macOS Big Sur:

Jest to plik PNG z 1000 pikseli na dłuższej krawędzi (w tym przypadku na górze i na dole). Chociaż używa 144 PPI – chociaż istnieje pewna „magia” przesyłania, która konwertuje rozdzielczość do 72 PPI podczas przesyłania do WordPressa.

Zarówno obrazy PNG, jak i JPEG mogą również używać znacznie wyższych wartości PPI – gotowe do druku rozdzielczości to około 300 DPI/PPI. Co więcej, wiele obrazów z serwisów ze zdjęciami stockowymi, takich jak Pixabay, zostanie pobranych przy użyciu 300 PPI:

W związku z tym zmniejszenie tego pozwoli lepiej przygotować obrazy do internetu i różnych jego wyświetlaczy.

3. Zoptymalizuj swoje obrazy za pomocą kompresji

Nie musimy wiele mówić o optymalizacji obrazu. Jest to temat, który można znaleźć w innym miejscu na blogu, a prawie wszyscy użytkownicy WordPressa wiedzą, jak optymalizować obrazy przed lub w trakcie procesu przesyłania.

Ogólna koncepcja polega na tym, że do obrazów stosuje się dodatkową kompresję, często w sposób stratny. Ma to wpływ na jakość obrazu i jest zauważalne, jeśli dokonasz znacznych zmian w wymiarach i rozdzielczości przed zastosowaniem silnej kompresji stratnej.

Te artefakty muszą być minimalne, aby dobrze prezentować obrazy. Z tego powodu dostępnych jest wiele narzędzi do wykonania tej pracy. Najbardziej dostępnym jest TinyPNG, chociaż kompresuje również pliki JPEG:

Jednak stosowana kompresja jest delikatna w przypadku niektórych obrazów, co może nie wystarczyć do zmniejszenia rozmiaru pliku. Usługa taka jak ShortPixel ma dostępny agresywny format kompresji stratnej, podczas gdy kompresja Glossy wykonuje godną podziwu pracę w porównaniu z TinyPNG.

Wniosek jest taki, że musisz zrównoważyć poziom kompresji zarówno z rozmiarem pliku, jak i wszystkimi innymi elementami obrazu. W następnej sekcji omówimy najlepsze podejście.

JPEG vs PNG: jak najlepiej wykorzystać każdy format

Pomimo różnic w formatach plików, charakter przeglądania sieci oznacza, że ​​przygotowanie zdjęć można sprowadzić do następujących czynności:

• Użyj wymiarów od 1000 do 2048 pikseli na dłuższej krawędzi.
• Ustaw rozdzielczość 144 PPI dla wszystkich obrazów, aby upewnić się, że wyświetlają się one wyraźnie i wyraźnie na wszystkich ekranach.
• Zastosuj subtelną kompresję poprzez optymalizację obrazu, aby zmniejszyć rozmiar pliku. Biorąc wszystko pod uwagę, większość obrazów będzie miała rozmiar około 100–200 kb.

Jest tu trochę więcej w oparciu o określone formaty plików:

• W przypadku plików PNG zmniejszenie wymiarów może zbytnio pogorszyć jakość obrazu. Chodzi o to, aby zachować jak najwyższą rozdzielczość, aby złagodzić te czynniki.
• Pliki JPEG nie wytrzymują kopiowania, ponieważ każda duplikacja jest bardziej zdegradowana niż poprzednia. Jeśli możesz kontrolować, skąd pochodzi plik JPEG (na przykład, czy zrobiłeś zdjęcie), utwórz plik JPEG z pliku TIFF lub RAW, aby zachować jakość obrazu.
• Z naszego doświadczenia wynika, że ​​pliki JPEG nie podlegają kompresji tak samo jak inne formaty plików. Oznacza to, że ważne jest, aby przygotować i zoptymalizować te obrazy przed przejściem do etapu kompresji.

Do tej pory powinieneś dobrze znać JPEG vs PNG, kiedy ich używać i jak przygotować pliki; a jeśli nadal chcesz wiedzieć, który obraz był JPEG od początku artykułu, to pierwszy!

Zawijanie

Wygląda na to, że obrazy działają w sieci. Z tego powodu dysponujemy wieloma formatami plików, które pomagają nam zapewnić odpowiednią jakość przy rozsądnym rozmiarze pliku dla aplikacji. JPEG vs PNG to powszechne porównanie, ponieważ nie jest jasne, w czym oba są dobre, i są to dwa popularne formaty obrazów.

Krótko mówiąc, pliki JPEG służą do zdjęć, a pliki PNG do grafiki. Aby przygotować pliki, głównym problemem powinno być utrzymanie wysokiej jakości obrazu, a nie rozmiaru pliku. Mimo to, chociaż korekty rozdzielczości dają największe zmiany, ma to większy wpływ na jakość obrazu. Sztuką jest zrównoważyć wymiary, rozdzielczość i kompresję, aby uzyskać ostateczny obraz gotowy do Internetu.

Czy przygotowujesz obrazy do internetu, jak opisaliśmy tutaj, czy robisz coś innego? Daj nam znać w sekcji komentarzy poniżej!

Źródło zdjęcia: minka2507, christels .