PNG, JPG lub GIF: wybór odpowiedniego typu pliku obrazu dla Twojej witryny

Obecnie dwa najpopularniejsze formaty plików graficznych to JPG i PNG. Na pierwszy rzut oka plik JPG może wyglądać dokładnie tak samo, jak ten sam obraz zapisany jako plik PNG. Możliwość wyboru JPG na PNG podczas zapisywania pliku sprawia również, że wydaje się, że oba są wymienne, tak samo jak litery używane w rozszerzeniu.

Według W3Techs, JPG i PNG są używane częściej niż inne formaty plików, a PNG jest używany tylko nieco częściej.

Istnieją jednak wyraźne różnice między plikami JPG i PNG i musisz wiedzieć, który wybrać podczas korzystania z obrazów online. Typ pliku może mieć wpływ na to, gdzie jest on umieszczony na Twojej stronie internetowej, na jakość, z jaką jest wyświetlany i czy spowalnia czas ładowania. Jeśli chcesz umieścić animację na swojej stronie internetowej lub w kanałach mediów społecznościowych, będziesz także chciał dowiedzieć się trochę o plikach GIF i czym różnią się od JPG i PNG.

Subskrybuj nasz kanał YouTube

Bezstratna i stratna kompresja

Celem kompresji obrazu jest oszczędność miejsca – mniejsze obrazy są łatwiejsze do przenoszenia i przechowywania. Duże obrazy zajmują dużo przestrzeni cyfrowej i mogą spowolnić ładowanie strony internetowej. Ogólnie rzecz biorąc, niektóre dane są usuwane z obrazu podczas kompresji.

Istnieją dwa rodzaje kompresji: bezstratna i stratna. Aby zrozumieć jedną z wyraźnych różnic między JPG i PNG, będziesz potrzebować wprowadzenia do tych dwóch rodzajów kompresji.

Bezstratna kompresja

Obrazy zawierają zbędne informacje. Kompresja bezstratna usuwa nadmiarowe dane, ale także informuje komputer, jaka część danych była nadmiarowa i jak odbudować obraz. Rozmiar pliku jest zmniejszony, aby zaoszczędzić miejsce, ale cały plik można również zrekonstruować ze skompresowanego. Uwielbiam ten przykład z Make Use Of. Jest to celowo uproszczone przedstawienie tego, jak bezstratna kompresja usuwa informacje bez faktycznej zmiany struktury:

Kompresja stratna

Pliki MP3 są świetnymi przykładami kompresji stratnej. Nie zawierają całego dźwięku oryginalnego nagrania; dźwięki, których ludzie nie mogą lub prawie nie słyszą, są usuwane. Jest to podobne do działania stratnej kompresji obrazów. Kiedy obraz jest skompresowany, informacje są usuwane na dobre, nie tylko tymczasowo; nie można przywrócić usuniętych danych. Za każdym razem, gdy obraz jest edytowany i/lub ponownie zapisywany, traci nieco więcej danych, co obniża jakość.

JPG

JPG (lub JPEG) oznacza Joint Photographic Experts Group. Rozszerzeniem pliku może być .jpg lub .jpeg. Te rozszerzenia to to samo, a pliki będą działać w ten sam sposób. Wczesne wersje systemu Windows mogły przetwarzać tylko pliki z trzema literami, więc JPEG został skrócony do JPG. Kiedy oglądasz zdjęcie w witrynie internetowej lub na platformie mediów społecznościowych, najprawdopodobniej oglądasz plik JPG.

Oto cechy i zalety plików JPG:

• Zwykle używany do zdjęć zamiast grafiki.
• Najlepszy wybór do zrzutów ekranu gier, filmów i podobnych treści.
• Obraz zapisany na białym lub pustym (nieprzezroczystym) tle.
• Mniejsze rozmiary plików niż PNG.
• Szybsze ładowanie strony i lepsze wrażenia użytkownika.
• Kompresja stratna, ale stopień kompresji można regulować – możesz wybrać, jak bardzo obraz zostanie skompresowany.
• Edycja i ponowne zapisywanie pogorszy jakość, ale możesz tego nie zauważyć w zależności od liczby zapisów i miejsca wyświetlania obrazu.

Algorytm JPG znajduje piksele o tym samym kolorze lub wartości i blokuje je w kafelki. Podczas gdy JPG obsługuje miliony kolorów, ostateczny obraz będzie miał mniej kolorów niż oryginał (coś w rodzaju tych ścieżek audio). W ten sposób tworzony jest mniejszy obraz, ale powoduje to również utratę danych, których nigdy nie można odzyskać. Jednak JPG uwzględnia sposób, w jaki ludzie widzą jasność, więc może utrzymać jasność nawet po upuszczeniu informacji o kolorze, co daje obraz wysokiej jakości.

PNG

PNG oznacza przenośną grafikę sieciową. Rozszerzenie pliku to .png. Gdy przeglądasz logo marki w witrynie, najprawdopodobniej oglądasz plik PNG.

