Jak optimalizovat obrázky a fotografie pro web

Obrázky jsou na moderním webu nezbytné. Dělají web vizuálně atraktivní, pomáhají vysvětlit nabídku a budují důvěru. Problém je, že neoptimalizované obrázky často tvoří až 70 % celkové velikosti stránky a jsou hlavním viníkem pomalého načítání webu. Každý megabajt navíc znamená prodlevu, která stojí konverze a horšíte si pozici ve vyhledávačích. Google pomocí metrik Core Web Vitals přímo trestá weby s pomalými obrázky. V tomto komplexním průvodci se dozvíte, jak správně zvolit formát obrázků (JPEG, PNG, WebP, AVIF, SVG), jak je efektivně komprimovat bez ztráty kvality, kdy použít lazy loading a jak psát SEO-friendly alt texty. Naučíte se používat profesionální nástroje jako TinyPNG nebo Squoosh a získáte přehled technik jako responzivní obrázky (srcset) nebo využití CDN. Váš web bude rychlý, přehledný a připravený na organický růst.

Proč je optimalizace obrázků kritická pro úspěch webu

Mnoho majitelů webů podcenuje význam optimalizace obrázků a nahrává fotografie přímo z fotoaparátu nebo smartphonu, aniž by je upravili. To je zásadní chyba. Neoptimalizované obrázky mají často několik megabajtů a způsobují výrazné zpomalení načítání stránky, což má dopad na SEO, uživatelskou zkušenost i konverze.

  • Vliv obrázků na rychlost webu

    • Podle studií společnosti HTTP Archive tvoří obrázky v průměru více než 50 % celkové váhy webové stránky. Pokud každý obrázek na vaší homepage má velikost 2 MB místo optimálních 200 KB, návštěvník musí stáhnout 10× více dat. To dramaticky prodlužuje dobu načítání, zejména na mobilních zařízeních s pomalejším připojením. Výsledkem je vysoká míra opuštění (Bounce Rate) a ztráta potenciálních zákazníků.

  • Dopad na Core Web Vitals a SEO ranking

    • Google používá metriky Core Web Vitals jako klíčový faktor pro hodnocení webu. Největší obrázek na stránce přímo ovlivňuje metriku LCP (Largest Contentful Paint), která měří, jak rychle se načte hlavní vizuální obsah. Pokud váš hero obrázek má 3 MB a načítá se 5 sekund, máte katastrofální LCP a Google váš web odsune na další stránky výsledků vyhledávání. Optimalizované obrázky znamenají lepší rychlost webu a vyšší pozice v organickém SEO.

  • Vliv na konverze a uživatelskou zkušenost

    • Pomalý web ničí konverze. Studie ukazují, že každá sekunda zpoždění snižuje konverzní poměr až o 7 %. Návštěvníci jsou netrpěliví a pokud se stránka nenačte do 3 sekund, odejdou ke konkurenci. Rychlé načítání obrázků znamená plynulou uživatelskou zkušenost, nižší míru opuštění a více prodejů a poptávek.

Formáty obrázků: Kdy použít JPEG, PNG, WebP, AVIF a SVG

