Optimalizace obrázků pro WordPress: komprese, odložené načítání

Obrázky jsou důležitou součástí obsahu webových stránek, ale také „největším zabijákem“ rychlosti – neoptimalizovaný obrázek ve vysokém rozlišení (například 5 MB) může způsobit zpoždění načítání stránky o 3–5 sekund, což může uživatele přímo odradit. Naštěstí je optimalizace obrázků poměrně jednoduchá a pomocí dvou klíčových metod – „komprese velikosti“ a „odloženého načítání“ – lze dobu načítání obrázků zkrátit o více než 50%. V této sekci provedeme automatickou optimalizaci pomocí pluginů, takže i začátečníci ji mohou provést bez technických znalostí.

1. Proč je nutné obrázky optimalizovat? 3 znepokojivá fakta

• Obrázky obvykle tvoří 60–80 % celkové velikosti načítání webové stránky (což je mnohem více než text, kód a další obsah).
• S každou sekundou, o kterou se prodlužuje doba načítání, se počet uživatelů, kteří web opustí, zvyšuje o 20% (zejména u uživatelů na mobilních zařízeních, kteří jsou na rychlost obzvlášť citliví).
• Neoptimalizované obrázky přímo snižují hodnocení Google PageSpeed (což má dopad na SEO pořadí).

Hlavní cílKomprimovat velikost obrázků o 50%-80%, aniž by došlo ke znatelnému zhoršení kvality obrázků, a umožnit „načítání obrázků podle potřeby“ u obrázků, které se nezobrazí na první obrazovce.

II. Metoda 1: Komprese obrázků (automatické zmenšení velikosti pomocí pluginu)

Princip komprese obrázků spočívá v odstranění nadbytečných dat (jako jsou informace o fotoaparátu, nezobrazené detaily pixelů) a současně zachování vizuální kvality, která je pro lidské oko prakticky nezměněná. Pro automatickou kompresi se doporučuje použít plugin „Smush“, který podporuje hromadné zpracování stávajících obrázků a automatickou kompresi nově nahrávaných obrázků.

Krok 1: Nainstalujte a aktivujte plugin Smush.

1. Přihlaste se do administrace WordPressu a přejděte na „Pluginy → Instalovat pluginy“.
2. Vyhledejte „Smush“, najděte plugin označený jako „Vyvinutý společností WPMU DEV“ a klikněte na „Instalovat“ → „Aktivovat“.

Krok 2: Nastavte automatické kompresi (novým obrázkům nebude nutné provádět ruční úpravy).

Po aktivaci se plugin automaticky přesune na stránku nastavení a konfigurace bude provedena podle následujících kroků:

1. Zapněte automatické kompresiNa kartě „Nastavení“ se ujistěte, že je zaškrtnuta možnost „Automatické kompresi nově nahrávaných obrázků“ (ve výchozím nastavení je zaškrtnutá), aby mohly být nahrávané obrázky automaticky komprimovány, aniž by bylo nutné provádět tuto akci ručně.
2. Vyberte kompresní režim.：
   • Pro začátečníky doporučujeme „bezztrátové kompresi“ (výchozí možnost): odstraňuje pouze nadbytečná data, obrazová kvalita zůstává zachována a kompresní poměr je přibližně 301 TP4T – 501 TP4T.
   • Pokud hledáte vyšší kompresní poměr (například pokud je velikost obrázku stále příliš velká), můžete zvolit „ztrátovou kompresi“: s malou ztrátou kvality obrazu (pro lidské oko téměř nepostřehnutelnou) a kompresním poměrem až 60%–80% (nutné aktivovat v „Pokročilých nastaveních“).
3. Uložit nastaveníKlíkněte na „Uložit nastavení“ v dolní části stránky.

Krok 3: Hromadné komprimování stávajících obrázků (jednorázová akce pro optimalizaci celé webové stránky)

