Optimalizace obrázků pro web: Kompletní průvodce 2026

Váš web se načítá pomalu. Obrázky mají 5 MB. Google vás penalizuje. Zákazníci odcházejí.

Přitom řešení je jednoduché - stačí optimalizovat obrázky. Zabere to hodinu práce a web bude 2-3x rychlejší.

V tomto průvodci se dozvíte:

• Jaké formáty používat (a proč WebP není vždy nejlepší)
• Jak zmenšit obrázky bez ztráty kvality
• Co je lazy loading a proč ho potřebujete
• Nejlepší nástroje pro optimalizaci
• Jak nastavit obrázky pro SEO

Stručně: Používejte WebP, komprimujte na 80% kvalitu, nastavte správné rozměry a zapněte lazy loading. Tím vyřešíte 90% problémů.

---

Obsah

1. Proč na optimalizaci záleží
2. Formáty obrázků
3. Správné rozměry
4. Komprese obrázků
5. Lazy loading
6. Responzivní obrázky
7. SEO pro obrázky
8. Nástroje pro optimalizaci
9. WordPress optimalizace
10. Checklist

---

Proč na optimalizaci záleží

Rychlost = peníze

Statistiky mluví jasně:

• 53% návštěvníků odejde pokud se web načítá déle než 3 sekundy
• Každá sekunda zpoždění = -7% konverzí
• Obrázky tvoří průměrně 50% velikosti webové stránky

Google to sleduje

Core Web Vitals jsou ranking faktor. Pomalý web = horší pozice ve vyhledávání.

LCP (Largest Contentful Paint) - jak rychle se načte největší prvek (často obrázek). Cíl: do 2.5 sekundy.

Mobilní uživatelé

70%+ návštěvnosti je z mobilů. Na mobilních datech je každý MB navíc problém.

Příklad:

• Neoptimalizovaný obrázek: 3 MB
• Optimalizovaný obrázek: 150 KB
• Úspora: 95%

---

Formáty obrázků

Přehled formátů

JPEG

Kdy použít:

• Fotografie
• Obrázky s mnoha barvami
• Kde nepotřebujete průhlednost

Výhody:

• Univerzální podpora
• Dobrá komprese pro fotky

Nevýhody:

• Žádná průhlednost
• Ztrátová komprese (každé uložení zhoršuje kvalitu)

Doporučená kvalita: 80-85%

PNG

Kdy použít:

• Loga
• Grafika s ostrými hranami
• Obrázky vyžadující průhlednost
• Screenshoty

Výhody:

• Bezztrátová kvalita
• Průhlednost (alpha channel)

Nevýhody:

• Větší velikost než JPEG
• Nevhodné pro fotografie

Tip: Používejte PNG-8 místo PNG-24 když nepotřebujete mnoho barev.

WebP

Kdy použít:

• Skoro vždy (jako náhrada JPEG i PNG)

Výhody:

• O 25-35% menší než JPEG při stejné kvalitě
• Podporuje průhlednost
• Podporuje animace

Nevýhody:

• Starší prohlížeče (IE, starší Safari) nepodporují
• Některé grafické programy ho neumí

Podpora v roce 2026: 97%+ prohlížečů

AVIF

Kdy použít:

• Když chcete maximální kompresi
• Pro moderní weby

Výhody:

• O 50% menší než JPEG
• Lepší kvalita než WebP
• Průhlednost i animace

Nevýhody:

• Pomalejší encoding
• Horší podpora (92%)
• Některé prohlížeče mají problémy

Doporučení: Používejte jako doplněk k WebP s fallbackem.

SVG

Kdy použít:

• Loga
• Ikony
• Ilustrace
• Vše co je vektorové

Výhody:

• Nekonečná škálovatelnost
• Velmi malá velikost
• Lze stylovat pomocí CSS
• Lze animovat

Nevýhody:

• Nevhodné pro fotografie
• Komplexní SVG mohou být velké

Tip: Optimalizujte SVG pomocí SVGO.

Které formáty používat

Nejlepší praxe v roce 2026:

---

Správné rozměry

Základní pravidlo

Nikdy nenahrávejte větší obrázek než potřebujete.

Pokud máte slot 800px široký, nenahrávejte obrázek 4000px.

Typické rozměry pro web

Retina displeje

Moderní displeje mají 2x nebo 3x hustotu pixelů.

Řešení:

• Nahrávejte obrázky v 2x velikosti
• Nebo používejte srcset (viz sekce responzivní obrázky)

Příklad:

• Slot na webu: 600px
• Obrázek pro retina: 1200px

Aspekt ratio

Udržujte konzistentní poměr stran:

• 16:9 - videa, hero obrázky
• 4:3 - klasické fotky
• 1:1 - profilové fotky, produkty
• 3:2 - fotografie

Tip: Definujte aspect ratio v CSS aby se layout nepohyboval při načítání:

.image-container {
  aspect-ratio: 16 / 9;
}

---