Výběr správného formátu je prvním a nejdůležitějším krokem v optimalizaci obrázků. Každý formát má své silné stránky a je vhodný pro jiný typ vizuálního obsahu. Použití špatného formátu může znamenat zbytečně velké soubory nebo nízkou kvalitu zobrazení.

  • JPEG (JPG) – Nejrozšířenější pro fotografie

    • JPEG je nejstarší a nejpoužívanější formát pro fotografie a komplexní obrázky s mnoha barvami a přechody. Výhodou je dobrá komprese se ztrátou kvality (lossy compression), která umožňuje výrazně snížit velikost souboru při zachování přijatelné vizuální kvality. Nevýhodou je, že JPEG nepodporuje průhlednost (alpha kanál). Ideální použití: produktové fotografie, portrétní fotky týmu, pozadí.

  • PNG – Pro loga, ikony a grafiku s průhledností

    • PNG je formát bez ztráty kvality (lossless) a podporuje průhledné pozadí. To je ideální pro loga, ikony, ilustrace a grafické prvky, které musí mít průhlednost nebo ostré hrany. Nevýhodou je, že PNG má obvykle větší velikost než JPEG, takže není vhodný pro složité fotografie. Rozlišujeme dva typy: PNG-8 (omezená paleta 256 barev, menší soubor) a PNG-24 (miliony barev, větší soubor).

  • WebP – Moderní formát pro maximální úsporu

    • WebP je next-gen formát vyvinutý Googlem, který nabízí až 30% úsporu velikosti oproti JPEG při stejné kvalitě a zároveň podporuje průhlednost i animace. WebP je dnes podporován všemi moderními prohlížeči (Chrome, Firefox, Edge, Safari od iOS 14). Je ideálním univerzálním řešením pro všechny typy obrázků na webu. Vždy doporučuji používat WebP jako primární formát s fallbackem na JPEG/PNG pro starší prohlížeče pomocí tagu <picture>.

  • AVIF – Budoucnost s ještě lepší kompresí

    • AVIF je nejnovější formát, který nabízí ještě lepší kompresi než WebP (až o 50 % menší soubory). Podporuje vysoký dynamický rozsah (HDR) a je ideální pro náročné vizuály. Nevýhodou je, že zatím nemá plnou podporu všech prohlížečů (Safari podporuje AVIF až od iOS 16). AVIF je dobrý pro weby s vysokými nároky na kvalitu a rychlost, ale zatím doporučuji používat jej jako první volbu v progressive enhancement strategii s fallbackem na WebP a JPEG.

  • SVG – Vektorový formát pro loga a ikony

    • SVG (Scalable Vector Graphics) není rastrový formát jako ostatní, ale vektorový. To znamená, že se může zvětšovat do jakékoli velikosti bez ztráty kvality. SVG je ideální pro loga, ikony, jednoduché ilustrace a grafy. Výhodou je, že SVG soubory jsou často extrémně malé (několik KB) a lze je přímo vložit do HTML kódu (inline SVG), což eliminuje další HTTP požadavek. Nevýhodou je, že SVG není vhodné pro komplexní fotografie.

Jak správně komprimovat obrázky bez ztráty kvality

Komprese obrázků je proces, kterým snížíte velikost souboru při zachování co nejvyšší vizuální kvality. Existují dva typy komprese: lossy (se ztrátou) a lossless (bezztrátová). Klíčem je najít optimální rovnováhu mezi velikostí a kvalitou.

  • Lossy vs. Lossless komprese

    • Lossy komprese (např. JPEG, WebP lossy) odstraňuje data z obrázku, která lidské oko obtížně rozpozná. Díky tomu dosáhnete výrazného zmenšení velikosti, ale při příliš agresivní kompresi se objeví viditelné artefakty (rozmazání, bloky). Lossless komprese (např. PNG, WebP lossless) zachovává všechna data a kvalita je identická s originálem, ale úspora velikosti je menší. Pro web doporučuji lossy kompresi s kvalitou 80–85 %, což poskytuje nejlepší poměr kvality a velikosti.

  • Nástroje pro automatickou kompresi

    • Dnes existuje mnoho nástrojů, které vám automaticky zkomprimují obrázky s optimálními nastaveními. Mezi nejpopulárnější patří:

    TinyPNG / TinyJPG – Webová aplikace zdarma (do 20 obrázků najednou), která používá inteligentní lossy kompresi. Výsledkem jsou soubory o 50–70 % menší bez viditelné ztráty kvality.

    Squoosh – Pokročilý online nástroj od Googlu, který umožňuje porovnat originál s komprimovanou verzí v reálném čase a podporuje všechny moderní formáty včetně WebP a AVIF.

    ImageOptim (Mac) – Desktopová aplikace pro hromadnou kompresi obrázků. Podporuje drag & drop a je ideální pro optimalizaci velkého počtu souborů najednou.

    Pluginy pro WordPress – Pokud používáte WordPress, vyzkoušejte pluginy jako ShortPixel nebo Imagify, které automaticky komprimují každý nahrávaný obrázek.

  • Manuální nastavení komprese: Doporučené hodnoty

    • Pokud komprimujete obrázky manuálně (např. ve Photoshopu nebo GIMP), dodržujte tyto osvědčené hodnoty:

    JPEG kvalita: 80–85 % (Photoshop: Save for Web, kvalita 8–9 z 12).

    PNG-8: Pro jednoduché grafiky s omezenými barvami (loga, ikony).

    WebP: Kvalita 80 % poskytuje výbornou rovnováhu.

    Nikdy nepoužívejte 100% kvalitu pro web – rozdíl v zobrazení je prakticky neviditelný, ale velikost souboru je 2–3× větší.

