JPG czy PNG: co wybrać dla zrzutów ekranu, tekstu i zdjęć?

JPG a PNG: dobierz format do obrazu

JPG i JPEG to dwa rozszerzenia tego samego formatu. Przy zwykłym eksporcie zdjęć JPEG stosuje kompresję stratną: zmniejsza plik, odrzucając część informacji. PNG zapisuje dane obrazu bezstratnie i obsługuje przezroczystość. Dlatego PNG jest dobrym punktem wyjścia dla treści z wyraźnymi krawędziami, a JPG często sprawdza się w fotografii.

Kompresja bezstratna nie oznacza, że każda konwersja do PNG zachowuje wszystkie właściwości źródła. Zmiana rozmiaru, przetwarzanie koloru lub wcześniejszy eksport stratny mogły już zmienić piksele. Zapisanie takiego wyniku jako PNG nie przywróci brakujących szczegółów. Specyfikacja PNG opisuje kompresję bezstratną i przezroczystość tego formatu.

Dlaczego PNG zwykle lepiej nadaje się do zrzutów ekranu i tekstu

Zrzut ekranu często zawiera powtarzające się kolory, cienkie linie i ostre przejścia między literami a tłem. Istotne szczegóły są niewielkie: separator dziesiętny na wykresie, komunikat błędu lub cienki obrys przycisku. Stratny eksport JPEG może rozmyć te krawędzie albo stworzyć widoczne zniekształcenia wokół nich.

W zgłoszeniu do pomocy technicznej lub instrukcji krok po kroku czytelność jest ważniejsza niż niewielka oszczędność rozmiaru. Zrób zrzut w oryginalnej rozdzielczości, przytnij niepotrzebne obszary i zapisz kopię PNG. Nie zmniejszaj całego pulpitu tak mocno, że tekst staje się nieczytelny. Ciaśniejszy kadr ograniczy ilość danych, zachowując przydatny fragment w pierwotnym rozmiarze.

PNG to punkt wyjścia, a nie gwarancja małego pliku dla każdego zrzutu. Zrzut zdominowany przez zdjęcie, grę lub szczegółową mapę może być duży. Jeśli potrzebujesz mniejszego pliku, przetestuj JPG, ale sprawdź najmniejszy tekst, zamiast oceniać tylko fotografię. Jeśli tekst jest kluczowy, zachowaj PNG lub podziel materiał na czytelny zrzut i osobne zdjęcie.

Porównaj rzeczywiste eksporty, zanim założysz, że JPG będzie mniejszy. Ta nieprzezroczysta grafika z tekstem i liniami ma początkowo 109,2 kB. Kompresor na stronie głównej Pixilo tworzy PNG o rozmiarze 20,6 kB z niezmienionymi zdekodowanymi pikselami i wymiarami 960 × 640. Konwerter PNG na JPG utworzył z tego samego oryginału JPG o rozmiarze 47,0 kB przy jakości 80. JPG jest tu o około 128% większy od zoptymalizowanego PNG; wydaje się mniejszy tylko w porównaniu z niezoptymalizowanym źródłem.

Przesuwaj separator po literach i kolorowych krawędziach. Szukaj zmiękczonych kresek, delikatnych obwódek i zmian wokół linii o szerokości jednego piksela. Początkowy widok szczegółów powiększa piksele 2×; przełącz na cały obraz, aby ocenić czytelność w zwykłym rozmiarze. Jakość 80 to ustawienie kodera, a nie „80% oryginalnych szczegółów”. To jedna grafika, nie prognoza dla wszystkich zrzutów ekranu lub zdjęć.

Zoptymalizowany PNGJPG z Pixilo

Dlaczego JPG często lepiej sprawdza się w fotografii

Zdjęcia zawierają wiele subtelnych zmian koloru i jasności. Zachowanie wszystkich tych informacji w PNG może dać duży plik bez widocznej korzyści przy zwykłym udostępnianiu. Odpowiednio dobrany eksport JPG może być znacznie mniejszy i nadal wyglądać dobrze w rozmiarze, który zobaczy odbiorca.

Zanim mocniej obniżysz jakość, sprawdź twarze, włosy, liście i tkaniny. Zwróć też uwagę na gładkie niebo i ciemne tło. Wersja poprawna jako miniatura może wyglądać źle w galerii na całą szerokość. Dopasuj eksport do miejsca użycia, zamiast stosować jedną jakość dla wszystkich zdjęć.

