Jak używać obrazów AVIF na stronie internetowej

Najważniejsze kroki

1. Wybierz obraz już używany na stronie i zachowaj oryginał.
2. Utwórz wersję AVIF i sprawdź jej jakość.
3. Dodaj AVIF do witryny w sposób obsługiwany przez system publikacji.
4. Sprawdź opublikowaną stronę na telefonie i komputerze.
5. Sprawdź żądania sieciowe w przeglądarce, aby ustalić, który plik obrazu jest pobierany.

Poniżej znajdziesz wskazówki dotyczące każdego z tych kroków.

Sprawdź, jak Twoja witryna obsługuje AVIF

System publikacji może przyjąć plik AVIF do biblioteki mediów, ale przetwarzać go inaczej niż JPG lub PNG. Sprawdź więc zarówno dodawanie pliku, jak i jego użycie na opublikowanej stronie.

Przeprowadź próbę z jednym obrazem:

• Czy biblioteka mediów przyjmuje plik?
• Czy obraz pojawia się w edytorze strony?
• Czy działa na opublikowanej stronie?
• Czy powstają potrzebne mniejsze wersje obrazu, jeśli system zazwyczaj je tworzy?

Usługa optymalizacji obrazów lub sieć CDN może już dostarczać Twoje obrazy w formacie AVIF. Sprawdź obecne działanie, zanim ręcznie zastąpisz pliki. Sam JPG w bibliotece mediów nie wskazuje, jaki format otrzymują odwiedzający.

Przygotuj obraz do próby

Wybierz obraz typowy dla Twojej witryny. Zdjęcie produktu, główny obraz artykułu lub grafika z przezroczystym tłem będzie lepszym przykładem niż przypadkowy plik testowy.

Użyj konwertera odpowiedniego dla formatu źródłowego:

• JPG → AVIF
• PNG → AVIF
• WebP → AVIF

Konwertery AVIF w Pixilo zachowują oryginalne wymiary w pikselach i stosują stałe ustawienie kompresji stratnej. Tworzą pojedynczy nieruchomy obraz. Nie zachowują animacji, oryginalnych informacji HDR ani metadanych.

Porównaj pobrany AVIF z oryginałem. Zwróć szczególną uwagę na czytelność tekstu, cienkie krawędzie, przejścia kolorów i przezroczyste obszary. Sprawdź też rozmiar pliku: konwersja nie zawsze go zmniejsza.

Jeśli jakość nie wystarcza lub plik staje się większy, zachowaj dotychczasową wersję. Zmiana formatu nie jest celem samym w sobie.

Dodaj AVIF za pomocą systemu publikacji

Jeśli korzystasz z kreatora stron lub systemu zarządzania treścią, dodaj AVIF do biblioteki mediów, a następnie wybierz go jako nowy obraz w odpowiednim elemencie strony.

Podczas próby nie zmieniaj rozmiaru wyświetlania ani kadrowania. Dzięki temu ocenisz zmianę formatu bez jednoczesnego zmieniania układu strony.

Przy zastępowaniu obrazu sprawdź:

• tekst alternatywny
• proporcje i kadrowanie
• ewentualny podpis i link
• układ na komputerach i urządzeniach mobilnych.

Zmiana rozszerzenia w adresie URL nie konwertuje obrazu. Opublikuj rzeczywisty plik AVIF lub użyj usługi, która wykonuje konwersję.

W razie potrzeby udostępnij inny format

Jeśli samodzielnie edytujesz HTML, możesz użyć elementu picture, aby oferować AVIF jako pierwszy wybór, a JPG jako wariant zastępczy.

W tym przykładzie oba pliki przedstawiają ten sam obraz o wymiarach 1200 × 800 pikseli. Dostosuj ścieżki, wymiary i tekst alternatywny do swojego obrazu.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <img
    src="/images/product.jpg"
    width="1200"
    height="800"
    alt="Niebieski plecak widziany z przodu">
</picture>

Przeglądarka obsługująca AVIF może wybrać wersję AVIF. Jeśli nie obsługuje wskazanego formatu, w tym przykładzie użyje JPG. Dla przezroczystego obrazu wybierz wariant zachowujący przezroczystość, na przykład PNG. Więcej informacji znajdziesz w dokumentacji MDN dotyczącej elementu picture.

Wariant zastępczy rozwiązuje problem braku obsługi formatu. Nie naprawia automatycznie błędnego adresu AVIF ani uszkodzonego pliku.