Optimální velikost a rozměry obrázků pro web

Jednou z nejčastějších chyb je nahrávání příliš velkých obrázků v pixelových rozměrech. Pokud nahrajete obrázek 4000×3000 px, ale na webu se zobrazuje jen 800×600 px, prohlížeč musí stáhnout celý obrovský soubor a pak ho zmenší. To je obrovské plýtvání daty a časem.

  • Pravidlo: Velikost obrázku = velikost zobrazení

    • Základní pravidlo zní: Obrázek by měl být maximálně 2× větší než zobrazovaná velikost. Pokud se obrázek zobrazuje v šířce 600 px, nahrajte ho v rozměrech 1200×900 px (kvůli retina displejům, které mají dvojnásobnou hustotu pixelů). Pro běžné displeje stačí dokonce přesně ta zobrazovaná velikost.

  • Doporučené rozměry pro různé typy obrázků

    • Zde jsou osvědčené rozměry pro běžné typy obrázků na webu:

    Hero obrázek (hlavní vizuál na úvodní stránce): 1920×1080 px (full HD) pro desktop, 768×1024 px pro mobilní verzi.

    Produktové fotografie: 800×800 px (1600×1600 px pro retina) pro detailní zobrazení, 300×300 px pro thumbnaily (náhledy).

    Blogové obrázky: 1200×630 px (ideální pro sdílení na sociálních sítích – Facebook, LinkedIn).

    Loga: Používejte raději SVG (vektorový formát), nebo PNG s rozměry maximálně 300×100 px.

  • Responzivní obrázky pomocí srcset

    • Mobilní zařízení mají menší obrazovky a pomalejší připojení, takže je neefektivní posílat jim velké desktopové obrázky. Řešením je HTML atribut srcset, který umožňuje definovat několik verzí obrázku v různých velikostech a prohlížeč si automaticky vybere tu nejvhodnější:

    <img src="obrazek-800.jpg" srcset="obrazek-400.jpg 400w, obrazek-800.jpg 800w, obrazek-1200.jpg 1200w" sizes="(max-width: 600px) 400px, 800px" alt="Popis obrázku">

    V tomto případě mobil s šířkou 400 px stáhne verzi obrazek-400.jpg (menší soubor), zatímco desktop stáhne obrazek-1200.jpg. Tím ušetříte až 70 % dat na mobilních zařízeních.

Lazy Loading: Načítejte obrázky až ve chvíli, kdy jsou potřeba

Lazy loading (líné načítání) je technika, která odloží stažení obrázků, které nejsou okamžitě viditelné na obrazovce. Obrázky se načtou až ve chvíli, kdy se k nim uživatel doscrolluje. Tím dramaticky zkrátíte počáteční dobu načítání stránky a zlepšíte metriky jako LCP a FCP.

  • Jak funguje Lazy Loading

    • Při načtení stránky se stáhnou jen obrázky, které jsou nad záhybem (tzv. above the fold – viditelné bez scrollování). Obrázky níže na stránce se načtou až těsně předtím, než se dostanou do viditelné oblasti (viewport). Tím se prioritizuje to nejdůležitější a web se načte rychleji.

  • Nativní Lazy Loading v HTML

    • Dnes už není nutné používat složité JavaScript knihovny. Moderní prohlížeče podporují nativní lazy loading pomocí HTML atributu loading="lazy":

    <img src="obrazek.jpg" alt="Popis" loading="lazy">

    Tento atribut funguje ve všech moderních prohlížečích (Chrome, Firefox, Edge, Safari) a je nejjednodušší a nejvýkonnější způsob, jak implementovat lazy loading. Stačí přidat jeden atribut a máte hotovo.

  • Kdy NEPOUŽÍVAT Lazy Loading

    • Nepoužívejte lazy loading na obrázky nad záhybem (první vizuální obsah stránky). Pokud má váš hero obrázek atribut loading="lazy", prohlížeč odloží jeho načtení, což zhorší LCP metriku a zpomalí vnímané načítání. Lazy loading používejte jen pro obrázky, které jsou mimo první obrazovku.

