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

Obrázky zabírají v průměru 60-80 % celkové velikosti webové stránky. A přesně tady můžete získat nebo ztratit návštěvníky - doslova během vteřin. Když si člověk počká na načtení stránky víc než tři sekundy, prostě odejde. Proto vám ukážeme, jak na to v roce 2025.

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

Možná si říkáte: "No jo, ale dneska má přece každý rychlý internet." Jenže mobilní data fungují jinak než optika doma v obýváku. A Google to ví. Core Web Vitals - zejména LCP (Largest Contentful Paint) - dnes rozhodují nejen o rychlosti webu, ale i o tom, jak vás najdou ve vyhledávání.

Zajímavé číslo: obrázky tvoří 42 % všech největších prvků na stránce (těch, co měří právě LCP). Když máte hero obrázek o 5 MB, klidně se vám stane, že návštěvník vidí prázdnou stránku celé dvě vteřiny. To je dost na to, aby kliknul na křížek.

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 formát, který prostě funguje. Oproti klasickému JPEG ušetříte 25-35 % velikosti souboru při stejné vizuální kvalitě. Podporuje ho 95 % aktuálních prohlížečů, takže se nemusíte strachovat, že se někomu obrázky nezobrazí.

Ideální pro:

Fotografie produktů
Hero sekce
Galerie
Blog obrázky

AVIF - budoucnost je tady

AVIF jde ještě dál - komprese je až o 50 % lepší než u JPEG. To je zásadní rozdíl. Problém? Podpora v prohlížečích je "jen" na 80-93 %, což ale pořád není špatné.

html

<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>

Tahle fallback strategie zajistí, že prohlížeč vezme nejlepší formát, který umí, a když nic, zobrazí klasický JPEG. Jednoduchý, funkční, a hlavně bezpečný přístup.

Co s PNG a SVG?

PNG používejte jen tam, kde potřebujete průhlednost nebo ostrá loga s textem. Pro vektorová loga a ikony je ale SVG jednoznačně lepší volba - škáluje se do jakékoli velikosti bez ztráty kvality a váží mnohem míň.

Rozměry: kolik pixelů stačí?

Není nic horšího než obrázek 4000x3000 px zmenšený pomocí CSS na 400x300 px. Prohlížeč stejně stáhne celý velký soubor.

Pravidla pro rok 2025:

Full-width hero obrázky: maximálně 1920 px na šířku
Obrázky v textu: 800-1200 px podle šířky containeru
Open Graph (sociální sítě): 1200x630 px
Retina displeje: 2x větší rozměry (ale ne vždycky nutné)

Když používáte moderní formáty jako WebP nebo AVIF, klidně můžete jít na vyšší rozlišení - komprese to zvládne.

Responzivní obrázky: srcset je váš kamarád

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

html

<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 její hustoty pixelů. Mobil dostane malý soubor, desktop velký. Výhodné pro obě strany.

Lazy loading: načítej, až je to 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ě

html

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

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

Zlatá pravidla:

NIKDY lazy loading na hero obrázek nebo cokoliv, co je vidět hned při načtení stránky
Lazy loading jen pro obrázky "pod čarou" (below the fold)
Vždy specifikujte width a height - jinak vám obrázky po načtení poskakují layout (což je hrozná věc pro CLS metriku)

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 měří rychlost webu přes tři hlavní metriky. Obrázky ovlivňují hlavně tuhle:

LCP (Largest Contentful Paint)

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

Jak to zlepšit:

1. Použijte WebP nebo AVIF
2. Preload pro kritické obrázky:
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)

Tohle je ten nepříjemný poskakující efekt, když se stránka načítá. Stává se to, když obrázky nemají definované rozměry.

Řešení:

html

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

Nebo v CSS:

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

Checklist: děláte to dobře?

Používáte WebP nebo AVIF (s JPEG/PNG fallbackem)
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 full-width
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 jak z počítače, tak z mobilu. A hlavně testujte pravidelně - 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 faktor hodnocení
Nižší míra okamžitých odchodů - návštěvníci nečekají a neodcházejí
Vyšší konverze - rychlý web = spokojenější zákazníci
Nižší náklady - menší soubory = méně bandwidth

V Pixlo tohle děláme automaticky u všech projektů. Proč? Protože v roce 2025 už rychlost webu není bonus - je to základ. A obrázky jsou přitom největší pákou, kterou máte k dispozici.

Potřebujete pomoct s optimalizací webu? V Pixlo víme, jak na to. Napište nám.