Jeśli system publikacji automatycznie zarządza alternatywnymi formatami, skorzystaj z jego wbudowanej funkcji.

Sprawdź, który obraz pobiera przeglądarka

To, że obraz jest widoczny na stronie, nie dowodzi jeszcze użycia AVIF. Przeglądarka może pobierać stary obraz, mniejszy wariant lub plik utworzony przez usługę optymalizacji.

W Chrome możesz to sprawdzić za pomocą narzędzi deweloperskich:

1. Otwórz opublikowaną stronę i narzędzia deweloperskie.
2. Wybierz kartę Network i filtr Img.
3. Włącz Disable cache i przeładuj stronę, pozostawiając narzędzia otwarte.
4. Otwórz żądanie dotyczące sprawdzanego obrazu.
5. Sprawdź adres URL i nagłówek odpowiedzi Content-Type. Dla AVIF jest to image/avif.

Rozszerzenie nie jest jedyną wskazówką: usługa optymalizacji może dostarczać AVIF z adresu kończącego się na .jpg. Panel Network pozwala też sprawdzić rozmiar przesłanego pliku. Szczegóły opisano w poradniku Chrome dotyczącym sprawdzania żądań sieciowych.

Jeśli strona używa oddzielnego obrazu na urządzeniach mobilnych lub kilku rozmiarów, sprawdź również ich żądania.

Sprawdź opublikowaną stronę przed zmianą kolejnych obrazów

Oceń obraz tam, gdzie jest rzeczywiście używany. Podgląd w bibliotece mediów nie pokazuje kadrowania na telefonie, wpływu tła strony ani tego, czy pobierana jest właściwa wersja.

Upewnij się, że:

• cały obraz jest widoczny lub kadrowanie jest zamierzone
• tekst i ważne szczegóły pozostają wystarczająco wyraźne
• przezroczystość działa poprawnie na tle strony
• miejsce zarezerwowane na obraz i układ strony pozostają prawidłowe
• przeglądarka pobiera oczekiwany plik.

Porównuj ładowanie przed i po zmianie na tej samej stronie, przy tym samym rozmiarze okna i ustawieniach testu. Jedno szybsze ładowanie nie dowodzi trwałej poprawy. Zmniejszenie pliku łatwiej potwierdzić, gdy obrazy mają te same wymiary i akceptowalną jakość.

Jeśli obraz AVIF się nie wyświetla

Najpierw sprawdź, czy bezpośredni adres obrazu otwiera się w przeglądarce. Jeśli nie działa, sprawdź położenie pliku i komunikaty błędów systemu publikacji.

Jeśli obraz działa bezpośrednio, ale strona pokazuje starą wersję, sprawdź adres elementu obrazu, pozostałe rozmiary i pamięć podręczną witryny. Pominięcie pamięci podręcznej przeglądarki nie czyści pamięci podręcznej systemu publikacji ani CDN.

Jeśli przyczyna nadal jest niejasna, przywróć działający oryginał w tym elemencie i sprawdź obsługę AVIF przed kolejną próbą.

Najczęstsze pytania

Czy trzeba zastąpić wszystkie obrazy na stronie formatem AVIF?

Nie. Zastępuj obrazy wtedy, gdy plik staje się odczuwalnie mniejszy, a wynik działa w systemie publikacji z akceptowalną jakością.

Czy wystarczy dodać AVIF do biblioteki mediów?

Nie. Musisz też wybrać obraz na stronie. Sprawdź żądania sieciowe opublikowanej strony, aby zobaczyć, który plik jest pobierany.

Czy AVIF zawsze wymaga obrazu zastępczego?

To zależy od przeglądarek odwiedzających i sposobu publikowania obrazów. Inny format jest przydatny w środowiskach, w których AVIF nie działa.

Dlaczego nowy AVIF nie zmniejsza pliku pobieranego przez stronę?

Strona może nadal używać starego obrazu lub innej wersji wygenerowanej przez system publikacji. Sam AVIF również może być większy. Sprawdź rzeczywiste żądanie i porównaj pliki o tych samych wymiarach w pikselach.

Podsumuj za pomocąChatGPT (otwiera się w nowej karcie)Grok (otwiera się w nowej karcie)Google (otwiera się w nowej karcie)Perplexity (otwiera się w nowej karcie)Claude (otwiera się w nowej karcie)