Alt texty: SEO popis obrázků, který nesmíte podcenit

Alt text (alternativní text) je textový popis obrázku, který se zobrazí, když se obrázek nenačte, nebo který čtou programy pro nevidomé. Alt text má obrovský význam pro SEO, protože Google nedokáže "vidět" obrázky – čte pouze jejich popisky. Dobře napsaný alt text zlepšuje pozice webu ve vyhledávání obrázků a v organických výsledcích.

  • Jak psát správný Alt text

    • Alt text musí být popisný, konkrétní a obsahovat klíčová slova. Vyhněte se obecným frázím jako "obrázek" nebo "fotka" a místo toho přesně popište, co je na obrázku vidět. Špatný příklad: alt="obrázek". Dobrý příklad: alt="Moderní kancelář s designovým nábytkem a velkými okny". Ještě lepší příklad s klíčovými slovy: alt="Profesionální tvorba webu pro malé firmy – ukázka našeho portfolia".

  • Kdy použít prázdný Alt text

    • Pro čistě dekorativní obrázky (např. rozdělovací linie, grafické ornamenty), které nepřinášejí žádnou informační hodnotu, použijte prázdný alt atribut: alt="". To řekne čtečkám obrazovky, že obrázek mohou přeskočit. Nikdy ale nesmažte celý atribut alt – to je chyba validace.

  • Alt text pro produktové fotografie a e-shopy

    • V e-shopech je alt text obzvlášť důležitý pro SEO. Správný formát: alt="[Značka] [Název produktu] [Varianta/barva]". Příklad: alt="Nike Air Max 270 černé tenisky – dámské, velikost 38". Tím zajistíte, že vaše produkty se budou zobrazovat ve vyhledávání obrázků Google a přivedou vám další organický provoz.

  • Příklady špatných a dobrých Alt textů

    • Špatně: alt="IMG_1234.jpg" (název souboru není popis).

    Špatně: alt="obrázek týmu" (příliš obecné).

    Dobře: alt="Tým webových vývojářů Webouky při společné konzultaci v kanceláři" (konkrétní, popisné, s brand názvem).

    Dobře: alt="Návod jak optimalizovat obrázky pomocí nástroje TinyPNG" (popis screenshot s kontextem).

Jak správně pojmenovat soubory s obrázky pro SEO

Kromě alt textu má na SEO vliv i název souboru obrázku. Google čte názvy souborů a používá je jako další signál pro pochopení obsahu. Bohužel většina lidí nahrává obrázky přímo z fotoaparátu s názvy jako DSC_1234.jpg nebo IMG_5678.jpg, což je ztracená SEO příležitost.

  • Pravidla pro SEO-friendly názvy souborů

    • Dodržujte tato pravidla:

    Používejte malá písmena: tvorba-webu.jpg (NE: TvorbaWebu.jpg).

    Oddělujte slova pomlčkami (NE podtržítky): moderni-webdesign.jpg (NE: moderni_webdesign.jpg).

    Zahrňte klíčová slova: optimalizace-obrazku-web.jpg namísto foto1.jpg.

    Buďte konkrétní: notebook-macbook-pro-2024.jpg je lepší než notebook.jpg.

    Nepoužívejte diakritiku: obrazek místo obrázek (diakritika může způsobovat problémy na různých serverech).

  • Příklady správných názvů souborů

    • Špatně: IMG_2345.jpg

    Dobře: moderni-kancelar-webove-agentury.jpg

    Špatně: fotka_produktu.png

    Dobře: bezova-kabelka-damska-kozena.png

    Špatně: screenshot.jpg

    Dobře: google-analytics-nastaveni-konverzi.jpg

Nástroje pro automatickou optimalizaci obrázků