Na stronach internetowych JPG i PNG nie są jedynymi możliwościami. Możesz też przetestować WebP lub AVIF, zachowując odpowiednią wersję zapasową. Poradnik AVIF czy WebP opisuje sposób porównania. Jeśli odbiorca wymaga JPEG, zgodność może być ważniejsza niż najmniejszy możliwy plik.

Poniższe zdjęcie gór stanowi praktyczny kontrprzykład dla grafiki. Oryginalny JPG ma 413,1 kB. Konwerter JPG na PNG Pixilo utworzył PNG o rozmiarze 4 113,8 kB; bezstratna optymalizacja na stronie głównej zmniejszyła go do 2 860,5 kB bez zmiany zdekodowanych pikseli. Oba formaty mają 1920 × 1440 pikseli. Nawet zoptymalizowany PNG jest około 6,9 razy większy od JPG, nie odzyskując szczegółów utraconych przy pierwotnej kompresji JPEG.

Co stanie się z przezroczystym tłem?

PNG może zachować przezroczyste obszary, a zwykły JPG nie. Konwersja przezroczystego logo lub wyciętego produktu na JPG wymaga jednolitego tła. Wybierz je przed konwersją, szczególnie gdy obraz trafi na ciemną stronę lub kolorowy slajd.

Narzędzie do zmiany koloru tła pozwala świadomie wybrać kolor. Następnie sprawdź krawędzie obiektu. Wycięcie przygotowane na białym tle może zawierać jasne piksele przy krawędziach, które staną się widoczne na czerni, nawet jeśli plik nadal jest przezroczysty.

Biały lub czarny podgląd nie dowodzi, że tło jest na stałe zapisane w PNG. Niektóre przeglądarki obrazów pokazują przezroczyste piksele na jednolitym kolorze. Zanim zmienisz plik, który może już być prawidłowy, przeczytaj poradnik rozwiązywania problemów z przezroczystością.

Jak przygotować obraz zawierający zdjęcie i tekst

Slajdy, grafiki do mediów społecznościowych i infografiki często łączą zdjęcie z podpisami. Zastanów się, jaka zmiana uczyniłaby obraz bezużytecznym. Lekko mniej ostra fotografia z czytelnymi podpisami może być odpowiednim JPG. Jeśli drobna liczba lub instrukcja staje się nieczytelna, oszczędność rozmiaru nie pomaga.

Porównaj obraz w docelowym rozmiarze i przy powiększeniu 100%. Sprawdź zwłaszcza kolorowe litery na kontrastowym tle i bardzo cienkie linie. Jeśli zarządzasz stroną, rozważ umieszczenie objaśnień jako zwykłego tekstu strony, zamiast zapisywania ich w zdjęciu. Ułatwia to czytanie, zaznaczanie i dopasowanie do różnych szerokości ekranu.

Dla logo i prostych diagramów istniejący plik SVG może być lepszym wyborem, ponieważ skaluje się bez widocznych pikseli. To inny proces: zamiana małego PNG na inny format rastrowy nie tworzy grafiki wektorowej. Przewodnik MDN po formatach obrazów przedstawia dostępne możliwości.

100% oznacza tutaj rzeczywisty rozmiar w przeglądarce obrazów: jeden piksel obrazu odpowiada jednemu pikselowi ekranu. Powiększenie strony w przeglądarce internetowej to osobne ustawienie.

Praktyczny sposób pracy z JPG i PNG w Pixilo

1. Zachowaj oryginał. Przygotuj osobną kopię do udostępnienia lub publikacji. Nadaj jej nazwę odróżniającą ją od źródła.
2. Przytnij przed zmniejszeniem. Dla zrzutów ekranu użyj przycinania obrazu, aby usunąć zbędną przestrzeń i zachować czytelne szczegóły.
3. Świadomie wybierz wymiary. Użyj zmiany rozmiaru obrazu, gdy źródło jest większe, niż potrzeba. Zachowaj proporcje i ponownie sprawdź tekst.
4. Konwertuj, gdy rozwiązuje to problem. Użyj PNG na JPG dla zdjęcia zapisanego jako PNG lub formularza przyjmującego tylko JPEG. Najpierw ustaw tło, jeśli przezroczystość jest istotna.
5. Dopasuj jakość i sprawdź wynik. Konwerter PNG na JPG ma suwak jakości. Oceń pobrany plik, zamiast zakładać, że domyślne ustawienie pasuje do treści.
6. Sprawdź miejsce docelowe. Otwórz lub prześlij kopię tam, gdzie będzie używana. Komunikator albo system publikacji może ponownie ją zmniejszyć lub skompresować.