Pokud na webových stránkách již existuje velké množství nekomprimovaných obrázků (například obrázky k dříve nahráným článkům), můžete je pomocí funkce „hromadné komprese“ jednoduše optimalizovat:

1. Na stránce pluginu Smush klikněte na záložku „Hromadné Smush“ na levé straně.
2. Klikněte na „Začít nyní“ a plugin automaticky proskenuje všechny obrázky v mediální knihovně.
3. Po dokončení skenování klikněte na „Použít Smush pro XX obrázků“ a systém je zkomprimuje hromadně (tento proces může trvat několik minut, nemusíte čekat a může běžet na pozadí).
4. Zkontrolujte efekt komprese.Po dokončení komprese se zobrazí „celková úspora místa“ (například „uloženo 12 MB“) a také srovnání velikosti každého obrázku před a po kompresi.

III. Metoda 2: Odložené načítání (načítání obrázků „podle potřeby“)

Princip lazy loading spočívá v tom, že:Obraz se začne načítat, až když uživatel přejede na pozici obrázku.Tím se obrázky na první obrazovce (oblast, kterou vidíte jako první po otevření stránky) načítají přednostně, zatímco obrázky mimo první obrazovku (například obrázky k článkům nebo obrázky v zápatí) se načítají až později, což významně zkracuje dobu počátečního načítání.

Použijte plugin Smush k aktivaci odloženého načítání jedním kliknutím (bez nutnosti dalších pluginů).

Smush má vestavěnou funkci pro odložené načítání, takže nemusíte instalovat samostatný plugin. Nastavení je následující:

1. Na stránce pluginu Smush klikněte na záložku „Lazy Loading“ na levé straně.
2. Zaktivujte „Odložené načítání“ a použijte následující doporučené nastavení:
   • „Typy obrázků s odloženým načtením“: Vybrat vše (obrázky, profilové obrázky, náhledy atd.).
   • „Vyloučit obrázek na první obrazovce“: Doporučuje se zaškrtnout tuto možnost (obrázek na první obrazovce se nezpozdí, což zajistí, že uživatelé budou moci rychle vidět hlavní obsah, jakmile stránku otevřou).
   • „Načítací animace“: ponechat jako výchozí (zobrazí mírnou animaci, která uživateli naznačí, že se obrázek načítá).
3. Klikněte na „Uložit nastavení“ a zpožděné načítání se okamžitě aktivuje.

Ověřte, zda funguje odložené načítání.

1. Otevřete libovolnou stránku článku na webu (obsahující více obrázků) a stiskněte F12 pro otevření „Nástrojů pro vývojáře“ prohlížeče.
2. Klikněte na záložku „Síť“, obnovte stránku a sledujte, jak se obrázky načítají:
   • Při počátečním načítání se v seznamu „Síť“ zobrazí pouze obrázky na první obrazovce.
   • Scrolujte dolů na stránce a když se do zorného pole dostanou obrázky, které nejsou na první obrazovce, záznamy o načítání těchto obrázků se objeví v seznamu „Síť“, což znamená, že funkce odloženého načítání je aktivní.

4. Další tipy pro optimalizaci obrázků, které musí nováčci znát.

1. Vyberte správný formát obrázku (což je ještě základnější než komprese).

Před nahráním obrázků zvolte vhodný formát, abyste snížili jejich velikost již od samého začátku:

• Fotografie / komplexní obrázkyS použitím formátu WebP (o velikosti o 301 % menší než JPG a s lepší kvalitou obrázků) může plugin Smush automaticky převést JPG/PNG na WebP (za předpokladu, že je v „Rozšířených nastaveních“ aktivována možnost „Automaticky převést na WebP“).
• Jednoduché grafiky / ikonyPoužijte formát PNG (podporuje průhledné pozadí a je menší) a vyhněte se používání formátu JPG.
• Rozhodně nepoužívejte formáty BMP a TIFF.Tyto formáty jsou příliš velké a nejsou vhodné pro použití na webových stránkách.

