Audyt obrazu AVIF

Konwertuj JPEG do AVIF tylko tam, gdzie strona przyspiesza

AVIF jest najbardziej przydatny jako audyt obrazu, nie jako uniwersalna opcja eksportu. Ten przewodnik pomaga wybrać zdjęcia JPEG warte AVIF, ustalić proces kontroli i uniknąć publikowania mniejszych, ale gorszych wizualnie plików.

Szybki werdykt

Konwertuj wyjątki, nie cały folder mediów

Najlepsza decyzja o JPEG do AVIF zaczyna się od wpływu na stronę. Konwertuj duże zdjęcia, które nadal spowalniają stronę po skalowaniu. Pozostaw miniaturki, zrzuty UI, diagramy i małe pliki na prostszej ścieżce.

Silny kandydat Duże fotograficzne zdjęcie LCP

Używaj AVIF, gdy zdjęcie hero lub landing nadal dominuje wagę po skalowaniu i eksporcie WebP.

Może Ważny, ale nie dominujący

Testuj AVIF tylko, jeśli obecny plik jest nadal znacząco ciężki lub strona ma wyraźny problem z szybkością.

Unikaj Małe, graficzne lub nieprzejrzane zasoby

Pomiń AVIF, gdy obraz jest mały, głównie UI, z dużą ilością tekstu lub nie możesz sprawdzić efektu przed publikacją.

Najpierw audyt obrazu

Zadaj te pytania przed wyborem AVIF

AVIF może być świetny, ale to nie magiczna naprawa. Format ma znaczenie dopiero po prawidłowym rozmiarze, przypisaniu roli i sprawdzeniu w rzeczywistym układzie strony.

Pytanie Dlaczego to ważne Akcja
Czy rozmiar wyświetlania jest już poprawny? AVIF nie naprawi obrazu 4000px wyświetlanego w 900px. Najpierw zmień rozmiar, potem porównaj formaty.
Czy ten obraz wpływa na LCP lub pierwsze wrażenie? Duże zdjęcia nad linią załadowania mają większy wpływ niż dekoracje głębiej na stronie. Priorytet dla zdjęć hero, landing i kampanii.
Czy zawartość to fotografia? AVIF sprawdza się głównie na zdjęciach, nie na płaskich grafikach UI czy logo. Używaj PNG, SVG lub WebP, gdy ważne są ostre krawędzie.
Czy możesz ocenić efekt w kontekście? AVIF może ukrywać artefakty, dopóki obraz nie znajdzie się w rzeczywistym układzie. Sprawdź szerokość mobilną, gradienty, twarze i kadrowanie.
Czy masz ścieżkę zapasową? Nie każde środowisko obsługuje nowoczesne formaty tak samo. Publikuj z markupem picture lub odpowiednikiem w frameworku.

Wybór kandydatów

Które obrazy JPEG są dobrymi kandydatami do AVIF?

Szukaj obrazów, gdzie mniejszy plik zmienia stronę, nie tylko menedżera plików. Najlepsi kandydaci to zwykle zdjęcia, ważne wizualnie i na tyle duże, by wpływać na postrzeganą szybkość ładowania.

Najlepszy kandydat

Zdjęcie hero LCP

Duże zdjęcie hero definiujące pierwszy widok i pozostające ciężkie po zmianie rozmiaru to najlepszy przypadek użycia AVIF.

Dobry kandydat

Zdjęcie kampanii na stronie docelowej

Zdjęcie kampanii lub produktu wymaga dodatkowej kontroli, gdy znajduje się wysoko na stronie i musi pozostać estetyczne.

Wybrany kandydat

Zdjęcie główne artykułu

Używaj AVIF, gdy obraz jest na tyle duży, że ma znaczenie, a nie tylko dlatego, że każdy obraz artykułu jest ponownie eksportowany.

Słaby kandydat

Zrzuty ekranu z dużą ilością tekstu

Zrzuty ekranu, UI, diagramy i ikony często tracą na czytelności tekstu zanim zyskają na kompresji AVIF.

Kontrola jakości

Nie kopiuj wartości jakości między narzędziami AVIF

Suwnice jakości AVIF nie są uniwersalne. Wartość dobra w jednym enkoderze może być zbyt miękka lub zbyt mocna w innym. Zacznij od domyślnej lub średniej jakości i oceniaj efekt na stronie.

Celem nie jest najmniejszy możliwy plik AVIF, lecz najmniejszy, który nadal wspiera stronę: wystarczająco czyste detale, akceptowalne gradienty, brak rozpraszającej utraty tekstury i widocznej zmiany koloru.

Kolejność kontroli
  1. Porównuj z przeskalowanym JPEG lub WebP, nie z oryginałem z aparatu.
  2. Sprawdź obraz w rozmiarze desktopowym i mobilnym.
  3. Sprawdź twarze, niebo, gradienty, cienie, drobną fakturę i kolory marki.
  4. Potwierdź, że plik faktycznie ładuje się na stronie, którą chcesz opublikować.

Tryby wizualnych błędów

Artefakty AVIF warte sprawdzenia przed publikacją

Dobry eksport AVIF może wyglądać świetnie. Zły może zawieść cicho: plik jest mniejszy, ale obraz wydaje się płaski, rozmyty lub zaszumiony tam, gdzie użytkownicy patrzą najpierw.

