Jaki jest najlepszy format obrazu dla witryny?

„Najlepszy format” to niewłaściwe pytanie, dopóki nie wiadomo, czym jest dany obraz. Witryna zawiera kilka bardzo różnych rodzajów obrazów, a każdy z nich ma wyraźnie najlepszy format:

• Zdjęcia (produktów, ludzi, miejsc): format stratny. AVIF zapewnia najmniejsze pliki, WebP jest bezpiecznym, nowoczesnym wyborem domyślnym, a JPG to format zapasowy obsługiwany przez każdą przeglądarkę.
• Logo, ikony i ilustracje: SVG. To grafika wektorowa, dlatego zachowuje ostrość w każdym rozmiarze i na każdym ekranie, a plik jest zwykle bardzo mały. Formatu pikselowego używaj awaryjnie tylko wtedy, gdy platforma odrzuca SVG.
• Zrzuty ekranu, grafiki interfejsu i wszystko, co zawiera przezroczystość: PNG lub bezstratny WebP. Płaskie kolory i ostre krawędzie są dokładnie tym, co formaty bezstratne kompresują skutecznie.
• Krótkie animacje: animowany WebP lub AVIF zamiast GIF, który jest ograniczony do niewielkiej palety i tworzy znacznie większe pliki.
• Favicon: plik ICO, najlepiej wraz z wersją SVG lub PNG; zobacz jak utworzyć favicon z obrazu.

Klasycznym błędem jest zapisanie zdjęcia jako PNG. PNG przechowuje każdy piksel bezstratnie, co doskonale sprawdza się w przypadku logo, ale fatalnie w przypadku zdjęcia: plik staje się kilkukrotnie większy od JPG bez widocznej poprawy.

W przypadku zdjęć wybór zależy od tego, w jakim stopniu można polegać na nowszych przeglądarkach:

• AVIF kompresuje najskuteczniej: przy typowej jakości internetowej plik jest około 50% mniejszy niż JPEG i 20–30% mniejszy niż WebP, a w razie potrzeby obsługuje HDR oraz szeroką gamę kolorów. Chrome, Firefox i Safari wyświetlają ten format (Safari od wersji 16.4, w 2023 roku). Wadami są powolne kodowanie, zwłaszcza dużych obrazów, oraz ograniczona obsługa w oprogramowaniu komputerowym i starszych urządzeniach.
• WebP jest pragmatycznym wyborem domyślnym: pliki są 25–35% mniejsze niż JPEG przy tej samej jakości wizualnej, format obsługuje przezroczystość i jest wspierany przez każdą popularną przeglądarkę od 2020 roku. Niektóre aplikacje komputerowe i starsze narzędzia nadal nie potrafią go otworzyć, co ma znaczenie dla pliku przekazywanego projektantowi, ale nie dla pliku udostępnianego odwiedzającym.
• JPG jest uniwersalnym formatem zapasowym. To najmniej wydajny z tych trzech formatów, ale JPG zapisany z jakością około 75–82 jest zwykle nieodróżnialny od oryginału na ekranie, a wszystko w internecie potrafi go wyświetlić.

Najlepsza konfiguracja udostępnia AVIF przeglądarkom, które go obsługują, WebP pozostałym, a JPG zachowuje dla wszystkiego, co starsze. Jeśli wolisz wybrać jeden format, WebP z zapasowym JPG obejmuje praktycznie wszystkich użytkowników. Bezpośrednie porównania znajdziesz w WebP kontra AVIF oraz WebP kontra JPG; w przypadku grafik zamiast zdjęć zobacz PNG kontra JPG.

Gdy znasz już format docelowy, konwersja przebiega szybko i odbywa się wyłącznie na Twoim urządzeniu. Konwerter obrazów EditItAll działa w całości w przeglądarce:

1. Otwórz konwerter i przeciągnij do niego obrazy, pojedynczy plik albo zawartość całego folderu. Partie są przetwarzane razem.
2. Wybierz format wyjściowy: WebP lub AVIF dla zdjęć, PNG dla grafik wymagających przezroczystości. Dostępne są bezpośrednie ścieżki do typowych zadań: JPG na WebP, PNG na WebP, JPG na AVIF oraz PNG na AVIF.
3. Ustaw jakość. Nie ma pola rozmiaru docelowego, ponieważ rozmiar jest wynikiem. Przy każdym pliku widoczny jest rozmiar przed przetworzeniem i po nim, więc przesuwaj suwak, aż zarówno liczba, jak i obraz będą odpowiednie.
4. Pobierz wyniki osobno lub jako jeden plik ZIP.

Nic nie jest przesyłane; po wczytaniu strony możesz odłączyć internet i nadal konwertować. Metadane EXIF i GPS są usuwane z każdego wyeksportowanego obrazu, więc zdjęcie produktu nie ujawnia miejsca wykonania. Narzędzie jest bezpłatne, nie wymaga konta i nie dodaje znaku wodnego. Masz już właściwy format i potrzebujesz tylko mniejszego pliku? Przejdź bezpośrednio do kompresora obrazów. Jeśli platforma wymaga pikselowej wersji wektorowego logo, narzędzie SVG na PNG wyrenderuje je w dowolnie wybranym rozmiarze.

Warto wybrać odpowiedni format, ale trzy nawyki oszczędzają więcej bajtów, niż kiedykolwiek zapewni sama zmiana JPG na AVIF:

• Zmień rozmiar do wymiarów, w których rzeczywiście wyświetlasz obraz. Zdjęcie z aparatu jest wielokrotnie szersze niż miejsce zajmowane na stronie, a każdy dodatkowy piksel zostaje pobrany i odrzucony. Właśnie dlatego narzędzia do obrazów EditItAll mają opcjonalne ograniczenie maksymalnego wymiaru.
• Kompresuj jednokrotnie, korzystając z oryginału. Każdy zapis stratny usuwa trochę więcej szczegółów. Zachowaj oryginał, wyeksportuj z niego kopię internetową i nie zapisuj ponownie pliku JPG kolejno jako WebP, a potem jako AVIF.
• Udostępniaj nowoczesne formaty z formatem zapasowym. Najpierw oferuj AVIF lub WebP, a starszym przeglądarkom pozwól użyć JPG lub PNG, aby żaden odwiedzający nie zobaczył uszkodzonego obrazu.

Jeśli raport szybkości zaleca „wydajne kodowanie obrazów” lub „udostępnianie obrazów w formatach nowej generacji”, chodzi właśnie o tę decyzję: poradnik jak usunąć ostrzeżenie o wydajnym kodowaniu obrazów przeprowadzi Cię przez ten proces, a kompresowanie JPEG do internetu szczegółowo omawia suwak jakości. Więcej poradników o formatach znajdziesz w zbiorze konwertowanie obrazów.