Převod obrázků na AVIF

Co je AVIF formát?

AVIF (AV1 Image File Format) je moderní obrazový formát založený na video kodeku AV1. Nabízí výrazně lepší kompresi než JPG nebo PNG při zachování vysoké kvality obrazu. Je to nástupce formátu WEBP.

Proč převádět obrázky na AVIF?

Nejlepší komprese

AVIF poskytuje o 50% menší soubory než JPG při stejné kvalitě a až o 30% menší než WEBP.

Vysoká kvalita

I při vysoké kompresi AVIF zachovává vynikající kvalitu obrazu bez viditelných artefaktů.

Moderní technologie

AVIF podporuje HDR, široký barevný gamut a průhlednost (alfa kanál).

Jak používat tento nástroj?

1. Zkontrolujte podporu prohlížeče - AVIF export vyžaduje moderní prohlížeč s plnou podporou
2. Nahrajte obrázky - Klikněte na tlačítko “Procházet soubory” nebo přetáhněte obrázky
3. Nastavte kvalitu - Vyberte úroveň kvality (70-90% doporučeno)
4. Automatický převod - Obrázky se automaticky převedou do AVIF formátu
5. Stažení - Stáhněte jednotlivé obrázky nebo všechny jako ZIP archiv

Podpora prohlížečů

Vytváření AVIF (Canvas export) je podporováno v:

• Chrome/Edge 94 a novější (říjen 2021+)
• Opera 80 a novější
• Firefox - zobrazení ANO, vytváření NE
• Safari - zobrazení od iOS 16/macOS Ventura, vytváření NE

Poznámka: Mnoho prohlížečů dokáže AVIF zobrazit, ale ne vytvářet. Pro tento nástroj potřebujete plnou podporu včetně exportu.

Podporované vstupní formáty

• JPG/JPEG - fotografický formát
• PNG - včetně průhlednosti
• WEBP - moderní formát od Google
• GIF - statické i animované obrázky
• BMP - základní bitmapový formát

Nastavení kvality

Kvalita AVIF určuje poměr mezi velikostí souboru a kvalitou obrazu:

• 80-90% - vysoká kvalita, doporučeno pro fotografie
• 70-80% - vyváženýpoměr velikost/kvalita
• 60-70% - menší soubory, stále dobrá kvalita
• Pod 60% - maximální komprese, viditelná ztráta kvality

Porovnání s ostatními formáty

Pro stejnou vizuální kvalitu:

• AVIF vs JPG - o 50% menší soubory
• AVIF vs PNG - o 60-80% menší soubory
• AVIF vs WEBP - o 20-30% menší soubory

Reálné porovnání velikostí

Fotografie 1920×1080 (Full HD)

Logo s průhledností 800×800

Produktová fotografie e-shopu 1000×1000

Závěr: AVIF je nejefektivnější moderní formát pro web.

Technické výhody AVIF

AV1 codec

AVIF je založen na video kodeku AV1:

• 🎥 Původně vyvinut pro 4K/8K streaming
• 🔬 Pokročilé kompresní algoritmy
• 📊 Lepší zachování detailů při nízké bitrate
• 🎨 10-bit a 12-bit barevná hloubka

High Dynamic Range (HDR)

Tradiční obrázky:  8-bit → 256 úrovní na kanál
AVIF HDR:         10-bit → 1024 úrovní na kanál
                  12-bit → 4096 úrovní na kanál

Praktický význam:

• 🌅 Lepší zobrazení sunset/sunrise fotografií
• 🎬 Zachování detailů v temných i světlých částech
• 📱 Využití HDR displejů (iPhone, high-end Android)

Široký barevný gamut

• sRGB - Standard pro web (menší paleta)
• DCI-P3 - Kinematografický standard (25% více barev)
• Rec. 2020 - Budoucí standard (75% více barev)

AVIF podporuje všechny tyto profily nativně.

Kdy použít AVIF

✅ Ideální scénáře

Moderní webové aplikace

• Progressive Web Apps (PWA)
• Single Page Applications (SPA)
• Nové projekty s moderními technologiemi

E-commerce platformy

• Produktové fotografie (velká úspora bandwidth)
• Galerie obrázků
• Zoom funkce

Portfolia a galerie

• Fotografická portfolia
• Umělecké galerie
• Prezentace vizuálních prací

High-traffic weby

• Kde každý KB bandwidth má hodnotu
• Weby s velkým objemem obrázků
• Globální publikum s různými rychlostmi připojení

⚠️ Nejisté scénáře

Starší audience

• Pokud vaše návštěvníci používají starší prohlížeče
• B2B weby s firemními klienty (často starší IE, Firefox)

E-mailové kampaně

• E-mailové klienty AVIF nepodporují
• Použijte JPG nebo PNG

Offline aplikace

• Software bez garantované podpory AVIF
• Desktop aplikace

❌ Kde AVIF nepoužívat

Profesionální tisk

• Tisková centra často AVIF nezvládají
• Použijte TIFF nebo PNG

Starý software

• Adobe Photoshop CS6 a starší
• GIMP bez pluginu
• Windows Photo Viewer

Legacy systémy

• Starší CMS bez AVIF podpory
• Systémy s pevnými požadavky na JPG/PNG

Implementace AVIF s fallbackem

Triple fallback strategie

