Dlaczego twoje logo powinno być PNG, a nie JPG

Twoje logo to pojedynczy najczęściej używany obrazek w twojej firmie. Pojawia się na stronie, w stopce maila, na fakturach, w prezentacjach, w mediach społecznościowych, osadzone w dziesiątkach dokumentów. Jeśli jest zapisane jako JPG, każde z tych zastosowań jest lekko zdegradowane - a niektóre są wręcz zepsute.

Krótka wersja

Logo to nie zdjęcie. To zwykle grafika złożona z płaskich kolorów, ostrych krawędzi i czasem tekstu - czyli dokładnie tego, z czym JPG radzi sobie kiepsko.

Kompresja JPG aktywnie uszkadza ostre krawędzie (kontur litery lub kształt logo), obszary jednolitego koloru (tło okrągłego znaczka lub emblematu) i tekst renderowany bezpośrednio w obrazie (wprowadza “dzwonienie” wokół liter).

A JPG po prostu nie potrafi przezroczystych teł. To pojedynczy największy powód, dla którego loga powinny być PNG.

Problem z przezroczystością

Spójrz na dowolny nagłówek strony, który umieszcza logo na tle innym niż białe - kolorowy pasek, zdjęcie, gradient. Logo musi usiąść na tym tle czysto, bez białego prostokąta wokół. To wymaga przezroczystości.

JPG nie obsługuje przezroczystości. Gdy zapiszesz logo jako JPG, każdy przezroczysty piksel zostaje zamieniony na jednolitą biel. Ten biały prostokąt pojawia się wszędzie tam, gdzie logo nie jest na czystej bieli.

Typowe konsekwencje: białe pudło na ciemnym pasku nawigacji krzyczące do użytkownika, ten sam problem na zdjęciu tła hero, biały prostokąt w trybie ciemnym, prostokąt wstydu w nagłówku maila w kolorze marki.

PNG obsługuje pełny kanał alfa - każdy piksel może być w pełni przezroczysty, częściowo przezroczysty lub w pełni nieprzezroczysty. Logo siedzi naturalnie na dowolnym tle.

Artefakt “ringingu” wokół tekstu

JPG kompresuje obrazy, dzieląc je na bloki 8×8 pikseli i przybliżając każdy blok matematyczną krzywą. Przy stopniowych przejściach na zdjęciu działa to świetnie. Przy twardym przejściu między czarnym tekstem a białym tłem - fatalnie.

Powiększ tekst logo zapisanego jako JPG w typowej jakości webowej (60-85%), a zobaczysz aureolę delikatnych kolorowych drobinek wokół każdej litery, zmiękczone krawędzie tam gdzie powinny być ostre, subtelne przebarwienia w tym co powinno być jednolitym tłem.

Te artefakty są najgorsze dokładnie tam, gdzie oko patrzy - na samych literach. PNG zapisuje ten sam obraz piksel w piksel, bez artefaktów, z zachowaniem ostrych krawędzi.

Strata generacji: każdy zapis pogarsza obraz

Załóżmy, że zapisujesz logo jako JPG. Potem kolega je otwiera, zmienia rozmiar i zapisuje ponownie. Potem zostaje osadzone w PowerPoincie i wyeksportowane. Potem ktoś robi zrzut ekranu z PowerPointa, przycina i zapisuje ponownie.

Każdy z tych zapisów to krok kompresji stratnej. Jakość JPG degraduje się za każdym razem - to strata generacji. Wynik po kilku zapisach wygląda zauważalnie gorzej niż źródło.

PNG nie ma straty generacji. Zapisz PNG tysiąc razy - plik jest bit w bit identyczny za każdym razem. Twoje logo pozostaje ostre, przez ile rąk by nie przeszło.

Obok siebie: scenariusz z życia

Wyobraź sobie logo - granatowa tarcza z białym napisem “ACME” na przezroczystym tle:

Scenariusz	Logo jako JPG	Logo jako PNG
Na białym nagłówku strony	Wygląda OK (artefakty JPG są subtelne)	Wygląda OK, identycznie jak źródło
Na ciemnoniebieskim bannerze maila	Biały prostokąt wokół tarczy - wygląda na popsute	Siedzi naturalnie na niebieskim
Na zdjęciu hero	Biały prostokąt zasłania zdjęcie z tyłu	Tarcza czysto unosi się nad zdjęciem
Po 5 ponownych zapisach (edycje zespołu)	Widoczne rozmycie i dzwonienie wokół “ACME”	Pikselowo identyczne z oryginałem
Drukowane na kolorowym papierze	Białe pudło widać, szczególnie wyraźnie	Tarcza drukuje się tylko tam, gdzie jest
Osadzone w PDF w trybie ciemnym	Biały prostokąt widoczny na ciemnej stronie	Niewidoczne tło
W 4× powiększeniu w prezentacji	Pikselowe artefakty widoczne wokół krawędzi	Krawędzie pozostają ostre

Rozmiar pliku - czy PNG naprawdę jest większy?

Typowa obiekcja: “ale pliki PNG są o tyle większe”. Dla logo prawie nigdy nie jest to prawda.

Logo zwykle ma niewiele różnych kolorów (2-5), duże obszary płaskiego koloru i ostre krawędzie. To dokładnie to, w czym kompresja PNG jest dobra. Typowe logo 600×600:

• JPG (jakość 85): 30-80 KB
• PNG (24-bit + alfa): 15-60 KB
• PNG-8 (indeksowany, dla log z ≤256 kolorami): 5-20 KB

Dla logo o prostych paletach kolorów PNG jest często mniejszy niż ekwiwalent JPG. A PNG-8 potrafi być zdumiewająco mały.

Zdjęcia to miejsce, gdzie JPG wygrywa na rozmiarze. Logo to miejsce, gdzie PNG wygrywa i na rozmiarze, i na jakości.

A co z SVG?

Do zastosowań webowych SVG (Scalable Vector Graphics) jest technicznie najlepszym formatem: nieskończenie skalowalny, mały rozmiar pliku, idealnie ostry w każdej rozdzielczości. Jeśli możesz dostać SVG od projektanta, używaj go na stronie.

SVG ma jednak ograniczenia: większość klientów pocztowych wciąż nie renderuje SVG niezawodnie, wsparcie w dokumentach biurowych jest niekonsekwentne, większość platform social media odrzuca SVG, workflow druku często oczekuje plików rastrowych.

PNG to uniwersalny fallback. Wszędzie, gdzie SVG nie działa, PNG jest kolejną najlepszą opcją - i powinieneś mieć go w kilku standardowych rozdzielczościach (np. 400×400, 800×800, 1600×1600) do różnych zastosowań.

Naprawa: pięciominutowa aktualizacja

Jeśli używałeś logo w JPG:

1. Znajdź oryginalne źródło - plik Photoshopa, Illustratora lub master w wysokiej rozdzielczości. To przywraca informację o przezroczystości.
2. Jeśli nie masz źródła - twój JPG wypalił białe tło w każdy piksel. Musisz albo ręcznie usunąć tło (żmudne), albo odtworzyć logo (projektant zrobi to szybko z przyzwoitego JPG).
3. Wyeksportuj jako PNG przynajmniej w 2× największym rozmiarze wyświetlania. Logo szerokie na 200 px na stronie? Eksportuj minimum 400 px, żeby wyglądało ostro na ekranach retina.
4. Zastąp wszędzie. Zaktualizuj stronę, stopki maili, szablony dokumentów, podziel się nowym plikiem z zespołem.

Jeśli potrzebujesz tylko szybkiej konwersji JPG→PNG jako punktu wyjścia - żeby przekazać projektantowi do usunięcia tła - nasz konwerter JPG do PNG zrobi to w przeglądarce w parę sekund. Twoje logo zostaje prywatne.

Logo w JPG to bug w twojej marce. Dodaje brzydkie prostokąty tam gdzie logo powinno się wtapiać, zmiękcza krawędzie które czynią markę rozpoznawalną, i pogarsza się z każdym zapisem. PNG naprawia to wszystko - zwykle przy mniejszym rozmiarze pliku - a aktualizacja zajmuje jakieś pięć minut.