Proč je responsive design kritický pro váš byznys
Mobilní uživatelé čekají 3 sekundy na načtení stránky. Pokud se to nestane, jdou pryč.
Optimalizace obrázků a mediálních prvků pro mobil
Obrázky zpomalují mobilní stránky. Naučte se techniky (WebP, lazy loading, srcset), které udrží rychlost i na pomalém internetu.
01
Proč jsou obrázky největší problém
Víte, co zpomaluje mobilní stránky víc než cokoli jiného? Obrázky. Často reprezentují 50–80 procent dat, která se na stránce načítají. To znamená, že když se uživatel připojí přes 4G nebo horší, čeká. A čekání není zrovna ideální.
Měření Google PageSpeed Insights vám jasně řekne: pokud jsou obrázky neuoptimalizované, vaše skóre padá dolů. Není to jen o čísle. Je to o skutečné uživatelské zkušenosti — lidé, kteří čekají na obsah, prostě odejdou.
02
Vyberte správný formát — WebP je budoucnost
JPEG funguje, PNG taky, ale WebP? To je něco jiného. WebP formát ušetří vám 25–35 procent velikosti souboru bez viditelné ztráty kvality. Není to kouzlo, je to prostě moderní kompresi, kterou navrhla Google.
Ale pozor — ne všechny starší prohlížeče WebP podporují. Řešení? Použijte prvek
<picture>
s fallbackem. Moderní prohlížeče dostanou WebP, starší zařízení dostanou JPEG. Všichni jsou spokojení.
- WebP: nejmenší soubory, nejlepší poměr
- JPEG: stále standard pro fotografie
- PNG: pro grafiku s transparencí
- SVG: ikony a loga — vždy scalovatelné
Na co si dávat pozor
Optimalizace obrázků není jednorazový proces. Jakmile přidáte nový obsah, je potřeba stejné pravidlo — nejdřív optimalizace, pak nahrání. Měřte vždy skrze nástroje jako Google PageSpeed nebo WebPageTest. Čísla vám řeknou pravdu.
03
Lazy loading — načítej až když je potřeba
Představte si stránku s dvaceti fotkami. Uživatel vidí jen tři z nich — a vy načítáte všech dvacet? To je marnotratné. Lazy loading (opožděné načítání) řeší tenhle problém jednoduchým pravidlem: načítej obrázky jen když se objeví v okně prohlížeče.
V HTML je to hřích jednoduchý. Stačí přidat atribut
loading="lazy"
k tagu
<img>
. Moderní prohlížeče to chápou nativně. Starší? Na ty existují JavaScript knihovny jako Intersection Observer.
04
Srcset a sizes — správná velikost pro každé zařízení
Mobilní telefon a desktop nemají stejnou šířku obrazovky. Proč by měly načítat stejný obrázek? Atributy
srcset
a
sizes
říkají prohlížeči: „Tady máš tři verze — vyber tu správnou pro tvou velikost.”
Prakticky? Telefon dostane 600px verzi, tablet 1000px, desktop 1600px. Každá je optimalizovaná pro svůj účel. Uživatelé jsou rychlejší, vy šetříte bandширinu. Win-win situace.
Tip:
Vytvářejte minimálně 3 velikosti — mobile, tablet, desktop. Nikdy více než 5.
05
Nástroje, které skutečně fungují
Nemusíte si hrát na Einsteina. Existují nástroje, které práci udělají za vás. Tady jsou ty, co opravdu stojí za čas:
TinyPNG / TinyJPG
Nahrajte obrázky, získejte menší verze. Bez zbytečných věcí, bez účtu. Funguje hladce a výsledky jsou vidět.
Google PageSpeed Insights
Vložte URL a dostanete jasný report. Ukazuje vám přesně co zlepšit — a ano, obrázky budou mít hvězdičku.
ImageOptim (Mac) / FileOptimizer (Win)
Desktop aplikace. Přetáhni obrázky, klikni, čekej. Jsou menší. Takhle to má být.
Squoosh (Google)
Online editor s živým náhledem. Vidíte jak obrázek vypadá při různých úrovních komprese. Není v tom tajnosti.
Závěr — začněte dnes
Optimalizace obrázků není složitá věda. Je to kombinace tří věcí: správný formát (WebP), správná velikost (srcset), správné načítání (lazy loading). Každá z nich ušetří vám bandšířinu a uživatelům čas.
Začněte malým krokem. Vezměte si tři fotky ze své stránky, zkuste je zpracovat přes TinyPNG, a změřte výsledek. Uvidíte rozdíl. Pak pokračujte dál.
Chcete si všechno připomínat?
Každá optimalizace začíná měřením. Pokud si nejste jistí, kde vaše stránka stojí, zkuste PageSpeed Insights. Je to zdarma a upřímný.
Napište nám, pokud máte dotazySouvisející články
