Stan obrazów webowych w 2026

Obrazy stanowią ponad 50% średniej wagi strony internetowej. Mimo to, większość deweloperów nadal serwuje JPEG i PNG — formaty zaprojektowane w latach 90. Tymczasem AVIF jest wspierany przez każdą większą przeglądarkę od 2023 roku.

Czym jest AVIF?

AVIF (AV1 Image File Format) to format obrazu oparty na kodeku wideo AV1, opracowany przez Alliance for Open Media — konsorcjum obejmujące Google, Apple, Mozilla, Netflix i Amazon.

W przeciwieństwie do JPEG, który kompresuje obrazy w blokach 8x8 pikseli (powodując widoczne artefakty przy niskiej jakości), AVIF używa partycjonowania bloków o zmiennym rozmiarze. Analizuje zawartość obrazu i wybiera optymalny rozmiar bloku dla każdego regionu.

Kluczowe zalety techniczne:

• 10-bitowa i 12-bitowa głębia kolorów — koniec z bandingiem w gradientach
• Wsparcie HDR — szeroka gama kolorów (BT.2020)
• Kanał alfa — wsparcie przezroczystości (w przeciwieństwie do JPEG)
• Tryb bezstratny — gdy potrzebujesz idealnej jakości pikseli

Kiedy AVIF wygrywa ze wszystkim

Fotografie i złożone obrazy — tu ~50% oszczędności względem JPEG mają największe znaczenie. Obraz hero 500KB staje się 250KB przy identycznej postrzeganej jakości.

Zdjęcia produktów e-commerce — czyste tła ze szczegółowymi obiektami. AVIF lepiej radzi sobie z kontrastem między płaskimi a złożonymi regionami niż jakikolwiek inny format.

Miniatury i karty social media — przy bardzo małych rozmiarach plików (poniżej 30KB) AVIF zachowuje ostrość tam, gdzie JPEG zamienia się w klockowaty bałagan.

Kiedy zostać przy innych formatach

• Proste ikony/loga — PNG lub SVG wygrywa. Narzut enkodera AVIF nie jest wart 2KB ikony.
• Animowane obrazy — AVIF wspiera animacje, ale implementacja w przeglądarkach jest niespójna. Użyj WebP lub wideo.
• Szybkość kodowania ma znaczenie — kodowanie AVIF jest 10-20x wolniejsze niż JPEG. Przy uploadach użytkowników koduj w zadaniu w tle.

Serwowanie AVIF z fallbackiem

Nigdy nie serwuj AVIF bez fallbacku. Element <picture> obsługuje to natywnie:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Opis">
</picture>

Przeglądarka wybiera pierwszy obsługiwany format. Bez JavaScriptu.

Konwersja bez uploadu

Większość konwerterów online wymaga wrzucenia plików. Jeśli pracujesz z treścią chronioną NDA — to ryzyko. Konwersja po stronie klienta jest możliwa dzięki WebAssembly.

Wbudowałem to w FormattedAI — darmowe narzędzie konwertujące obrazy do AVIF bezpośrednio w przeglądarce. Twoje pliki nigdy nie opuszczają urządzenia.

Optymalne ustawienia jakości

Po przetestowaniu setek obrazów:

• Obrazy hero, fotografia — jakość 75-80 (~45% oszczędności vs JPEG)
• Obrazy w treści bloga — jakość 60-70 (~55% oszczędności)
• Miniatury, karty — jakość 50-60 (~60% oszczędności)
• Tekstury w tle — jakość 40-50 (~70% oszczędności)

Optymalny punkt dla większości obrazów to jakość 65-75.

Po stronie serwera z Sharp

Dla pipeline Node.js, Sharp jest najszybszą opcją:

import sharp from "sharp";

await sharp("input.jpg")
  .avif({ quality: 75 })
  .toFile("output.avif");

Przetwarza obraz 4000x3000 w poniżej 500ms — 10x szybciej niż enkodery WASM.

Realny wpływ na wydajność

Zamiana JPEG na AVIF na prawdziwej stronie:

• Całkowita waga obrazów: 2.4 MB do 1.1 MB (-54%)
• LCP: 2.1s do 1.4s (-33%)
• Ładowanie strony na 3G: 8.2s do 5.1s (-38%)

Poprawa LCP bezpośrednio wpływa na SEO — Google używa Core Web Vitals jako sygnału rankingowego.

Checklista

1. Zaudytuj swoje największe obrazy (hero, zdjęcia produktów)
2. Skonfiguruj konwersję — Sharp po stronie serwera lub FormattedAI do ręcznej konwersji wsadowej
3. Użyj <picture> z fallbackami AVIF, WebP, JPEG
4. Generuj blur placeholdery (32px base64) dla efektu blur-up
5. Ustaw nagłówki cache — max-age=31536000 dla niezmiennych assetów
6. Monitoruj Core Web Vitals po wdrożeniu