Optimalizace obrázků pro WordPress: komprese velikosti, přidání atributu alt (zlepšení rychlosti a SEO)

Obrázky jsou “krásnou součástí” webové stránky, ale pokud s nimi není nakládáno správně, mohou se stát “zátěží”, která zpomalí načítání webové stránky, a také ztracenou příležitostí ke zlepšení SEO. Klíčem k optimalizaci obrázků je “zmenšit jejich velikost, aniž by to mělo negativní dopad na vizuální efekt”, a také “umožnit vyhledávačům porozumět obsahu obrázků”.Komprimujte velikost和Přidejte alt tag.Jsou to dvě nejzákladnější a nejúčinnější metody.

1. Proč je třeba optimalizovat obrázky?

Než začnete klást důraz na tento krok, musíte nejprve pochopit důležitost optimalizace:

• Zvýšit rychlost načítání.Neoptimalizované velké obrázky mohou prodloužit dobu načítání stránky a návštěvníci mohou stránku opustit dřív, než se načte (studie ukazují, že návštěvníci webu 53% opouštějí stránku, pokud se načítá déle než 3 sekundy).
• Ušetří to místo na serveru.Komprimované obrázky mají menší velikost, což snižuje zatížení serveru a spotřebu dat (což je obzvláště důležité u serverů, na kterých se účtuje za datový provoz).
• Pomozte s SEO hodnocením.Vyhledávače (jako například Baidu a Google) nejsou schopné obrázky přímo “pochopit”, ale mohou porozumět jejich obsahu pouze na základě textových informací (jako například značky alt). Optimalizace obrázků může vést k tomu, že se tyto obrázky budou více zobrazovat ve výsledcích vyhledávání.
• Přizpůsobené pro mobilní zařízení.Uživatelé mobilních telefonů mají omezený datový tarif, takže menší obrázky mohou snížit spotřebu dat při načítání a zlepšit uživatelskou zkušenost na mobilních zařízeních.

II. Komprese obrázků: snížení velikosti bez ztráty kvality obrázku.

Principem komprese obrázků je odstranění nadbytečných pixelových informací (například barevných odstínů, které jsou pro lidské oko téměř neviditelné), což umožňuje zmenšit velikost souboru při zachování vizuální kvality. Pro začátečníky doporučujeme použítPlugin automaticky komprimuje.Není nutné provádět žádné ruční operace.

Metoda 1: Automatické kompresi pomocí pluginu (doporučeno pro začátečníky)

Doporučené pluginy: Smush nebo ShortPixel (bezplatná verze je dostačující)

以 Smush Například postup je následující:

1. Installation of the plugin: Backend [Plugins] → [Install Plugin] → Search for “Smush” → Click [Install] → [Activate].
2. Základní nastavení:
   • Po aktivaci přejděte na stránku nastavení pluginu a zaškrtněte políčko “Automatické kompresování nově nahrávaných obrázků” (nové nahrávané obrázky budou automaticky komprimovány, aniž by bylo nutné provádět tuto akci ručně).
   • Klkněte na “Hromadné kompresi” a vyberte “Komprimovat všechny obrázky” (komprimujte staré obrázky, které jste nahráli do mediální knihovny).
3. Počkejte, až se komprese dokončí: plugin zobrazí průběh komprese a ušetřený prostor (například “Bylo komprimováno 50 obrázků, což ušetřilo 20 MB prostoru”).

VýhodyPlně automatické zpracování, podpora hromadné komprese, bezplatná verze vyhovuje potřebám malých a středních webových stránek (bezplatná verze Smush umožňuje kompresi jednotlivých obrázků do velikosti 5 MB, bezplatná verze ShortPixel umožňuje kompresi 100 obrázků za měsíc).

Metoda 2: Ruční komprese před nahráním (vhodná pro ty, kteří usilují o maximální optimalizaci)

Pokud je obrázek velmi velký (například původní fotografie pořízená fotoaparátem, která může snadno přesáhnout 10 MB), doporučuje se nejprve jej komprimovat ručně na počítači a poté nahrát na webové stránky:

1. Online nástroje(Není nutné instalovat software):
   • TinyPNG (\ntinypng.comPodporuje PNG a JPG, má vysokou míru komprese a malou ztrátu kvality obrázků. Najednou lze nahrát až 20 obrázků.
   • Nástroj pro kompresi obrázků, který podporuje formát WebP (o velikosti o 301 % menší než JPG).
2. Návod k použití：
   • Otevřete nástroj → Nahrajte obrázek → Počkejte, až se kompresi dokončí → Stáhněte komprimovaný obrázek → Nahrajte jej do mediální knihovny WordPressu.

Vhodné pro danou situaci.Hlavní stránka, banner, hlavní obrázek na stránce s podrobnostmi o produktu a další důležité obrázky – ruční komprese umožňuje přesnější kontrolu kvality obrázků.

Poznámky k kompresi:

• Běžné obrázky (například ilustrace k článkům) lze zkomprimovat na Méně než 200 KB. To je vše. Velikost hlavního obrázku na domovské stránce by měla být omezena na Do 1 MB。
• Používejte přednostně Format WebP(WordPress 5.8+ již tuto funkci nativně podporuje) oproti JPG má přibližně o 50 % menší velikost při stejné kvalitě obrázku.
• Vyhněte se nadměrnému komprimování: kompresní poměr vyšší než 801 TP4T může vést k rozmazání obrázků, zejména u obrázků s velkým množstvím textu (například screenshoty, infografiky).

III. Přidejte alt tagy: nechte vyhledávače “porozumět” obrázkům.

“Alt tag” (neboli “atribut alt”) je “textový popis” obrázku, který se zobrazí v případě, že se obrázek nenačte kvůli problémům s internetem. Co je ale důležitější, vyhledávače pomocí něj rozpoznají obsah obrázku, což ovlivňuje jeho pořadí ve výsledcích vyhledávání.

Proč je nutné přidat alt tagy?

• Příklad 1: Pokud obrázek “červených tenisek” nemá alt tag, vyhledávače jej mohou identifikovat pouze jako obrázek. Po přidání alt tagu “červené tenisky – lehké a prodyšné” jej vyhledávače spojí s výsledky vyhledávání souvisejícími s “červenými teniskami”.
• Příklad 2: Pokud se obrázek nenačte, návštěvníci uvidí text v atributu alt a budou vědět, jaký obrázek by zde měl být (místo prázdného místa nebo ikony “Obrázek nelze zobrazit”).

Jak přidat alt tagy?

Metoda 1: Přidejte ji přímo při nahrávání obrázku (doporučeno)

1. Nahrát obrázek (ať už pomocí mediální knihovny nebo editoru) a v následně otevřeném okně nastavení obrázku najít pole pro “alternativní text” (tj. značku alt).
2. Zadejte popis:
   • Krátké a přesné (ideálně 10–15 slov), obsahující hlavní informace o obrázku (například “Recepce v kanceláři společnosti” nebo “Vzhled notebooku pro rok 2023”).
   • Vyhněte se hromadění klíčových slov (jako například “vytvoření webových stránek pomocí WordPressu, webdesign, design webových stránek, společnost”), což je neúčinný popis.
   • Pokud jsou obrázky dekorativní (například oddělovače, vzory na pozadí), můžete je ponechat prázdné nebo označit jako “dekorativní obrázky” (aby se zabránilo zavádění vyhledávačů).
3. Klikněte na “Vložit do článku” a alt tag se automaticky aktivuje.

Metoda 2: Přidání/úprava atributu alt pro nahrané obrázky

1. Přejděte do nabídky „Média“ → „Knihovna“, najděte obrázek, který chcete upravit, a klikněte na něj, abyste se dostali na stránku pro úpravy.
2. Zadejte nebo upravte obsah v poli “Alternativní text” na pravé straně a poté klikněte na „Aktualizovat“.

Značka alt oproti titulku a popisku: Nespleťte si to!

Mnoho začátečníků si tyto tři pojmy plete. Zde je jejich jednoduché rozlišení:

• Tag alt (alternativní text): Pro vyhledávače a pro případ, kdy se načtení nepodaří, ovlivňuje SEO, je nutné to vyplnit.
• Název (Title)Text zobrazený při přejetí myší nad obrázkem (volitelné, vhodné pro doplnění podrobností, například “Klikněte pro zobrazení vysokého rozlišení”).
• Popis (Caption)Text zobrazený pod obrázkem (podobný popisku obrázku, například “Obrázek 1: Scéna z firemního setkání”; vyplňte podle potřeby).

4. Časté problémy začátečníků

1. Musí být všechny obrázky opatřeny atributem alt?Téměř ano. Kromě čistě dekorativních obrázků (jako je například jednobarevné pozadí nebo rámečky) je nutné přidat všechny ostatní obrázky, které obsahují skutečný obsah (obrázky produktů, lidí, scén atd.), což je základní požadavek SEO.
2. Co mám dělat, když se obrázek po kompresi zmatne?Změňte intenzitu komprese (kompresní poměr lze upravit v pluginu) nebo použijte nástroj pro ruční kompresi (jako například TinyPNG) k opětovné kompresi a zachování vyšší kvality obrázků.
3. Nezobrazují se obrázky ve formátu WebP ve starších prohlížečích?Moderní prohlížeče (Chrome, Edge, Firefox, Safari verze 14 a novější) podporují WebP. Starší prohlížeče (jako například IE) se již jen zřídka používají, takže si s tím nemusíte příliš dělat starosti. Pokud potřebujete kompatibilitu, můžete si nainstalovat plugin “WebP Express”, který automaticky poskytne alternativní verzi JPG pro starší prohlížeče.
4. Po optimalizaci obrázků se rychlost webové stránky nezměnila?Možná to ovlivňují jiné faktory (například pomalý server nebo příliš mnoho pluginů). Nejprve to můžete zkontrolovat pomocí nástroje GTmetrix a podívat se, zda je “velikost obrázků” stále hlavním problémem.

Optimalizace obrázků je operace s “nízkými náklady a vysokými výnosy”: stačí věnovat 10 minut nastavení pluginů a přidání alternativních textů, a výrazně tak zlepšit rychlost webu a výkon SEO. Pokud si osvojíte návyk “vždy optimalizovat při nahrávání”, vaše webové stránky budou u návštěvníků a vyhledávačů oblíbenější.