Konwertery Pixilo z JPG na WebP, PNG na WebP, PNG na JPG i WebP na JPG oferują limit 4000 pikseli na dłuższym boku, domyślnie włączony. Sprawdź opcję zmiany rozmiaru: przy porównaniu samych formatów zachowaj identyczne wymiary w pikselach. Nie dotyczy to wszystkich konwerterów: JPG na PNG zachowuje wymiary w granicach dopuszczalnych danych wejściowych. Zachowaj oryginał osobno, jeśli potrzebujesz metadanych, informacji o kolorze lub pełnej rozdzielczości.

Co zrobić, jeśli PNG jest za duży?

Zacznij od usunięcia treści, której odbiorca nie potrzebuje. Przycięty komunikat błędu może być przydatniejszy niż zrzut całego ekranu. Następnie sprawdź wymagane wymiary. W przypadku zrzutu zbyt mocne zmniejszenie może zaszkodzić bardziej niż pozostawienie nieco większego pliku.

Przed zmianą formatu wypróbuj bezstratną optymalizację PNG. Może usprawnić zapis bez pogorszenia liter, jak pokazuje powyższa grafika. Oszczędność zależy od kodowania źródła; już zoptymalizowany PNG może prawie się nie zmniejszyć. Zachowanie PNG jest dobrym wynikiem, gdy jego rozmiar spełnia wymaganie.

Jeśli formularz ma ścisły limit rozmiaru, sprawdź też wymagany format i minimalne wymiary. Konwersja na JPG jest jedną z opcji, ale nie nadaje się do zachowania przezroczystości lub bardzo wyraźnych krawędzi tekstu. Poradnik zmniejszania obrazu do limitu rozmiaru wyjaśnia, jak pogodzić te wymagania.

Nie oceniaj efektywności wyłącznie po rozszerzeniu. Mały, prosty PNG może zajmować mniej miejsca niż JPG o tych samych wymiarach. Porównaj rzeczywiste eksporty z tego samego źródła i wybierz najmniejszy, który nadal spełnia swój cel.

Czy wybór JPG lub PNG wpływa na SEO obrazów?

Google obsługuje oba formaty. Wybieraj na podstawie czytelności, potrzeb związanych z ładowaniem i zgodności, zamiast oczekiwać poprawy pozycji dzięki rozszerzeniu. Użyj opisowej nazwy pliku, odpowiedniego tekstu alternatywnego i obrazu wspierającego treść strony. Zobacz wskazówki Google dotyczące SEO obrazów.

W instrukcjach ze zrzutami ekranu umieszczaj ważne wskazówki również w tekście strony. Tekst alternatywny powinien wyjaśniać cel obrazu; nie musi powtarzać wszystkich widocznych pozycji menu. Podpis może dodać kontekst, gdy jest potrzebny.

Najczęściej zadawane pytania

Czy zapisanie JPG jako PNG poprawi jakość?

Nie. PNG może zapisać odczytany obraz bez kolejnego etapu kompresji stratnej, ale nie przywróci informacji usuniętych przez wcześniejszą kompresję JPEG. Może jedynie stworzyć większy plik.

Czy każdy zrzut ekranu zapisywać jako PNG?

To dobry punkt wyjścia dla tekstu i elementów interfejsu. Jeśli na zrzucie dominuje zdjęcie, porównaj też JPG. Zachowaj wersję, która jest czytelna i pasuje do miejsca użycia.

Czy mogę wielokrotnie obniżać jakość JPG, aż zmieści się w limicie?

Każdą próbę twórz z oryginału, a nie z poprzedniej skompresowanej kopii. Kolejne eksporty stratne mogą kumulować widoczne uszkodzenia. Sprawdzaj także wymiary, nie tylko jakość.

Dlaczego mój PNG jest rozmyty, skoro kompresja jest bezstratna?

Obraz mógł zostać przeskalowany, zapisany w niskiej rozdzielczości lub utworzony z rozmytego źródła. Kompresja bezstratna zachowuje te piksele, ale nie poprawia ich ostrości.