Ebuilder - Build your website easy!

Optimalizace obrázků ve WordPressu pomocí WebP: Kompletní průvodce pro amatérské vývojáře

Show Image

Proč byste měli používat formát WebP a jak na to

Ahoj všem webmasterům a nadšencům! Pokud se snažíte vytvořit rychlý a responzivní web, určitě jste už narazili na problém s velikostí obrázků. Možná jste četli různé rady o optimalizaci, ale praktický postup často chybí. V tomto článku vám ukážu, jak jednoduše přimět WordPress k automatickému převodu všech obrázků do formátu WebP – moderní formát, který může zmenšit vaše obrázky o 25-80 % oproti JPEG nebo PNG, a to při zachování srovnatelné kvality!

Co je WebP a proč stojí za pozornost?

WebP je moderní formát vyvinutý Googlem, který nabízí výrazně lepší kompresi než tradiční formáty jako JPEG a PNG. Podívejme se na hlavní výhody:

Jedinou nevýhodou je, že starší prohlížeče WebP nepodporují, ale nebojte se – v průběhu článku vysvětlím, jak zajistit kompatibilitu i s nimi.

Jak implementovat WebP ve WordPressu?

Existují dva základní přístupy:

  1. Pomocí pluginu (nejjednodušší řešení)
  2. Vlastním kódem (pro technicky zdatnější)

Pojďme se podívat na obě možnosti.

Řešení pomocí pluginu

Pro většinu webmasterů je plugin nejrychlejší a nejjednodušší cestou. Podívejme se na dva nejlepší nástroje:

1. Converter for Media

Tento plugin je mým osobním favoritem pro ty, kteří potřebují rychlé, spolehlivé a jednoduché řešení. Je zdarma, nevyžaduje žádné serverové nástroje a pracuje téměř na každém hostingu.

Instalace a nastavení:

  1. Přejděte do WordPress administrace > Pluginy > Přidat nový
  2. Vyhledejte „Converter for Media“
  3. Klikněte na „Instalovat“ a poté „Aktivovat“

Základní nastavení:

Po aktivaci pluginu přejděte do Nastavení > Converter for Media a:

Pokročilá nastavení:

V záložce Advanced Settings:

Plugin vytvoří WebP verze všech vašich obrázků a automaticky je nabídne prohlížečům, které je podporují. Starší prohlížeče dostanou původní formáty. A to vše bez změny URL adres obrázků!

2. EWWW Image Optimizer

EWWW je další skvělý plugin, který nabízí více funkcí, ale vyžaduje také více nastavení a může vyžadovat určité serverové nástroje.

Hlavní výhody EWWW:

Potenciální nevýhody:

Pokud chcete vysokou míru kontroly a máte přístup k serveru (VPS nebo dedikovaný hosting), EWWW je vynikající volba. Pro běžné sdílené hostingy doporučuji spíše Converter for Media.

Vlastní kódové řešení (pro pokročilé)

Pokud patříte mezi ty, kteří se nebojí upravit functions.php svého motivu, můžete implementovat WebP konverzi i bez pluginu. Zde je jednoduchý kód, který můžete přidat:

phpadd_filter('wp_generate_attachment_metadata', 'convert_to_webp_after_upload', 10, 2);

function convert_to_webp_after_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = get_attached_file($attachment_id);

    // Převeď hlavní obrázek
    convert_image_to_webp($file_path);

    // Převeď všechny velikosti
    if (!empty($metadata['sizes'])) {
        foreach ($metadata['sizes'] as $size) {
            $size_path = trailingslashit($upload_dir['basedir']) . dirname($metadata['file']) . '/' . $size['file'];
            convert_image_to_webp($size_path);
        }
    }

    return $metadata;
}

function convert_image_to_webp($filepath) {
    $info = pathinfo($filepath);
    $webp_path = $info['dirname'] . '/' . $info['filename'] . '.webp';

    // Pokud už existuje .webp, nepřeváděj znovu
    if (file_exists($webp_path)) {
        return;
    }

    $cmd = escapeshellcmd("cwebp -quiet -q 80 " . escapeshellarg($filepath) . " -o " . escapeshellarg($webp_path));
    exec($cmd);
}

Tento kód však vyžaduje, aby na vašem serveru byl nainstalován nástroj cwebp, což často není případ u sdílených hostingů. Pro zobrazení WebP formátu musíte také upravit .htaccess:

apache<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>

Tento přístup je ideální pro vývojáře, kteří chtějí minimalizovat počet pluginů nebo implementovat WebP v rámci vlastního řešení.

Jak ověřit, že WebP opravdu funguje?

Když nastavíte WebP ve WordPressu, nezměníte tím URL adresu obrázků. Plugin vytváří přesměrování nebo změnu MIME typu na pozadí. Proto může být matoucí, když stále vidíte odkazy na .jpg nebo .png soubory v kódu stránky.

Existuje několik způsobů, jak ověřit, zda se WebP používá:

1. Použití DevTools v prohlížeči

  1. Otevřete stránku vašeho webu v Chrome/Firefox/Edge
  2. Stiskněte F12 nebo klikněte pravým tlačítkem a vyberte „Prozkoumat“
  3. Přejděte na záložku „Network“
  4. Zaškrtněte „Disable cache“
  5. Klikněte na filtr „Img“
  6. Obnovte stránku (F5)
  7. Podívejte se na sloupec „Type“ – měli byste vidět image/webp místo image/jpeg nebo image/png

2. Kontrola v Google PageSpeed Insights

  1. Otevřete PageSpeed Insights
  2. Zadejte URL adresu vašeho webu
  3. Zkontrolujte sekci „Diagnostics“ – pokud nenajdete varování „Serve images in modern formats“, gratulujeme, váš web používá moderní formáty!

Časté problémy a jejich řešení

WebP obrázky se nezobrazují

Možné příčiny:

Řešení:

  1. Zkuste změnit „Image loading mode“ na „JavaScript Rewrites“ v nastavení pluginu
  2. Vyprázdněte všechny cache (jak WordPress, tak hosting a CDN)
  3. Ověřte kompatibilitu s ostatními pluginy (zejména cache a optimalizačními)

Některé obrázky zůstávají ve formátu JPG/PNG

To je normální! Pokud je WebP verze větší než originál (což se může stát u již optimalizovaných PNG nebo velmi jednoduchých obrázků), plugin raději použije původní formát. Je to záměrné chování pro optimální výkon.

Problémy s hostingem

Pokud váš hosting nepodporuje imagick nebo jiné potřebné nástroje:

  1. Zkontrolujte, zda váš plugin nabízí nastavení „GD“ místo „Imagick“
  2. Zvažte upgrade hostingu nebo migraci na výkonnější řešení
  3. U Converter for Media zkuste PRO verzi, která umožňuje konverzi na vzdáleném serveru

Vliv na výkon webu

Implementace WebP může mít dramatický dopad na rychlost načítání vašeho webu. V reálných scénářích jsem viděl zlepšení:

A co je nejdůležitější, tyto výhody přicházejí prakticky bez jakéhokoliv vizuálního kompromisu!

Shrnutí: Co si z článku odnést

WebP představuje jeden z nejjednodušších způsobů, jak výrazně zrychlit váš web bez nutnosti učit se složité techniky optimalizace. S pluginy jako Converter for Media nebo EWWW Image Optimizer můžete celý proces automatizovat během několika minut.

Moje doporučení pro začátečníky:

  1. Začněte s Converter for Media, který nevyžaduje žádné serverové nástroje
  2. Nastavte „Optimal“ konverzi a automatický převod nových obrázků
  3. Spusťte hromadnou optimalizaci existujících médií
  4. Ověřte výsledky pomocí DevTools nebo PageSpeed Insights

Pokud se vám formát WebP osvědčí, můžete později experimentovat s AVIF (ještě lepší komprese, ale menší podpora prohlížečů) nebo s pokročilejšími technikami optimalizace.

Bonus tip: Kombinujte WebP s Lazy Loading a správnými velikostmi obrázků pro maximální výkon!

A co vy? Jaké máte zkušenosti s optimalizací obrázků ve WordPressu? Používáte WebP nebo ještě stále spoléháte na tradiční formáty? Podělte se o své postřehy v komentářích níže!

Optimalizace obrázků: Nejlevnější zrychlení webu, které může udělat každý

Zkusili jste někdy změřit, kolik dat se na vašem webu stahuje při prvním návštěvě? Možná budete překvapeni, kolik z toho tvoří obrázky. A možná ještě víc překvapeni, jak snadno a rychle se dá jejich velikost snížit, aniž byste obětovali kvalitu.

Pro komunitu amatérských stavěčů webů je tohle zlatý důl. Nepotřebujete programovat, nemusíte mět drahý hosting, a i když používáte obyčejí WordPress, můžete udělat ohromný rozdíl. A to už během jednoho večera.

Proč optimalizovat obrázky?

1. Používejte moderní formáty: WebP a AVIF

JPEG a PNG už nejsou králi. Dnes vládnou WebP a AVIF.

Naše doporučení: Zaměřte se na WebP a nechte JPEG/PNG jako fallback.

2. Plugin zdarma, který zvládne vše za vás: Converter for Media

Jestli jedete na WordPressu, nemusíte hledat dál. Plugin Converter for Media je zdarma a funguje i na běžném hostingu bez složiteho nastavování.

Stačí nainstalovat, aktivovat a kliknout na „Start Bulk Optimization“. Hotovo.

3. Chcete jet naplno? Použijte Imagick

Pokud máte hosting, který podporuje Imagick, v nastavení pluginu ho vyberte.

Nemusíte se ničeho bát, plugin si sám rozpozná, co je dostupné.