Ruční optimalizace každého obrázku je časově náročná. Naštěstí existují automatizované nástroje, které vám ušetří hodiny práce a zajistí, že každý obrázek na webu bude perfektně optimalizovaný.

  • Online nástroje (webové aplikace)

    • TinyPNG – Nejpopulárnější nástroj pro kompresi PNG a JPEG. Umožňuje nahrát až 20 obrázků najednou (každý do 5 MB). Komprese je automatická a výsledky jsou vynikající. Zdarma.

    Squoosh – Pokročilý nástroj od Googlu. Umožňuje porovnat originál s komprimovanou verzí v reálném čase a podporuje všechny moderní formáty (WebP, AVIF, MozJPEG). Zdarma.

    Compressor.io – Jednoduchý nástroj s podporou lossy i lossless komprese. Podporuje JPEG, PNG, GIF a SVG. Zdarma.

  • Desktopové aplikace

    • ImageOptim (Mac, zdarma) – Nejlepší desktopová aplikace pro Mac. Podporuje drag & drop a hromadnou kompresi. Odstraňuje metadata a optimalizuje obrázky bez ztráty kvality.

    XnConvert (Windows, Mac, Linux, zdarma) – Pokročilý nástroj pro hromadnou konverzi a úpravu obrázků. Umožňuje dávkové změny velikosti, komprese, konverzi formátů a aplikaci filtrů.

  • WordPress pluginy

    • Pokud používáte WordPress, tyto pluginy automaticky optimalizují každý obrázek při nahrání:

    ShortPixel – Jeden z nejlepších pluginů. Nabízí lossy, glossy i lossless kompresi, podporuje WebP a lazy loading. Zdarma 100 obrázků/měsíc.

    Imagify – Od tvůrců WP Rocket. Automatická komprese, WebP konverze a změna velikosti obrázků. Zdarma 25 MB/měsíc.

    EWWW Image Optimizer – Kompletně zdarma, bez limitů. Podporuje lokální kompresi (bez odesílání obrázků na externí server), WebP a lazy loading.

  • CDN s automatickou optimalizací obrázků

    • Některé CDN (Content Delivery Network) nabízejí automatickou optimalizaci obrázků na úrovni serveru:

    Cloudflare – Nabízí funkci Cloudflare Polish, která automaticky komprimuje obrázky a konvertuje je do WebP podle podpory prohlížeče. Dostupné v placeném tarifu Pro.

    KeyCDN – CDN s funkcí Image Processing, která umožňuje měnit velikost obrázků, formáty a kompresi pomocí URL parametrů.

CDN a doručování obrázků: Rychlost přes celý svět

I když máte perfektně optimalizované obrázky, jejich rychlost doručení závisí na vzdálenosti mezi uživatelem a serverem. Pokud váš web běží na serveru v Praze a návštěvník je v Austrálii, stahování obrázků bude pomalé kvůli vysoké latenci. Řešením je CDN (Content Delivery Network).

  • Jak funguje CDN

    • CDN je síť serverů rozmístěných po celém světě. Když nahrajete obrázek na váš hlavní server, CDN automaticky vytvoří kopie tohoto souboru na všech svých globálních serverech. Když si uživatel v Japonsku otevře váš web, obrázky se mu stáhnou z nejbližšího serveru (např. Tokio), místo vašeho serveru v Praze. Tím se dramaticky zkrátí latence a zrychlí načítání.

  • Výhody CDN pro obrázky

    • Rychlejší načítání: Obrázky se stahují z geograficky blízkého serveru.

    Snížení zátěže serveru: CDN převezme většinu datového provozu, váš hlavní server zůstává odlehčený.

    Lepší dostupnost: Pokud váš hlavní server selže, CDN stále doručí obrázky ze své cache.

    Automatická optimalizace: Některé CDN (např. Cloudflare, KeyCDN) nabízejí automatickou kompresi a konverzi obrázků do WebP podle podpory prohlížeče.

  • Populární CDN služby

    • Cloudflare – Nejpopulárnější a zdarma v základní verzi. Nabízí globální síť, automatickou kompresi (Polish) a cache statických souborů.

    KeyCDN – Placené CDN s funkcí Image Processing (změna velikosti a formátu obrázků přímo přes URL). Od $0.04/GB.

    BunnyCDN – Velmi rychlé a levné CDN s image optimalizací. Od $0.005/GB.

