Jak správně optimalizovat obrázky pro web v roce 2025

Obrázky zabírají v průměru 60 až 80 % celkové velikosti webové stránky. Jejich velikost tak může během několika sekund rozhodnout, zda návštěvník zůstane, nebo odejde. Pokud na načtení stránky čeká déle než tři sekundy, často ji opustí. Ukážeme vám proto, jak obrázky v roce 2025 správně optimalizovat.

Proč vůbec řešit optimalizaci obrázků

Možná si říkáte, že dnes má přece každý rychlý internet. Mobilní data ale fungují jinak než optické připojení doma. Core Web Vitals, zejména LCP (Largest Contentful Paint), vypovídají o rychlosti webu a ovlivňují také jeho hodnocení ve vyhledávání.

Obrázky tvoří 42 % všech největších prvků na stránkách, které měří právě LCP. Když má hlavní obrázek 5 MB, může návštěvník celé dvě sekundy vidět prázdnou stránku. To stačí k tomu, aby web zavřel.

Formáty: WebP a AVIF jsou nová norma

Zapomeňte na to, že JPEG a PNG stačí. V roce 2025 máte mnohem lepší možnosti.

WebP: spolehlivá volba

WebP od Googlu je spolehlivý formát. Oproti klasickému JPEGu ušetříte 25 až 35 % velikosti souboru při stejné vizuální kvalitě. Podporuje ho 95 % aktuálních prohlížečů, takže se nemusíte obávat, že se někomu obrázky nezobrazí.

Ideální pro:

• Fotografie produktů
• Hero sekce
• Galerie
• Blog obrázky

AVIF: ještě účinnější komprese

AVIF jde ještě dál: komprese je až o 50 % lepší než u JPEGu. Podpora v prohlížečích se pohybuje mezi 80 a 93 %, proto je vhodné nabídnout také záložní formát.

<picture>
  <source srcset="obrazek.avif" type="image/avif">
  <source srcset="obrazek.webp" type="image/webp">
  <img src="obrazek.jpg" alt="Popisek obrázku" width="1200" height="800">
</picture>

Tento záložní postup zajistí, že prohlížeč použije nejlepší formát, který podporuje. Pokud nepodporuje WebP ani AVIF, zobrazí klasický JPEG. Jde o jednoduché a spolehlivé řešení.

Co s PNG a SVG?

PNG používejte jen tam, kde potřebujete průhlednost nebo ostrou grafiku s textem. Pro vektorová loga a ikony je však SVG jednoznačně lepší volbou: lze ho zvětšit na jakoukoli velikost bez ztráty kvality a mívá mnohem menší soubor.

Rozměry: kolik pixelů stačí?

Obrázek o rozměrech 4000 x 3000 px zmenšený pomocí CSS na 400 x 300 px zůstává zbytečně velký. Prohlížeč totiž stále stáhne celý původní soubor.

Pravidla pro rok 2025:

• Hlavní obrázky přes celou šířku: maximálně 1920 px
• Obrázky v textu: 800 až 1200 px podle šířky obsahového bloku
• Open Graph (sociální sítě): 1200 x 630 px
• Displeje s vysokou hustotou pixelů: dvojnásobné rozměry, pokud jsou potřeba

Při použití moderních formátů jako WebP nebo AVIF si můžete dovolit vyšší rozlišení, protože účinnější komprese udrží velikost souboru níže.

Responzivní obrázky: správné použití srcset

Mobilní telefon nepotřebuje stahovat obrázek široký 1920 pixelů. Proto existuje srcset:

<img 
  srcset="
    obrazek-400.webp 400w,
    obrazek-800.webp 800w,
    obrazek-1200.webp 1200w,
    obrazek-1920.webp 1920w
  "
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 1200px"
  src="obrazek-1200.webp"
  alt="Popis obrázku"
  width="1200"
  height="800"
>

Prohlížeč si vybere vhodnou velikost podle šířky obrazovky a hustoty pixelů. Mobilní zařízení dostane menší soubor, počítač větší. Každé zařízení tak stáhne jen obrázek, který skutečně potřebuje.

Odložené načítání: obrázek stáhněte, až když je potřeba

Představte si stránku s patnácti obrázky. Návštěvník vidí jen první dva, ale prohlížeč stejně stáhne všech patnáct najednou. Zbytečně plýtváte přenosovou kapacitou a zpomalujete načítání.

Jak na to správně

<!-- Hlavní obrázek: načítej okamžitě -->
<img 
  src="hero.webp" 
  alt="Hlavní obrázek" 
  loading="eager"
  fetchpriority="high"
  width="1920" 
  height="1080"
>

