Dobierz format do zadania

Dla zdjęcia internetowego porównaj najpierw WebP i JPEG. Dla diagramu, zrzutu ekranu lub logo wymagającego dokładnych krawędzi zestaw PNG z alternatywą bezstratną. WebP obsługuje przezroczystość oraz kompresję stratną i bezstratną; JPEG nie zachowuje kanału alfa. Konkretny konwerter może jednak eksportować mniej funkcji, niż dopuszcza format. Przed próbami zachowaj nietknięty oryginał.

Najpierw wymiary, potem jakość

Obraz wyświetlany z szerokością 800 pikseli rzadko potrzebuje eksportu o szerokości 6000 pikseli w tym samym miejscu. Ustal wielkość wyświetlania i ostrość potrzebną na ekranach o dużej gęstości, a potem zmień rozmiar, zachowując proporcje. Kadrowanie zmienia kompozycję, skalowanie — wymiary. Do powiększenia produktu przygotuj osobny większy obraz. Nie rozciągaj małej miniatury do głównego zdjęcia.

Porównuj w rzeczywistym rozmiarze

Wypróbuj średnią jakość, obejrzyj wynik w docelowym rozmiarze i porównaj rzeczywistą wielkość plików. Przyjrzyj się literom, włosom, drobnym tkaninom i płynnym gradientom: szybko ujawniają błędy kompresji. Wartość jakości 80 nie oznacza takiego samego wyglądu w każdym koderze. Nie obiecuj stałej redukcji procentowej: wydajny plik może zmaleć niewiele lub nawet urosnąć.

Sprawdź przezroczystość, obrót i animację

Przezroczysta grafika wymaga formatu zachowującego kanał alfa. Przy eksporcie JPEG świadomie wybierz kolor tła, aby uniknąć przypadkowych czarnych krawędzi. Otwórz zapisany plik ponownie i sprawdź orientację oraz kolory. Konwerter nieruchomych obrazów może zachować tylko jedną klatkę animacji; podczas eksportu mogą też zniknąć metadane. Zachowaj oryginał, jeśli te cechy są istotne.

Stosuj powtarzalny proces

Przygotuj kadr, zmień rozmiar raz, wyeksportuj dwa formaty i wybierz mniejszy wynik o akceptowalnej jakości. Nadaj sensowną nazwę i dodaj tekst alternatywny opisujący rolę obrazu. Sprawdź gotową stronę na telefonie i komputerze. To zalecenie redakcyjne, nie test wydajności konkretnego kodera: najważniejszy jest wynik otrzymany przez odbiorcę.

Materiał redakcyjny oparty na źródłach wymienionych poniżej.

developers.google.com · developer.mozilla.org