2. Kontrolujte velikost obrázků (nepoužívejte „velké obrázky zmenšené pro zobrazení“).

Mnoho začátečníků přímo nahrává fotografie ve vysokém rozlišení pořízené fotoaparátem (například 3000×2000 pixelů) a poté je pomocí nastavení WordPressu zobrazuje ve velikosti 300×200 pixelů – což je chyba! Prohlížeč totiž stále načítá původní velký obrázek, což je plýtvání šíří připojení a časem.

Správný postup：

• Před nahráním fotografie si pomocí grafického nástroje (například aplikace Paint, která je součástí operačního systému, nebo online nástroje Canva) ořízněte obrázek na skutečnou velikost zobrazení (například šířka banneru na úvodní obrazovce by měla být 1200 pixelů).
• Pokud neumíte používat nástroje pro obrázky, můžete nainstalovat plugin „Imsanity“, který automaticky zmenší velké nahrané obrázky na určenou velikost (například maximální šířku 1200 pixelů).

3. Vyhněte se zneužívání obrázků (ne více, ale ani méně).

• Pokud je možné něco vysvětlit pomocí textu, nepoužívejte k tomu obrázky (například jednoduché návody krok za krokem).
• Více po sobě jdoucích obrázků lze sloučit do koláže (například při prezentaci produktů) a tím snížit počet současně načítaných obrázků.

5.Řešení běžných problémů

1. Kvalita obrázků po kompresi se znatelně zhoršila?

• Pokud používáte „ztrátovou kompresi“, můžete v nastavení Smush snížit intenzitu komprese („Pokročilá nastavení“ → „Intenzita komprese“ na 50%).
• Doporučuje se přednostně používat „bezztrátové kompresi“ a „formát WebP“, což umožní najít rovnováhu mezi velikostí souboru a kvalitou obrázku.

2. Způsobuje zpožděné načítání neobvyklé zobrazení obrázků (například prázdné nebo nesprávně umístěné)?

• Zkontrolujte, zda jste vyloučili obrázky na první obrazovce (pokud je nevyloučíte, může dojít ke zpoždění načítání obrázků na první obrazovce a k dočasnému prázdnému displeji).
• Pokud je nutné okamžitě načíst některé obrázky, můžete v nastavení „Odložené načítání“ v aplikaci Smush zadat název třídy CSS obrázku do pole „Vyloučit“ (vyžaduje to malé znalosti kódu; začátečníci mohou dočasně vypnout odložené načítání na stránce, kde se daný obrázek nachází).

3. Není zlepšení rychlosti po optimalizaci příliš výrazné?

• Znovu otestujte pomocí GTmetrix (odkaz). Nástroje pro kontrolu rychlosti webových stránekNyní se podívejte na „vodopádový graf“, abyste zkontrolovali, zda se doba načítání obrázků zkrátila.
• Pokud je to stále pomalé, mohou to být jiné faktory (například pomalá reakce serveru nebo příliš mnoho pluginů), a je potřeba zvážit další metody optimalizace (například aktivovat mezipaměť).

Závěr

Optimalizace obrázků je nejefektivnější způsob, jak zvýšit rychlost webových stránek – pomocí pluginu Smush můžete za 10 minut nastavit tak, aby se doba načítání obrázků zkrátila o více než 501 kB. Hlavní kroky jsou: nainstalovat Smush → zapnout automatickou kompresi a hromadnou kompresi → aktivovat odložené načítání (kromě obrázků na první obrazovce).

Mějte na paměti, že zásadou optimalizace obrázků je „dostatečně dobré“: nemusíte usilovat o maximální kompresní poměr ani nahrávat obrázky ve velmi vysokém rozlišení. Nejlepším řešením je najít rovnováhu mezi kvalitou obrázků a rychlostí načítání, aby uživatelé mohli obsah vidět jasně a stránky se rychle načítaly.