Wybierz według zadania, które ma wykonać obraz
Zacznij od zasobu, nie od rozszerzenia. Fotografia to zawartość o ciągłych tonach, więc pewne straty mogą być akceptowalne przy rozmiarze, w jakim jest wyświetlana. Zrzut ekranu, wykres, logo lub rysunek wektorowy ma ostre krawędzie i tekst, gdzie artefakty są dobrze widoczne. Zachowaj je przy wyjściu bezstratnym lub poddaj ścisłej akceptacji. Użyj SVG dla logosu lub diagramu wektorowego, gdy jest dostępny.
Następnie zidentyfikuj wymagane możliwości. Alfa oznacza przezroczystość per-piksel. Animacja to sekwencja klatek. Wymagane pokrycie przeglądarek, wolumen publikacji i czas budowania to ograniczenia dostawy, które mogą przesłonić korzyści z mniejszego formatu.
Najpierw testuj lossy AVIF i WebP. Trzymaj JPEG dostępny, gdy potrzebny jest szeroko kompatybilny nieprzezroczysty fallback.
Zachowaj źródło bezstratne. Porównaj PNG z bezstratnym WebP lub AVIF w rzeczywistej skali wyświetlania przed wyborem.
Użyj AVIF, WebP lub PNG; nie wybieraj JPEG, ponieważ nie obsługuje kanału alfa.
Zrozum, co każdy format wnosi
AVIF przechowuje obrazy kodowane AV1 w formacie opartym na HEIF. Specyfikacja obejmuje obrazy pojedyncze, sekwencje obrazów i elementy obrazu z alfą. Obsługuje kompresję stratną i bezstratną, przezroczystość oraz animację. Oszczędności nie są stałe: źródło, enkoder, szybkość, docelowa jakość i metadane wpływają na wynik.
WebP obsługuje tryby stratny i bezstratny, przezroczystość i animację. JPEG to stratny format dla obrazów statycznych o bardzo szerokim, historycznym wsparciu, przydatny jako fallback dla nieprzezroczystych fotografii. PNG jest bezstratny z obsługą alfa, co czyni go solidnym fallbackiem dla dokładnej grafiki, choć PNG fotograficzny jest często nieefektywny. Zwykły PNG jest statyczny; przy animacji przetestuj osobny format animacji.
Warto rozważyć go dla wysoko wartościowych obrazów rastrowych, gdzie mniejsze transfery mogą uzasadnić dodatkowe prace encodera i fallback.
Przydatny jako nowoczesna, ogólnego przeznaczenia opcja rastrowa, obejmująca przezroczystość i sekwencje animowane.
Używaj jako fallback dla nieprzezroczystych fotografii, nie do logotypów czy wycięć z przezroczystością.
Użyj do bezstratnego, przezroczystego rastrowego fallbacka i tam, gdzie fidelita pikseli jest ważniejsza niż minimalne bajty.
Zbuduj ścieżkę zapasową zamiast stawiać na jeden format
Element <picture> pozwala przeglądarce ocenić alternatywy. Umieść AVIF jako pierwsze źródło, potem WebP, a następnie element <img> jako fallback w JPEG lub PNG, z odpowiednim typem MIME. Przeglądarka pominie źródło, którego nie obsługuje, i skorzysta z fallbacku, gdy żadne źródło nie będzie używalne. Zachowaj ten sam sensowny tekst alternatywny, chyba że zamierzasz celowo zmienić crop.
Fallback formatu nie zastępuje responsywnego doboru rozmiaru. Dostarcz kandydatów bazujących na szerokości i szczery atrybut sizes, gdy slot jest zmienny. Uwzględnij width i height, aby przeglądarka mogła zarezerwować miejsce. Mały plik w formacie o nadmiernych wymiarach pikselowych nadal marnuje bajty.
Najpierw AVIF, drugie WebP, potem JPEG dla nieprzezroczystych zdjęć lub PNG, gdy fallback wymaga przezroczystości albo bezstratnych krawędzi.
Jeśli serwer wybiera formaty na podstawie możliwości żądania zamiast markupu picture, skonfiguruj poprawną wariację cache i przetestuj, czy każdy klient otrzymuje dekodowalną reprezentację.
Użyj klienta bez preferowanego dekodera lub celowo wyłącz źródło na stagingu; potwierdź, że obraz, wymiary i tekst alternatywny pozostają poprawne.
Budżetuj czas enkodowania i chroń jakość wizualną
Nowoczesna kompresja przenosi pracę do etapu enkodowania. Referencyjny enkoder AVIF oferuje zakres szybkości od 0 (najwolniejszy) do 10 (najszybszy); WebP również wymienia więcej pracy enkodera na czas, rozmiar wyjściowy i jakość. Traktuj wsadową rekompresję lub transformację on‑demand jako decyzję operacyjną, a nie darmową zmianę ustawień.
Ustaw powtarzalną politykę według klasy zasobu i przeglądaj oryginały przy typowych rozmiarach wyświetlania. Oceń twarze, gradienty, tekst, krawędzie i granice przezroczystości. Zachowaj master i zapisuj wersję oraz ustawienia enkodera, aby defekt można było odtworzyć i przywrócić.
Szybsze enkodowanie zmniejsza presję budowania, ale może wygenerować większy plik lub mniej efektywną kompresję; przeprowadź benchmark na własnym zestawie źródeł.
Ocena lub preset nie zastąpi przeglądu wizualnego regionów obrazu, które mają znaczenie dla odwiedzających.
Zrób ze zmiany formatów obrazu praktykę poprawiającą niezawodność
Dla Status Is UP, optymalizacja obrazów jest proaktywną pracą uptime, gdy zapobiega wydaniu, które pogorszy krytyczną stronę. Zrób inwentaryzację krytycznych URLi obrazów, przetestuj reprezentatywną konwersję i zweryfikuj typ treści, zachowanie CDN oraz unieważnianie cache przed migracją na całą stronę.
Wdrażaj w odwracalnych partiach. Porównaj renderowanie i zachowanie transferu na kandydacie wydania, a potem zachowaj starą reprezentację aż do potwierdzenia nowej ścieżki. Jeśli transformacja lub reguła cache zawiedzie, przywróć znany dobry zasób. To kierunek dostawy odporny na błędy, a nie uniwersalny nakaz stosowania AVIF lub wielu formatów.
Priorytetyzuj obraz leadowy i obrazy treści, które wpływają na pierwszy użyteczny widok, a nie od razu cały archiwum.
Utrzymuj deterministyczne nazwy zasobów lub wersjonowaną mapę, aby poprzednia ścieżka JPEG, PNG lub WebP mogła zostać szybko przywrócona.