Komprese obrázků

Typy komprese

Ztrátová (lossy):

• Odstraňuje data které oko nevidí
• Menší velikost
• Nelze vrátit původní kvalitu
• Vhodné pro: JPEG, WebP

Bezztrátová (lossless):

• Zachovává všechna data
• Větší velikost
• Vhodné pro: PNG, SVG

Optimální kvalita

Pro většinu webových obrázků:

Pod 80% - začíná být viditelná degradace Nad 90% - minimální vizuální rozdíl, zbytečně velký soubor

Metadata

Obrázky obsahují metadata (EXIF):

• Datum pořízení
• GPS souřadnice
• Model fotoaparátu
• A další...

Pro web: Odstraňte metadata. Zmenší to soubor a chrání soukromí.

Kolik by měl obrázek mít

Orientační velikosti:

Celá stránka: Ideálně pod 1 MB obrázků celkem.

---

Lazy loading

Co je lazy loading

Obrázky se načítají až když je uživatel potřebuje vidět (scrolluje k nim).

Výhody:

• Rychlejší počáteční načtení
• Méně dat pro uživatele
• Lepší Core Web Vitals

Nativní lazy loading

Nejjednodušší řešení - funguje ve všech moderních prohlížečích:

<img src="obrazek.webp" loading="lazy" alt="Popis obrázku">

Podpora: 95%+ prohlížečů

Kdy NEPOUŽÍVAT lazy loading

Above the fold - obrázky viditelné ihned po načtení:

• Hero obrázek
• Logo
• Hlavní produktová fotka

Tyto by měly mít loading="eager" (výchozí hodnota).

JavaScript lazy loading

Pro pokročilejší kontrolu:

// Intersection Observer API
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Placeholder při načítání

Aby stránka "neposkakovala":

1. Blur-up (rozmazaný náhled):

<img 
  src="obrazek-tiny.webp" 
  data-src="obrazek-full.webp"
  class="blur-up"
>

2. Solid color placeholder:

<div style="background: #e0e0e0; aspect-ratio: 16/9;">
  <img src="obrazek.webp" loading="lazy">
</div>

3. LQIP (Low Quality Image Placeholder):

• Malý (20px) rozmazaný náhled
• Nahradí se plnou verzí po načtení

---

Responzivní obrázky

Proč responzivní obrázky

• Mobil nepotřebuje 1920px obrázek
• Desktop nepotřebuje 400px obrázek
• Každé zařízení dostane optimální verzi

srcset a sizes

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

srcset - seznam dostupných verzí sizes - jak velký je obrázek na různých viewportech src - fallback pro staré prohlížeče

Picture element

Pro různé formáty s fallbackem:

<picture>
  <source srcset="obrazek.avif" type="image/avif">
  <source srcset="obrazek.webp" type="image/webp">
  <img src="obrazek.jpg" alt="Popis obrázku">
</picture>

Prohlížeč použije první formát který podporuje.

Art direction

Různé obrázky pro různé velikosti obrazovky:

<picture>
  <source media="(max-width: 600px)" srcset="obrazek-mobile.webp">
  <source media="(max-width: 1200px)" srcset="obrazek-tablet.webp">
  <img src="obrazek-desktop.webp" alt="Popis obrázku">
</picture>

Použití: Když chcete jiný výřez nebo úplně jiný obrázek na mobilu.

---

SEO pro obrázky

Alt text

Co je alt text: Textový popis obrázku pro:

• Vyhledávače
• Screen readery (přístupnost)
• Když se obrázek nenačte

Jak psát dobrý alt text:

✅ Dobře:

<img alt="Červený Ford Mustang 2024 z boku na silnici">

❌ Špatně:

<img alt="auto">
<img alt="obrázek">
<img alt="ford-mustang-cerveny-auto-2024-prodej-bazar.jpg">

Pravidla:

• Popisujte co je NA obrázku
• Buďte konkrétní ale stručný (do 125 znaků)
• Neopisujte dekorativní obrázky (nechte alt prázdný: alt="")
• Nepoužívejte "obrázek...", "fotka..."

Název souboru

Před nahráním přejmenujte:

✅ Dobře: cerveny-ford-mustang-2024.webp ❌ Špatně: IMG_20240315_142536.jpg

Pravidla:

• Malá písmena
• Pomlčky místo mezer
• Bez diakritiky
• Popisný název

Strukturovaná data

Pro produkty, recepty, články:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Ford Mustang 2024",
  "image": [
    "https://example.com/mustang-1.webp",
    "https://example.com/mustang-2.webp"
  ]
}

Image sitemap

Pomáhá Google najít všechny obrázky:

<url>
  <loc>https://example.com/stranka</loc>
  <image:image>
    <image:loc>https://example.com/obrazek.webp</image:loc>
    <image:title>Popis obrázku</image:title>
  </image:image>
</url>

Open Graph a Twitter Cards

Pro sdílení na sociálních sítích:

<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">