Oto cechy i zalety plików PNG:

• Zwykle używany do ilustracji i innych rodzajów grafiki.
• Najlepszy wybór do ilustracji, szczegółowych diagramów i zrzutów ekranu aplikacji.
• Obraz zapisany na przezroczystym tle – umieść go na swojej stronie, nie zakłócając niczego wokół niego.
• Obsługa szerokiej gamy kolorów i skali szarości.
• Możesz zmienić kolory plików PNG, na przykład jeśli chcesz zaktualizować swoje logo.
• Im mniej użytych kolorów, tym mniejszy plik może się skurczyć.
• Kompresja bezstratna.

Zapisywanie zdjęcia jako PNG

Chociaż przez większość czasu będziesz zapisywać zdjęcia jako pliki JPG, istnieją przypadki, w których będziesz chciał je zapisać jako PNG:

• Potrzebujesz obrazu, aby był jak najwyższej jakości – PNG zawiera więcej szczegółów niż JPG.
• Zamierzasz wielokrotnie edytować i zapisywać zdjęcie. Po zakończeniu edycji możesz zapisać zdjęcie jako JPG, aby ograniczyć rozmiar.
• Zdjęcie zawiera również tekst – JPG zauważalnie obniży jakość tekstu.
• Potrzebujesz, aby zdjęcie miało przezroczyste tło – na przykład możesz użyć jednego ze swoich zdjęć jako swojego logo.

GIF

GIF oznacza format wymiany grafiki. Rozszerzenie pliku to .gif. Gdy oglądasz krótki, animowany film, który jest zapętlony, najprawdopodobniej oglądasz GIF.

Oto cechy i zalety GIF-ów:

• Jest to jedyny typ pliku z trzech, który obsługuje animację.
• Najlepszy wybór do prostej grafiki.
• Ograniczona gama kolorów.
• Mniejsze niż pliki JPG ze względu na ograniczone możliwości dostosowania kolorów.
• Kompresja bezstratna.

Wtyczki WordPress do kompresji

Aby skompresować obraz dla witryny WordPress, możesz użyć oprogramowania, narzędzia opartego na przeglądarce lub wtyczki. Niektórzy ludzie nie używają wtyczki, ponieważ nie chcą dodatkowego obciążenia serwera lub martwią się problemami ze zgodnością, lub nie chcą przechodzić przez dodatkowy etap tworzenia kopii zapasowych. Jeśli jednak chcesz usprawnić swój proces, wtyczki mogą być całkiem wydajne.

Oto kilka rzeczy, o których należy pamiętać przy korzystaniu z wtyczki WordPress do kompresji:

• Nie będziesz musiał przesyłać obrazu po zmianie jego rozmiaru – będzie on już w Twojej bibliotece multimediów WordPress.
• Wiele wtyczek ma ustawienie, które pozwala zoptymalizować podczas przesyłania, usuwając kolejny krok z procesu.
• Nawet jeśli dwie wtyczki kompresujące mówią, że robią to samo, będą miały własne ustawienia, zalety i wady. Być może będziesz musiał pobawić się kilkoma, aby znaleźć odpowiednią równowagę między współczynnikiem kompresji a jakością.
• Darmowe wersje wtyczek kompresujących brzmią na pierwszy rzut oka atrakcyjnie, ale wyniki kompresji mogą wyglądać kiepsko, więc będziesz musiał uaktualnić, jeśli chcesz uzyskać obrazy o wyższej jakości.
• Niektóre wtyczki są trudne do zainstalowania i skonfigurowania, podczas gdy inne będą działać idealnie od razu po wyjęciu z pudełka.
• Dodatkowe funkcje sprawiają, że niektóre wtyczki są bardziej atrakcyjne niż inne. Na przykład ShortPixel ma błyszczącą opcję, definitywną atrakcję dla profesjonalnych fotografów. Imagify zachowa oryginalny obraz w osobnym folderze, co oznacza, że ​​możesz go przywrócić w dowolnym momencie.

Końcowe przemyślenia

Wiedza o tym, jak będziesz używać swoich obrazów, jest pierwszym krokiem do określenia, jaki typ pliku wybrać. Docelowo celem jest użycie jak najmniejszego pliku przy zachowaniu takiej jakości, jaka jest potrzebna dla miejsca docelowego – obraz wyświetlany na stronie internetowej zostanie wyświetlony na większej stronie niż obraz wyświetlany na Instagramie, więc potrzebujesz jakości być wyżej, aby niedoskonałości były mniej zauważalne. Aby stracić zdjęcia, które stracisz ze złamanym sercem, użyj systemu kopii zapasowych do przechowywania oryginałów – jeśli przypadkowo zbyt mocno skompresujesz, będziesz mógł zacząć od nowa.

Chcesz znaleźć więcej obrazów do swojej witryny? Unsplash to jedno z moich ulubionych miejsc, do których można się dostać za darmo. Sprawdź nasz artykuł za pomocą obrazów Unsplash na WordPress jednym kliknięciem.