<picture>
  <!-- 1. Priorita: AVIF (nejmenší, moderní prohlížeče) -->
  <source srcset="image.avif" type="image/avif">

  <!-- 2. Priorita: WEBP (střední velikost, široká podpora) -->
  <source srcset="image.webp" type="image/webp">

  <!-- 3. Fallback: JPG (největší, univerzální) -->
  <img src="image.jpg" alt="Popis" loading="lazy">
</picture>

Výsledek:

• Chrome/Edge 94+: načte AVIF (580 KB)
• Firefox/Safari 14+: načte WEBP (850 KB)
• Starší prohlížeče: načte JPG (1,2 MB)
• Všichni vidí obrázek ✅

CSS background s fallbackem

.hero {
  /* Základní fallback */
  background-image: url('hero.jpg');

  /* WEBP pro podporující prohlížeče */
  background-image:
    image-set(
      url('hero.webp') type('image/webp')
    );

  /* AVIF pro nejmodernější */
  background-image:
    image-set(
      url('hero.avif') type('image/avif'),
      url('hero.webp') type('image/webp'),
      url('hero.jpg')
    );
}

Server-side detection

// PHP příklad
$accept = $_SERVER['HTTP_ACCEPT'] ?? '';

if (str_contains($accept, 'image/avif')) {
    $imageUrl = '/images/photo.avif';
} elseif (str_contains($accept, 'image/webp')) {
    $imageUrl = '/images/photo.webp';
} else {
    $imageUrl = '/images/photo.jpg';
}

Aktuální podpora AVIF (2024)

Desktop prohlížeče

Mobilní zařízení

Globální pokrytí: ~80-85% uživatelů (2024)

Content Management systémy

• ✅ WordPress 6.5+ (2024) - Native AVIF upload
• ⚠️ WordPress <6.5 - Plugin potřebný
• ✅ Next.js - Automatická optimalizace
• ✅ Cloudflare - Auto-convert na AVIF
• ⚠️ Shopify - Omezená podpora

Konverzní nástroje a workflow

Online nástroje

1. Squoosh.app - Google nástroj s vizuálním porovnáním
2. Cloudconvert.com - Batch konverze
3. AVIF.io - Specializovaný AVIF konvertor

Command-line nástroje

# avifenc - Oficiální encoder
avifenc --min 20 --max 63 --speed 6 input.jpg output.avif

# Kvalita:
#   --min 0 --max 0   = Bezztrátová (huge file)
#   --min 20 --max 63 = Doporučená (balanced)
#   --min 40 --max 80 = Agresivní (small file)

# Rychlost:
#   --speed 0  = Nejlepší komprese (velmi pomalé)
#   --speed 6  = Doporučená (vyvážená)
#   --speed 10 = Nejrychlejší (horší komprese)

Automatizace pro build pipeline

// Next.js - automatická optimalizace
// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

// Sharp.js - Node.js knihovna
const sharp = require('sharp');

sharp('input.jpg')
  .avif({ quality: 80 })
  .toFile('output.avif');

Časté otázky (FAQ)

Pokročilé optimalizace

Progresivní AVIF

# Progresivní enkódování pro lepší UX
avifenc --progressive input.jpg output.avif

Obrázek se načítá postupně (rozmazaný → ostrý), podobně jako progressive JPG.

Různé kvality pro různá zařízení

<picture>
  <!-- Retina displeje: vyšší kvalita -->
  <source srcset="image-2x.avif 2x" type="image/avif">

  <!-- Normální displeje: standardní kvalita -->
  <source srcset="image.avif" type="image/avif">

  <img src="image.jpg" alt="Fallback">
</picture>

Responsive AVIF

<picture>
  <!-- Mobile: malý AVIF -->
  <source srcset="mobile.avif"
          media="(max-width: 768px)"
          type="image/avif">

  <!-- Desktop: velký AVIF -->
  <source srcset="desktop.avif" type="image/avif">

  <img src="fallback.jpg" alt="Responsive image">
</picture>

Vliv AVIF na Core Web Vitals

LCP (Largest Contentful Paint)

Před AVIF: Hero obrázek 1,2 MB načtení za 2,5s Po AVIF: Hero obrázek 580 KB načtení za 1,2s Zlepšení: 52% rychleji ✅

CLS (Cumulative Layout Shift)

Menší soubory = rychlejší načtení = méně layoutových posunů

FID (First Input Delay)

Rychlejší načtení obrázků = CPU volné dříve = rychlejší interaktivita

Budoucnost AVIF

AVIF vs JPEG XL

JPEG XL je konkurenční formát s:

• ✅ Ještě lepší bezztrátovou kompresí
• ✅ Zpětnou kompatibilitou s JPG
• ❌ Téměř žádnou podporou (kromě Safari)

Prognóza: AVIF má momentum, JPEG XL nejistý

AV2 codec

Nástupce AV1 (AV2) slibuje další 30% zlepšení komprese. Očekáváno 2025-2026.

Výhody tohoto nástroje

• 100% zdarma - bez registrace a omezení
• Ochrana soukromí - vše probíhá lokálně ve vašem prohlížeči
• Hromadné zpracování - převeďte více obrázků najednou
• Nastavitelná kvalita - kontrola nad poměrem velikost/kvalita
• Bez limitu velikosti - žádná omezení velikosti souborů
• Rychlé - okamžitá konverze bez nahrávání na server
• Nejmodernější formát - Nejlepší komprese na trhu
• SEO optimalizace - Core Web Vitals boost