Nejčastější chyby při práci s obrázky na webu

I když znáte všechny techniky optimalizace, je snadné udělat běžné chyby, které mohou zničit rychlost vašeho webu. Zde jsou ty nejčastější chyby, kterým se musíte vyhnout.

  • Chyba 1: Nahrávání obrázků přímo z fotoaparátu

    • Fotografie z moderních fotoaparátů a smartphonů mají obrovské rozlišení (6000×4000 px) a velikost často 5–10 MB na jeden obrázek. Pokud takový obrázek nahrajete na web bez úpravy, vaše stránka bude naprosto nepoužitelná. Vždy nejprve změňte velikost a zkomprimujte.

  • Chyba 2: Použití PNG pro fotografie

    • PNG je formát bez ztráty kvality, což znamená, že fotografie v PNG mají obrovskou velikost (často 5–10× větší než JPEG). PNG je vhodné jen pro loga, ikony a grafiku s průhledností. Pro fotografie vždy používejte JPEG nebo WebP.

  • Chyba 3: Lazy loading na hero obrázku

    • Jak již bylo zmíněno, nikdy nepoužívejte lazy loading na hlavním vizuálu nad záhybem (hero obrázek). Tím způsobíte, že prohlížeč odloží stažení nejdůležitějšího obrázku, což zhorší LCP metriku a zpomalí vnímané načítání. Lazy loading patří jen na obrázky pod záhybem.

  • Chyba 4: Chybějící nebo špatný Alt text

    • Prázdný nebo obecný alt text (např. alt="obrázek") je ztracená SEO příležitost a zhoršuje přístupnost pro nevidomé uživatele. Každý obrázek musí mít konkrétní, popisný alt text s klíčovými slovy.

  • Chyba 5: Nepoužití moderních formátů (WebP, AVIF)

    • JPEG a PNG jsou staré formáty. Pokud stále používáte jen je, zbytečně plýtváte daty. Moderní formáty jako WebP a AVIF nabízejí až 50% úsporu velikosti při stejné nebo lepší kvalitě. Používejte je s fallbackem pomocí elementu <picture>.

  • Chyba 6: Neresponsivní obrázky

    • Posílat stejný obrovský obrázek mobilním zařízením jako desktopům je plýtvání. Vždy používejte srcset nebo element <picture>, aby mobilní zařízení stáhla pouze menší verzi obrázku.

  • Chyba 7: Žádná komprese nebo přehnaná komprese

    • Nahrání obrázku bez jakékoli komprese způsobí obrovské soubory. Naopak, příliš agresivní komprese (kvalita pod 60 %) způsobí viditelné artefakty a rozmazání. Ideální komprese je 80–85 % kvality.

  • Chyba 8: Ignorování metadat (EXIF)

    • Obrázky z fotoaparátu obsahují EXIF metadata (GPS poloha, model fotoaparátu, datum, nastavení), která zvyšují velikost souboru o desítky KB. Nástroje jako TinyPNG nebo ImageOptim je automaticky odstraňují, ale pokud optimalizujete ručně, nezapomeňte na to.

Závěr: Rychlé obrázky znamenají rychlý web

Optimalizace obrázků je jeden z nejúčinnějších způsobů, jak dramaticky zlepšit rychlost vašeho webu, zvýšit pozice v organickém vyhledávání a zvýšit konverze. Většina webů má obrovský nevyužitý potenciál v podobě neoptimalizovaných obrázků, které zbytečně zpomalují načítání a odrazují návštěvníky. Dodržováním pravidel uvedených v tomto průvodci – správný výběr formátu (WebP, AVIF), efektivní komprese (80–85 % kvality), responzivní obrázky (srcset), lazy loading pro obrázky pod záhybem, SEO-friendly alt texty a využití CDN – zajistíte, že váš web bude rychlý, moderní a připravený na organický růst. Pokud chcete dosáhnout maximální rychlosti, přečtěte si také náš komplexní průvodce jak zrychlit načítání webu, kde se dozvíte, jak optimalizovat další klíčové prvky. Potřebujete pomoct s implementací optimalizací na vašem stávajícím webu nebo chcete web postavený na maximální rychlosti od začátku? Kontaktujte mě a společně dosáhneme excelentních Core Web Vitals a vysokých konverzí.

Často kladené otázky

Jaký je nejlepší formát obrázků pro web? Rozbalit

Nejlepší moderní formát je WebP, který nabízí až 30% úsporu velikosti oproti JPEG při stejné kvalitě a podporuje průhlednost. Ještě pokročilejší je AVIF, který má ještě lepší kompresi. Pro maximální kompatibilitu používejte WebP s fallbackem na JPEG pomocí elementu <picture>. Pro loga a ikony je ideální vektorový formát SVG.

Jak moc mám komprimovat obrázky? Rozbalit

Ideální komprese pro web je 80–85 % kvality (pro JPEG a WebP). Tato úroveň poskytuje vynikající rovnováhu mezi velikostí souboru a vizuální kvalitou. Lidské oko nerozezná rozdíl mezi 85% a 100% kvalitou, ale velikost souboru je výrazně menší. Nikdy nepoužívejte 100% kvalitu pro web – je to zbytečné plýtvání daty.

Co je lazy loading a měl bych ho používat? Rozbalit

Lazy loading je technika, která odloží načtení obrázků, které nejsou okamžitě viditelné na obrazovce. Obrázky se načtou až ve chvíli, kdy se k nim uživatel doscrolluje. Tím dramaticky zkrátíte počáteční dobu načítání stránky. Používejte ho pro všechny obrázky pod záhybem (pod první obrazovkou), ale nikdy ne pro hlavní hero obrázek nahoře.

Jak napsat správný Alt text pro SEO? Rozbalit

Alt text by měl být konkrétní, popisný a obsahovat klíčová slova. Nepoužívejte obecné fráze jako "obrázek" nebo "fotka". Správný příklad: alt="Moderní webdesign pro malé firmy – ukázka responzivního webu na mobilu a počítači". Alt text pomáhá Google pochopit obsah obrázku a zlepšuje vaše pozice ve vyhledávání obrázků.

Jaké rozměry by měly mít obrázky pro web? Rozbalit

Obrázek by měl být maximálně 2× větší než zobrazovaná velikost (kvůli retina displejům). Pro hero obrázky používejte 1920×1080 px pro desktop a 768×1024 px pro mobil. Produktové fotografie: 800×800 px (1600×1600 pro retina), thumbnaily 300×300 px. Blogové obrázky: 1200×630 px (ideální pro sdílení na sociálních sítích). Vždy vytvářejte více verzí pomocí srcset pro responzivní zobrazení.

Potřebuji CDN pro obrázky? Rozbalit

Pokud máte web s návštěvností z různých koutů světa nebo vyšší provoz, CDN výrazně zrychlí načítání obrázků. CDN ukládá kopie vašich obrázků na servery po celém světě a návštěvník si je stáhne z nejbližšího serveru. To dramaticky snižuje latenci a zlepšuje LCP metriku. Cloudflare nabízí CDN zdarma v základní verzi.

Je lepší použít PNG nebo JPEG? Rozbalit

Záleží na typu obrázku. JPEG je ideální pro fotografie a komplexní obrázky s mnoha barvami – má výbornou kompresi a malou velikost. PNG je vhodné pro loga, ikony a grafiku s průhledností nebo ostrými hranami. PNG má větší velikost, ale zachovává 100% kvalitu. Pro web ale doporučuji primárně používat moderní WebP, který kombinuje výhody obou formátů.

Jaké nástroje použít pro optimalizaci obrázků? Rozbalit

Pro rychlou online kompresi používejte TinyPNG nebo Squoosh (od Googlu). Pro hromadnou kompresi na počítači vyzkoušejte ImageOptim (Mac) nebo XnConvert (Windows). Pro WordPress doporučuji pluginy ShortPixel nebo Imagify, které automaticky komprimují každý nahraný obrázek a podporují WebP konverzi.