Obrazy na strony
Najlepszy format obrazów na stronę: JPG, PNG, WebP czy AVIF?
Wybierz format zdjęć, zrzutów ekranu i przezroczystej grafiki. Porównaj JPG, PNG, WebP i AVIF przed eksportem na stronę.
JPG, PNG, WebP i AVIF w skrócie
| Format | Przykładowe użycie | Ważna uwaga |
|---|---|---|
| JPG | Zdjęcia i kopie do publikacji o szerokiej zgodności | Brak przezroczystości; możliwa utrata detali |
| PNG | Zrzuty, ostra grafika rastrowa i przezroczyste źródła | Kompresja bezstratna; zdjęcia mogą być duże |
| WebP | Zdjęcia internetowe i przezroczysta grafika | Obsługuje zapis stratny i bezstratny; sprawdź ustawienia narzędzia |
| AVIF | Dalsza optymalizacja internetowa | Porównaj jakość, czas kodowania i obsługę |
Możliwości i zgodność opisuje dokumentacja formatów MDN. Obsługa formatu nie oznacza, że każdy edytor lub serwis przyjmie plik.
Co zachowuje kompresja stratna, a co bezstratna
Kodowanie stratne zmienia część informacji o pikselach, aby zmniejszyć plik. Zdjęcie może tolerować niewielką zmianę faktury, ale taka sama zmiana wokół litery może utrudnić jej odczytanie. Kompresja bezstratna zachowuje otrzymane dane pikseli. Zamiana już skompresowanego JPG na PNG nie odzyskuje szczegółów utraconych w JPG; może jedynie powiększyć plik.
WebP obsługuje oba tryby, co wyjaśnia dokumentacja WebP firmy Google. Sama nazwa formatu nie mówi, którego trybu użyto, a jakość 100 nie gwarantuje wyniku bezstratnego. Zachowaj najlepszy plik źródłowy i twórz z niego każdą wersję do publikacji, zamiast łączyć kolejne konwersje stratne. Różnicę opisuje poradnik o kompresji stratnej i bezstratnej.
Zdjęcia: porównaj WebP i AVIF z obecnym JPG
Zdjęcie gór poniżej przedstawia porównanie rzeczywistych eksportów z Pixilo. Dostarczony JPG ma 413,1 kB; Pixilo utworzyło WebP o rozmiarze 299,0 kB przy jakości 80 oraz AVIF o rozmiarze 275,7 kB z ustawieniem jakości 65. Wszystkie trzy obrazy mają 1920 × 1440 pikseli. WebP oszczędza około 28%, a AVIF około 33% względem tego JPG. W tym przykładzie AVIF jest około 8% mniejszy od WebP.
Są to pomiary całych plików uzyskanych z jednego, już skompresowanego JPG. Ustawienia jakości są właściwe dla danego formatu, a eksportów nie skalibrowano do identycznej jakości wizualnej. Traktuj je jako przykłady do oceny, a nie uniwersalny ranking. W porównaniu suwakiem szukaj wygładzonej faktury skał, obwódek na granicy gór i nieba oraz pasów w gładkim niebie. Najpierw oceń cały obraz w docelowym rozmiarze wyświetlania, a potem sprawdź podejrzane miejsca w widoku szczegółów.
Powtórz test na zdjęciu typowym dla swojej witryny: tkaninie w sklepie lub twarzy na stronie zespołu. Przygotuj oba warianty z tego samego źródła i w tych samych wymiarach: dla JPG użyj JPG na WebP oraz JPG na AVIF. Dla innych źródeł wybierz PNG na AVIF lub WebP na AVIF. Wybierz najmniejszą wersję z akceptowalnymi szczegółami; zachowanie oryginału też jest rozsądne, jeśli już spełnia wymagania. Przy dużej partii uwzględnij także czas konwersji.
Wyeksportowano w Pixilo z jakością 80. Wymiary bez zmian: 1920 × 1440 px. Przeciągnij separator lub użyj klawiszy strzałek. Ustawienia jakości zależą od formatu. Zdjęcie: Pexels.
Grafika: chroń krawędzie, tekst i przezroczystość
Tekst i diagramy szybko ujawniają uszkodzenia po kompresji: kolorowa obwódka wokół litery lub przerwana linia o grubości jednego piksela mogą mieć większe znaczenie niż drobna zmiana krajobrazu. Grafika poniżej porównuje PNG o rozmiarze 109,2 kB z eksportami JPG, WebP i AVIF z Pixilo, wszystkie w wymiarach 960 × 640 pikseli. AVIF ma tylko 6,4 kB, ale ta oszczędność pomaga wyłącznie wtedy, gdy najmniejsze napisy i linie pozostają wystarczająco wyraźne.
Zmieniaj format i oglądaj te same litery oraz kolorowe krawędzie w widoku szczegółów. Potem wróć do całego obrazu, aby ocenić zwykły rozmiar do czytania. To przykłady konwersji stratnych, a nie testy bezstratnego WebP czy AVIF. Jeśli zrzut dokumentuje cenę, komunikat błędu lub ustawienie programu, przedkładaj czytelny i wierny tekst nad najmniejszy plik. Zachowaj PNG, jeśli pozostałe wersje nie przechodzą tego testu.
Przezroczystość to osobny wymóg obok ostrości: PNG, WebP i AVIF ją obsługują, a JPG nie. Dla przezroczystego zdjęcia produktu wypróbuj PNG na WebP i sprawdź kontur oraz cień na jasnym i ciemnym tle. Przed eksportem JPG świadomie wybierz jednolite tło. Nieprzezroczysta grafika poniżej nie testuje przezroczystych krawędzi.
Jeśli logo istnieje jako SVG, zachowaj źródło wektorowe. Rasteryzacja tylko po to, by użyć kompresora, może odebrać zaletę ostrego skalowania. Narzędzia rastrowe Pixilo obsługują typy podane w każdym narzędziu. Przeczytaj przewodnik po SVG i PNG, aby zdecydować, kiedy zachować format wektorowy, a kiedy utworzyć kopię PNG.
Wyeksportowano w Pixilo z jakością 80. Wymiary bez zmian: 960 × 640 px. Przeciągnij separator lub użyj klawiszy strzałek. Ustawienia jakości zależą od formatu.
Ustal wymiary przed szukaniem najmniejszego pliku
Zaplanuj obraz według zajmowanego miejsca. Zdjęcie wyświetlane na szerokości 600 pikseli CSS może mieć wariant 1200 pikseli dla ekranu o dużej gęstości pikseli. To przykład do przetestowania, nie reguła. Powiększanie małego źródła nie odtwarza brakujących detali.
Podwojenie szerokości i wysokości daje czterokrotnie więcej pikseli. Rozmiar pliku nie musi wzrosnąć czterokrotnie, ale koder ma do zapisania więcej danych. Najpierw wybierz kadr i potrzebne wymiary, a potem porównuj formaty przy tych samych wymiarach, aby oddzielić korzyść zmniejszenia obrazu od zmiany formatu.
Witryna może dostarczać różne rozmiary dla różnych układów dzięki ustawieniom obrazów responsywnych, takim jak srcset i sizes. Przygotuj warianty narzędziem Zmień rozmiar obrazu i przeczytaj poradnik o obrazach responsywnych, aby zrozumieć ich dostarczanie. Unikaj jednego sztywnego limitu rozmiaru dla każdego obrazu: mała karta i szczegółowe powiększenie produktu służą różnym celom.
Sprawdź też sposób ładowania obrazu
Zarezerwuj miejsce, aby treść nie przeskakiwała po załadowaniu. Leniwe ładowanie może pasować do obrazów niżej, ale opóźnić główny widoczny obraz. Wskazówki LCP Google zalecają wczesne wykrywanie ważnego obrazu i unikanie lazy loading dla obrazu LCP.
Jeśli potrzebujesz formatu zapasowego, skonfiguruj go w kodzie lub CMS. W elemencie picture przeglądarka wybiera pierwsze źródło zgodne z obsługiwanymi formatami i pozostałymi warunkami; nie porównuje wszystkich plików, aby znaleźć najmniejszy. Umieść preferowany, przetestowany format jako pierwszy i zachowaj odpowiedni JPG lub PNG jako wariant zapasowy. Wybór opisuje poradnik picture w web.dev.
Sprawdź obraz faktycznie dostarczany przez opublikowaną stronę. CMS lub CDN obrazów może zmienić wymiary albo ponownie zakodować przesłany plik, więc odbiorcy mogą otrzymać inną wersję niż pobrana z Pixilo. Pixilo przygotowuje pliki; witryna steruje ich dostarczaniem. Sam mniejszy eksport nie naprawi opóźnionego żądania obrazu ani powolnej odpowiedzi serwera.
Kontrola przed publikacją
- Odbiorca akceptuje format, a rozszerzenie jest poprawne.
- Wymiary pasują do układu.
- Tekst, twarze i przezroczyste krawędzie wyglądają dobrze.
- Plik jest mniejszy albo zmiana rozwiązuje rzeczywisty problem zgodności.
- Strona działa na wąskim ekranie, a ważny obraz ładuje się wcześnie.
- Oryginał pozostał do przyszłej edycji.
Wybierz następny krok
Zacznij od narzędzia rozwiązującego znalezione ograniczenie.
Utwórz kopię WebPPrzejdź do zmniejszania plików →
ChatGPT
Grok
Google
Perplexity
Claude