<!-- Obrázky pod první obrazovkou: načítej odloženě -->
<img 
  src="galerie-01.webp" 
  alt="Fotka z galerie" 
  loading="lazy"
  width="800" 
  height="600"
>

Zlatá pravidla:

• Nikdy nepoužívejte odložené načítání pro hlavní obrázek ani jiný obsah viditelný hned po otevření stránky
• Odloženě načítejte pouze obrázky pod první obrazovkou (below the fold)
• Vždy nastavte width a height, jinak obrázky při načtení posouvají rozložení stránky a zhoršují metriku CLS

Moderní prohlížeče to umí nativně přes atribut loading="lazy", takže žádný JavaScript nepotřebujete.

Komprese: najděte správnou rovnováhu

Každý obrázek můžete zmenšit. Otázka je, jak moc to poznáte na kvalitě.

Nástroje pro kompresi:

• TinyPNG/TinyJPG - jednoduché webové rozhraní
• Squoosh - od Googlu, skvělé na porovnávání
• ImageOptim (Mac) - dávková optimalizace
• ShortPixel, Imagify - WordPress pluginy s automatickou konverzí

Obecné doporučení: kvalita 80-85 % je ideální poměr. Pod 70 % už to začíná být vidět, nad 90 % zbytečně nafukujete velikost souboru.

Core Web Vitals: metriky, na kterých záleží

Google hodnotí uživatelskou zkušenost pomocí tří hlavních metrik Core Web Vitals. Obrázky ovlivňují především LCP a CLS:

LCP (Largest Contentful Paint)

Měří, jak dlouho trvá, než se načte největší prvek na stránce, obvykle právě hlavní obrázek. Cílová hodnota je pod 2,5 sekundy.

Jak to zlepšit:

• 1. Použijte WebP nebo AVIF
• 2. Přednačtení kritických obrázků:
• 3. Komprimujte obrázky, aby byly pod 500 KB
• 4. Server s rychlou odezvou (pod 200 ms)
• 5. CDN pro doručování z geograficky blízkého serveru

CLS (Cumulative Layout Shift)

CLS zachycuje nepříjemné posouvání obsahu během načítání stránky. Dochází k němu mimo jiné tehdy, když obrázky nemají definované rozměry.

Řešení:

<img 
  src="obrazek.webp" 
  alt="Popis"
  width="1200" 
  height="800"
>

Nebo v CSS:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

CDN: obrázky blíž uživatelům

Content Delivery Network (CDN) kopíruje vaše obrázky na servery po celém světě. Když někdo navštíví web z Brna, dostane data ze serveru v Praze nebo Frankfurtu, ne z Kalifornie.

Možnosti:

• Cloudflare - integrované řešení s automatickou optimalizací
• Bunny CDN - levnější alternativa
• Cloudinary, Imgix - specializované image CDN s transformacemi za běhu

Kontrolní seznam: máte obrázky nastavené správně?

• Používáte WebP nebo AVIF (se záložním JPEGem nebo PNG)
• Hero obrázky mají loading="eager" a fetchpriority="high"
• Ostatní obrázky používají loading="lazy"
• Všechny obrázky mají definované width a height
• Responzivní obrázky přes srcset
• Komprese obrázků kolem 80-85 % kvality
• Maximální šířka 1920 px pro obrázky přes celou šířku
• Obrázky pod 500 KB
• Alt texty pro přístupnost a SEO
• CDN pro rychlé doručování

Testování: měřte, co optimalizujete

Teorie je fajn, ale musíte vědět, jestli to funguje:

• Google PageSpeed Insights - oficiální nástroj od Googlu
• GTmetrix - detailní analýza s vodopádovým diagramem
• WebPageTest - pokročilé testování z různých míst světa
• Chrome DevTools - Network tab vám ukáže velikost každého souboru

Testujte na počítači i na mobilu a kontroly pravidelně opakujte. Optimalizace není jednorázová akce.

Co to všechno znamená pro váš web

Pořádně optimalizované obrázky znamenají:

• Rychlejší web: méně než 3 sekundy na načtení
• Lepší pozice v Googlu: Core Web Vitals jsou faktorem hodnocení
• Nižší míru okamžitých odchodů: návštěvníci nečekají a neodcházejí
• Vyšší konverze: rychlý web návštěvníky méně brzdí
• Nižší náklady: menší soubory znamenají menší objem přenesených dat

V PIXLO tyto kroky provádíme automaticky u všech projektů. V roce 2025 už rychlost webu není bonusem, ale základem. Obrázky přitom patří mezi prvky, jejichž optimalizace má největší dopad.

Potřebujete pomoci s optimalizací webu? Napište nám a podíváme se, co váš web zpomaluje.