4. Jak si ověřit, že to funguje?

  1. Pravý klik na obrázek na vašem webu
  2. „Otevřít obrázek na nové kartě“
  3. V DevTools (F12) otevřete záložku Network → Img
  4. Podívejte se na sloupec Content-Type:
    • image/webp = funguje
    • image/jpeg = ještě ne

A nebo si otevřete PageSpeed Web.dev a zkontrolujte, že už vás Google nechválí: „Serve images in modern formats“.

Na závěr: Optimalizace není magie, je to zvyk

Zvykněte si optimalizovat hned po nahrání, nebo ař to dělá plugin za vás. Ušetříte datový provoz, naštvané návštěvíky i bodíky v SEO.

Jestli stavíte weby pro sebe nebo pro známé, ukažte jim, že i amatér může mít web, který se načete rychleji než kdejaký korporátní dinosaur.

PS: Až se příště někdo zeptá, co může udělat pro rychlejší web, klidně mu pošlete odkaz na tenhle článek. Protože optimalizace není jen pro profíky. Optimalizace je nový reflex.

Optimalizace obrázků pro (nejen) amatérské stavitele webů

Optimalizace obrázků je jedním z nejjednodušších a zároveň nejefektivnějších kroků, jak zrychlit načítání webu, vylepšit SEO a nabídnout uživatelům lepší prožitek. Přitom se nemusí jednat o nic složitého – i naprostý začátečník zvládne udělat velké pokroky.

V následujícím článku se podíváme na:

  1. Proč je optimalizace obrázků tak důležitá
  2. Jaké existují formáty a jak je používat
  3. Praktické tipy na zmenšování velikosti bez ztráty kvality
  4. Jak pracují nástroje a pluginy (např. EWWW či Converter for Media)
  5. Bonus: checklist kroků pro amatérské stavitele webů

1. Proč je optimalizace obrázků důležitá

2. Formáty a jak je používat

JPEG / JPG

PNG

GIF

WebP

AVIF

3. Zmenšování velikosti obrázků bez (velké) ztráty kvality

  1. Rozměry (rozlišení)
    • Nahrajte jen tak velké fotky, jaké opravdu potřebujete.
    • Vyhýbejte se obřím 4000px obrázkům na malý webový box.
  2. Správně zvolený formát
    • Fotky většinou ve WebP / JPEG,
    • Grafika, loga, průhlednost → PNG / WebP.
  3. Komprese
    • Nastavte si úroveň kvality kolem 75–85 (u JPEG i WebP).
    • Vizuálně téměř nepoznáte rozdíl, ale velikost souboru se zmenší o desítky procent.
  4. Odstranění metadat (EXIF)
    • Datování, GPS pozice a jiné EXIF údaje často nejsou potřeba a jen navyšují velikost.
    • Většina pluginů umožní metadata odstranit.

4. Praktické nástroje a pluginy

A) Plugin EWWW Image Optimizer

B) Plugin Converter for Media

C) Další pluginy

5. Bonus: Checklist pro amatérské stavitele webů

  1. Zkontrolujte současnou velikost obrázků
    • Nástroje jako GTmetrix nebo PageSpeed Insights.
    • Identifikujte největší soubory v sekci „Opportunities“ → „Serve images in modern formats“.
  2. Vyberte správný plugin
    • Máte přístup k SSH / VPS a nainstalované nástroje: EWWW Image Optimizer
    • Sdílený hosting: Converter for Media
  3. Nastavte plugin
    • Zapněte WebP konverzi
    • Zkontrolujte, že je aktivní přepis pravidel .htaccess (Rewrite)
    • Nastavte kvalitu ~75–85
  4. Proveďte hromadnou konverzi
    • V administraci pluginu spusťte Bulk Optimization
    • Vyčkejte, až se všechny obrázky převedou
  5. Ověřte funkčnost
    • Pomocí DevTools → Network (filtr „Img“) sledujte, zda je Content-Type image/webp
    • V Google PageSpeed – koukejte, jestli zmizelo upozornění „Servírujte obrázky v moderních formátech“
  6. Zapněte caching
    • Použijte caching plugin (např. WP Rocket, W3 Total Cache). Optimalizované obrázky se budou načítat bleskově.
  7. Pravidelně kontrolujte
    • Kdykoli přidáte nové obrázky, koukněte, zda velikost není zbytečně velká.
    • Někdy se vyplatí obří fotky zmenšit už před nahráním.

Závěr

Optimalizace obrázků není raketová věda, přitom dokáže dramaticky zlepšit rychlost i uživatelský komfort. Pro amatérské stavitele webů je nejlepší cestou jednoduchý plugin, který se postará o většinu detailů:

Díky kompresi, formátu WebP/AVIF a chytrému nastavení můžete snížit datovou velikost o desítky až stovky MB. Výsledek se projeví ve vyšší rychlosti webu, lepším SEO a spokojenějších návštěvnících.

Tak se do toho pusťte – optimalizace obrázků je možná ten nejlepší poměr úsilí a zisku, jaký můžete pro svůj web udělat!

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *