Proč mobilu posíláme menší obrázek

Fotografie přes celou šířku velkého monitoru a stejná fotografie v kartě na telefonu by neměly být jeden a tentýž soubor. Když jsou, telefon stahuje pixely, které nikdy nezobrazí, a návštěvník čeká.

24. září 2026 jsme do práce s médii v CMS4 doplnili rozměry obrázků a nabídku jejich velikostí pro prohlížeč. Návštěvník tuto změnu nevidí jako novou funkci v menu. Pozná ji ve chvíli, kdy se stránka zobrazí a nic na ní neodskakuje. V říjnu na ni navázaly další kroky, které popisujeme níže.

Tři údaje, bez kterých prohlížeč hádá

Vhodný soubor si prohlížeč vybírá sám podle zobrazení a hustoty pixelů. Potřebuje k tomu ale podklady:

• Nabídku velikostí (srcset). CMS4 z nahrané fotografie připraví varianty v šířkách od 160 do 3840 pixelů, vždy nejvýš do šířky originálu.

• Místo na stránce (sizes). Kolik prostoru obrázek při dané šířce okna zabere. To ví jen komponenta, která obrázek vykresluje, proto tento údaj dodává ona.

• Rozměry (width a height). Z nich prohlížeč zná poměr stran dřív, než soubor dorazí.

Teprve společně dávají smysl. Připravit několik souborů nestačí, pokud prohlížeč neví, kolik prostoru obrázek skutečně zabere.

Místo rezervované předem

Šířka a výška umožní prohlížeči vyhradit prostor ještě před načtením obrázku. Text a tlačítka pak neposkočí, když fotografie dorazí. U galerie nebo seznamu projektů je to rozdíl, který člověk pocítí při běžném procházení.

Na webu P+P v CMS4 mají takto přesné rozměry i loga a ikony – celkem 302 obrázků. Rozměry tak má každý obrázek na všech 48 stránkách, a to bez jakékoli viditelné změny vzhledu.

Ořez, formát a hustota

Ořez mění počítání

Fotografie na šířku vložená do vysoké karty se ořízne, takže prohlížeč potřebuje větší soubor, než by napovídala šířka karty. U snímku 3 : 2 v dlaždici 4 : 5 je to zhruba 1,875krát víc. Komponenty v CMS4 proto mohou velikost odvodit z tvaru rámečku, do kterého se obrázek vykresluje. Ohnisko snímku se přitom do souboru natvrdo neukládá; určuje jen, která část zůstane při ořezu vidět.

Formát podle prohlížeče, hustota s rozumem

Stejná šířka může dorazit v různých formátech: jako AVIF či WebP, a prohlížečům, které moderní formáty nepřijímají, jako JPEG nebo PNG. Kvalitu komprese CMS4 hledá pro každý obrázek zvlášť podle měřítka vizuální podobnosti, ne jedním pevným nastavením pro všechny. Doručené varianty navíc neobsahují metadata EXIF, XMP ani ICC, takže s nimi neputují údaje, které fotoaparát do snímku zapsal.

Telefony s velmi jemným displejem by si jinak stahovaly obrázky pro trojnásobnou hustotu pixelů. To je asi 2,25krát víc pixelů než pro dvojnásobnou hustotu a rozdíl okem nepoznáte. Zveřejněné stránky proto hustotu omezují přibližně na dvojnásobek.

Co načíst hned a co počká

Hlavní obrázek viditelný po otevření stránky musí dorazit včas, galerie hluboko pod ním může počkat, až se k ní návštěvník přiblíží. CMS4 proto rozlišuje tři situace: hlavní obrázek stránky se načítá přednostně, další obrázky v první obrazovce hned a všechny ostatní líně.

Na takové detaily dohlíží i náhled stránky v CMS4. Kdyby měl hlavní obrázek zadáno současně „načti líně“ i „načti přednostně“, náhled tento rozpor autorovi ohlásí – stejně jako obrázek bez rozměrů nebo bez alternativního textu.

Správně připravený obrázek má zachovat to podstatné z fotografie a přitom nenechat návštěvníka zbytečně čekat.

Kontrola před zveřejněním

Kontrola se dělá na konkrétní stránce a při různých šířkách, ne podle velikosti souboru. Před zveřejněním si projděte:

• Je jako přednostní označený hlavní obrázek – a jen ten jeden?

• Zachovává ořez to podstatné na telefonu i na širokém monitoru?

• Má každý obrázek popis ve všech jazycích webu?

• Hlásí náhled stránky nějaký obrázek bez rozměrů?

• Jak se stránka zobrazí a načte při několika šířkách okna?

Jak CMS4 pracuje s knihovnou médií a výkonem, shrnujeme na stránce Média a výkon.