Doporučené rozměry:

• Open Graph: 1200 x 630 px
• Twitter: 1200 x 628 px

---

Nástroje pro optimalizaci

Online nástroje (zdarma)

Squoosh (squoosh.app)

• Od Google
• Všechny formáty
• Vizuální porovnání
• Nejlepší pro jednotlivé obrázky

TinyPNG (tinypng.com)

• PNG a JPEG
• Jednoduchý drag & drop
• Batch processing (20 obrázků zdarma)

Compressor.io

• Více formátů
• Dobrá komprese
• Zdarma

Desktopové aplikace

ImageOptim (Mac)

• Zdarma
• Drag & drop
• Batch processing
• Odstraňuje metadata

FileOptimizer (Windows)

• Zdarma
• Mnoho formátů
• Bezztrátová optimalizace

Photoshop / Figma

• "Export for Web" funkce
• Kontrola nad kvalitou

CLI nástroje

Sharp (Node.js)

npm install sharp

const sharp = require('sharp');

sharp('input.jpg')
  .resize(1200)
  .webp({ quality: 80 })
  .toFile('output.webp');

ImageMagick

convert input.jpg -resize 1200x -quality 85 output.webp

cwebp (Google)

cwebp -q 80 input.png -o output.webp

CDN s optimalizací

Cloudinary

• Automatická optimalizace
• Transformace na URL
• Lazy loading
• Free tier dostupný

Imgix

• Podobné jako Cloudinary
• Real-time processing

Cloudflare Images

• Integrované s Cloudflare
• Jednoduché nastavení

Příklad Cloudinary URL:

https://res.cloudinary.com/demo/image/upload/w_800,f_auto,q_auto/sample.jpg

f_auto = automatický formát (WebP/AVIF pokud podporováno) q_auto = automatická kvalita

---

WordPress optimalizace

Vestavěné funkce

WordPress od verze 5.8 automaticky:

• Generuje WebP verze
• Přidává lazy loading
• Vytváří různé velikosti

Doporučené pluginy

ShortPixel

• Automatická komprese při uploadu
• WebP konverze
• Bulk optimalizace
• Free: 100 obrázků/měsíc

Imagify

• Od tvůrců WP Rocket
• Tři úrovně komprese
• WebP
• Free: 20 MB/měsíc

Smush

• Populární a spolehlivý
• Lazy loading
• Free verze omezená

EWWW Image Optimizer

• Lokální i cloudová optimalizace
• WebP konverze
• Bez měsíčních limitů

Nastavení WordPress

functions.php - kvalita JPEG:

add_filter('jpeg_quality', function() {
  return 85;
});

Zakázat generování nepotřebných velikostí:

add_filter('intermediate_image_sizes_advanced', function($sizes) {
  unset($sizes['medium_large']);
  unset($sizes['1536x1536']);
  unset($sizes['2048x2048']);
  return $sizes;
});

Další tipy pro WordPress

1. Nenahrávejte obrovské obrázky - zmenšete před uploadem
2. Používejte správné velikosti v editoru - ne "Full Size" všude
3. Čistěte nepotřebné obrázky - plugin Media Cleaner
4. CDN - použijte Cloudflare nebo podobný

---

Checklist optimalizace obrázků

Před nahráním

• Správný formát (WebP pro fotky, SVG pro loga)
• Správné rozměry (ne větší než potřeba)
• Komprese (80-85% kvalita)
• Odstraněná metadata
• Popisný název souboru

V HTML/CMS

• Alt text pro všechny obsahové obrázky
• Lazy loading pro obrázky pod ohybem
• Width a height atributy (prevence layout shift)
• Srcset pro responzivní obrázky

Pokročilé

• WebP s JPEG/PNG fallbackem
• AVIF pro maximální kompresi
• CDN pro rychlejší doručení
• Preload pro kritické obrázky

Testování

• PageSpeed Insights skóre
• Core Web Vitals (LCP)
• Celková velikost stránky
• Test na pomalém připojení

---

Shrnutí

Základní pravidla:

1. Formát: WebP pro většinu, SVG pro vektory
2. Rozměry: Nikdy větší než potřeba, 2x pro retinu
3. Komprese: 80-85% kvalita
4. Lazy loading: Pro vše kromě above-the-fold
5. Alt text: Popisný, stručný, relevantní

Rychlý postup:

1. Zmenšete obrázek na potřebné rozměry
2. Převeďte do WebP
3. Komprimujte na 80%
4. Přidejte lazy loading
5. Napište alt text

Výsledek: Web 2-3x rychlejší, lepší SEO, spokojení uživatelé.

---

Potřebujete rychlejší web?

V Appitect optimalizujeme weby na maximální rychlost. Obrázky jsou jen začátek.

Objednat konzultaci zdarma

---

Související články:

• Rychlost webu a konverze
• Core Web Vitals průvodce
• SEO checklist pro nový web

---

Článek naposledy aktualizován: Únor 2026