Pasma na niebie lub gradientach Gładkie tła mogą pokazywać stopniowanie przy zbyt silnej kompresji.
Skóra lub tekstura produktu przypominająca wosk Portrety i powierzchnie produktów mogą tracić naturalne detale, nawet jeśli plik wygląda na ostry na pierwszy rzut oka.
Rozmyte drobne detale Liście, tkaniny, włosy i drobne wzory mogą się rozmazywać, co daje wrażenie niższej jakości niż oszczędność bajtów.
Zmiana koloru lub kontrastu Zdjęcia kampanii i produktów wymagają kontroli kolorów zgodnych z marką po konwersji.
Błędy kadrowania i punktu ostrości Mniejszy plik nie jest zaletą, jeśli responsywne kadrowanie ukrywa kluczową część obrazu.

Dostawa

Publikuj AVIF z wersją zapasową, nie jako ślepy zamiennik

Dla ważnych obrazów na stronie utrzymuj dostawę prostą i przewidywalną. Używaj AVIF, gdy jest wspierany, zachowaj wersję zapasową WebP lub JPEG, ustaw szerokość i wysokość, nie pozwól przeglądarce późno odkrywać rozmiaru układu.

Wstępnie ładuj AVIF tylko, gdy jest prawdziwym obrazem LCP. Wstępne ładowanie każdego pliku może spowolnić stronę.

HTMLMarkup obrazka z zapasowym AVIF
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

Prywatność i kontrola

Trzymaj nieopublikowane zdjęcia kampanii z dala od losowych przesyłek

Duże zdjęcia JPEG często nie są neutralne. Mogą zawierać nieopublikowane produkty, prace klientów, wskazówki lokalizacji, materiały kampanii lub nazwy plików ujawniające kontekst. Przesyłanie ich do konwertera powinno być świadomą decyzją, nie domyślną.

Lokalny proces trzyma pliki źródłowe, nazwy i kroki kontroli blisko projektu. Przydaje się, gdy ta sama strona wymaga wielu eksportów, by uzyskać właściwą równowagę wizualną.

Praktyczny proces

Powtarzalny proces konwersji JPEG do AVIF bez tworzenia projektu dla każdego obrazu

  1. 01
    Zbieraj tylko ciężkie pliki

    Zacznij od krótkiej listy dużych zdjęć JPEG, które nadal mają znaczenie po normalnym skalowaniu i eksporcie WebP.

  2. 02
    Eksportuj warianty AVIF osobno

    Trzymaj pliki AVIF w osobnym folderze, by łatwo porównywać z oryginalnymi JPEG i standardowymi WebP.

  3. 03
    Sprawdź na rzeczywistej stronie

    Umieść kandydata w rzeczywistym komponencie lub szablonie i sprawdź widoczny efekt, nie tylko podgląd konwertera.

  4. 04
    Publikuj z markupem zapasowym

    Serwuj AVIF tam, gdzie jest wspierany, zachowując WebP lub JPEG jako wersję zapasową dla przewidywalności.

  5. 05
    Udokumentuj regułę

    Zapisz, które role obrazów mają AVIF, aby następna aktualizacja nie była zgadywanką.

Granica formatu

Używaj WebP jako podstawy, a AVIF jako rozszerzenia

Zdrowy proces ma zwykle domyślną i wyjątkową ścieżkę. WebP to standard dla zwykłych obrazów, bo jest praktyczny i szeroko wspierany. AVIF stosuje się, gdy duże zdjęcie nadal jest zbyt ciężkie.

Ta granica utrzymuje szybki proces artykułu, dając jednocześnie sposób na ratowanie obrazów dominujących wagę lub LCP.

Standardowe obrazy artykułów Używaj WebP, chyba że konkretny plik jest nadal zbyt ciężki.
Duże zdjęcie hero Wypróbuj AVIF po zmianie rozmiaru i porównaj efekt wizualny.
Zrzuty ekranu i UI Wybierz PNG lub WebP, gdy ważny jest tekst i ostre krawędzie.
Nieprzejrzane eksporty partii Nie publikuj AVIF na ślepo tylko dlatego, że folder jest mniejszy.

Lista kontrolna przed publikacją

Sprawdź to przed zastąpieniem JPEG przez AVIF

Obraz źródłowy został przeskalowany Plik AVIF jest bliski największemu wyświetlanemu rozmiarowi, nie oryginałowi z aparatu.
Strona używa AVIF Sprawdzenia sieci lub źródła strony potwierdzają, że nowy plik jest faktycznie serwowany.
Istnieje wersja zapasowa WebP lub JPEG pozostają dostępne dla wybranej ścieżki dostawy.
Jakość została sprawdzona Końcowa strona została sprawdzona pod kątem artefaktów na desktopie i mobilnych urządzeniach.
Metadane nadal mają sens Tekst alternatywny, obrazy Open Graph i odwołania JSON-LD nie zostały przypadkowo uszkodzone.
Oryginał jest zachowany Oryginalne JPEG pozostają dostępne do przyszłych przycięć, rozmiarów i ponownych eksportów.

Najczęściej zadawane pytania

Najczęściej zadawane pytania

Praktyczne odpowiedzi na decyzje o publikacji JPEG do AVIF