Optimalizace obrázku 
Proč je důležitá a 4 kroky, jak ji dosáhnout 

Určitě souhlasíte s tím, že obrázky jsou nezbytnou součástí webových stránek. Bez nich by to prostě nebylo “ono”. Obrázky ale také ovlivňují rychlost načítání webových stránek, protože jde o daleko větší soubory, než je pouhý text. Proto je velmi důležité naučit se s vizuálním materiálem pracovat tak, abyste udrželi co nejnižší dobu načítání stránek.

Proč je optimalizace vizuální obsahu důležitá?

Jistě, můžete obrázky úplně vynechat a žádné na svůj web nevkládat. Tím ale vaše webové stránky ztratí na přitažlivosti a s největším pravděpodobností skončí neúspěchem.

Obrázky jsou “mocný” nástroj, zvyšují atraktivitu a pomáhají nastavit správný vizuální zážitek z webových stránek.

Obrázky ale mají i stinnou stránkou. Velké množství neupravených obrázků totiž zpomaluje načítání stránek a na rychlost načítání webových stránek nahlíží všechny vyhledávače včetně Google.

Proč tomu tak je?

• Obrázky zabírají velkou část webových stránek
• Čím větší stránky jsou, tím déle trvá jejich načítání
• Rychlost načítání delší než 3 sekundy zvyšuje pravděpodobnost opuštění stránek až o 32 %

Obrázky, jak je známo, jsou několinásobně větší než samotný text. Pokud je na své stránky obrázky vložíte v původní velikosti, zvýšíte celkovou velikost stránek a tím dojde ke zpomalení jejich načítání.

Dnešní uživatelé internetu jsou ale zvyklí na rychlý internet, na rychlé načítání stránek a nemají trpělivost čekat. Pokud se některé stránky načítají déle než pár vteřin, odejdou raději na jiné rychlejší, byť obsahově horší stránky.

Jediným řešením jak se pomalému načítání vyhnout je optimalizace obrázků. V tomto článku se zaměříme na nejlepší způsoby, jak dosáhnout ideálního stavu.

1. Oříznutí nebo změna velikosti obrázků

Nejjednodušším způsobem, jak snížit velikost souboru, je oříznutí obrázku. Představte si obrázek jako soubor jednotlivých pixelů. Každý pixel navíc hraje významnou roli. Oříznutím odstraníte nepodstatný obsah a zdůrazníte to podstatné. A to hlavní - snížíte velikost obrazků.

2. Ztrátové a bezztrátové komprese obrázků

Komprese (tj. zmenšení velikosti souboru obrázku) před publikací příspěvku by mělo být standardní praxí. Nicméně není komprese jako komprese a je třeba také trochu přemýšlet o zvoleném typu komprese. V podstatě existují dva typy komprese. Jak jste jistě uhodli z názvu kapitoly, jedná se o ztrátové a bezztrátové komprese.

Při ztrátové kompresi obrázku dochází ke zmenšení velikosti obrázku vynecháním pixelů v místech, které obklopují totožné nebo podobné pixely. Lidský mozek si tato místa podvědomě vyplní, aniž by to oko zaregistrovalo.

Obraz tedy vypadá jako původní, je však výrazně menší. Rozdíl poznáte pouze tehdy, pokud si obrázek přiblížíte.

Pokud si ale přejete, aby byl obrázek stejný i po přiblížení, je nutné použít bezztrátovou kompresi. Tento typ komprese “nemaže” pixely, obrázek zůstane neporušený a ostrý a o něco menší.

Oba typy lze zkombinovat a získat tak obrázek s tzv. vyskou kompresní rychlostí. Vyzkoušet můžete některý z následujících online nástrojů.

• Compressor.io

• Smush.it

• TinyPNG (mají plugin WordPress) - jakýkoliv obrázek lze zmenšit pod 200 kB

3. Typ souborů

Než se rozhodnete, jakou techniku použijete, nezapomeňte na konečné použití obrázku.

Když upravujete obrázky, které plánujete použít na svých webových stránkách, čeká vás volba optimálního typu souboru, který je založený na tzv. konečném použití.

• JPEG - nejčastěji používaný formát obrazu, ideální pro složité obrázky a fotografie. Má rozsáhlou barevnou kompresi a pro úpravu lze použít ztrátové i bezztrátové kompresní techniky upravující jak velikost, tak i kvalitu.
• PNG - vhodné pro loga a jednodušší snímky. Obrázky jsou ostré a barevně bohaté, ale mají větší velikost. Použít lze pouze bezztrátové techniky.
• GIF - ideální pro animované obrazy nízké kvality, protože podporují animaci. Jsou však omezené pouze na 256 barev a použít lze pouze bezztrátovou kompresi.
• SVG - formát vektorového obrazu založeného na XML. Opět používá pouze bezztrátovou kompresi. Díky použití vektorové grafiky má nejmenší velikost souboru a hodně se používá pro loga a geometrické obrázky. Stejný obrázek JPEG se 75% kompresí o velikosti 30 kB by ve formátu SVG měl pouze 6-7 kB. To znamená, že obraz je čistě vektorová grafika. Navíc SVG podporuje animaci a interaktivitu. Do SVG souboru tedy můžete vložit bitmapovou mapu. Počítejte ale s tím, že dojde k zvětšení velikosti souboru.

4. Pryč s nežádoucími metadaty

Při vyfocení obrázku často dojde k uložení obrázku společně s dalšími metadaty. Tyto metadata ale nejsou nic jiného než nepotřebné detaily jako značka a model fotoaparátu, ISO, rychlost závěrky, datum, čas atd. Tato metadata nejsou důležitá a zbytečně zvyšují velikost obrázku.

Jejich odstraněním opět snížíte velilkost souboru. Použít můžete online nástroje, nebo tak učinit ručně podle následujícího návodu.

1. Klikněte pravým tlačítkem myši na obrázek a vyberte “Vlastnosti”.
2. Zvolte možnost “Podrobnosti” a klikněte na tlačítko “Odebrat vlastnosti a osobní údaje”.
3. Vyberte vlastnosti, které si přejete odstranit, potvrďte tlačítkem “Ok”.

5. Zvolte správnou grafiku

Předtím, než obrázek upravíte do finální podoby, je třeba zvážit také výběr grafiky podle jeho použití. V případě digitálních obrázků máte na výběr mezi dvěma základními typy grafiky - rastrové a vektorové grafiky. Rastrové obrázky jsou větší než vektorové obrazy. Hned si vysvětlíme, proč tomu tak je.

Rastrová grafika používá obrazové body pro vytváření obrazů. S rastrovou grafikou lze vytvářet velice bohaté obrázky s vysokou úrovní detailů bez ohledu na nepravidelnosti tvarů.

Naproti tomu vektorová grafika používá body, čáry, mnohoúhelníky apod. Není proto vhodná pro obrázky, které mají složitou a nepravidelnou strukturu.

 Naopak je ideální pro obrázky geometrické povahy, jako jsou loga, ikony apod.

6. Nezapomínejte na alternativní popisek

Ke každému obrázku na webu můžete doplnit alternativní popisek (alt tag), který pomáhá vyhledávačům zjistit, co je na obrázku zobrazeno. To má zásadní vliv na výsledky vyhledávání, proto se jedná o důležitý nástroj pro optimalizaci obrázků. Je to vždy lepší než ponechat obrázek bez popisku a učinit z něj pro vyhledávače zcela neznámý obsah. Navíc “Alt tag” pomáhá popsat obrázek osobám se zrakovým postižením

Popisek přidáte vložením textu do kódu HTML za značku obrázku následujícím způsobem:

<img src = "road view.jpg" alt = "tmavá opuštěná cesta">

Používáte-li systém CMS (např. WordPress), nabízí se možnost zvolit obrázek. Alternativní text by měl být vždy krátký a stručný (max. devět slov).

7. Název obrázku 

Umístíte-li kurzor myši na obrázek, objeví se název obrázku. Ten tam dostanete tím, že jej zahrnete do kódu HTML nebo vyplníte pole “Title” v aplikace WordPress či jiném podobně uživatelském rozhraní CMS.

Používáte-li HTML, vložte název obrázku následujícím způsobem:

<img src = "road view.jpg" title = "tmavá opuštěná cesta">

8. Titulek obrázku 

Je další způsob, jak vyhledávačům poskytnout přesnější informace o tom, co je na obrázku. Titulek se obvykle zobrazuje pod nebo nad obrázkem.

 Zpravidla se jedná o krátký popisek, může ale jít i o delší text oproti alternativnímu popisku. Většinou se na titulek obrázku používá kurzíva.

4 kroky, jak provést optimalizaci vizuálního obsahu pro WordPress 

Následující 4 kroky vám pomohou provést zázraky, co se týče rychlosti načítání vašich webových stránek. Stačí je důsledně dodržovat.

Nejprve byste měli optimalizovat již použité obrázky a teprve poté tyto techniky aplikovat na nové obrázky. Aby při optimalizaci stávajících obrázku nedošlo ke zmatku, zvlášť je-li obrázku opravdu hodně, provedeme vás procesem krok za krokem.

Krok 1: Vytvořte seznam obrázků

Než se pustíte do optimalizace, vytvořte si seznam použitých obrázků (inventář). Díky tomu se vyhnete zmatku, které obrázky jste již upravili, a které nikoliv. Při vytváření seznamu si můžete pomoci online nástroji (např. Screaming Frog).

Krok 2: Smažte nepotřebné obrázky

Hotový seznam projděte a odstraňte všechny obrázky, které jsou zbytečné. Nechcete-li je odstranit úplně, můžete je nahradit webovými písmy. Může to fungovat lépe.

Krok 3: Ujistěte se, že je velikost souborů optimální

Prostřednictvím nástroje Screaming Fog můžete například nastavit maximální velikost pro každý obrázek a vytřídit příliš velké obrázky. Na ty se pak můžete zaměřit a upravit je.

Krok 4: Přidejte alternativní popisky

Nyní znovu projděte obrázky a aplikujte změny v souladu s postupy, které jsme popsali výše. K obrázkům přidejte alternativní popisky (alt tagy) atd.

Tyto čtyři kroky představují základní postup, který aplikujte při nahrávání nových obrázků. Je to však také velmi účinný nástroj pro optimalizaci již uložených obrázků.

Závěrečné shrnutí

Optimalizace vizuálního obsahu webových stránek pro WordPress je klíčová ze dvou hlavních důvodů. Za prvé přímo drasticky snižuje velikost stránek a za druhé zvyšuje rychlost jejich načítání.

Optimalizované stránky jsou uživatelsky přívětivější a snižují riziko odchodu návštěvníků ze stránek.

Optimalizace obrázků stručně v 5 bodech:

• Ořízněte nebo zmenšete velikost obrázku
• Zvolte vhodný typ komprese
• Vyberte správný formát obrázků z hlediska použití
• Ostraňte nepotřebná metadata
• Zvolte nejlepší grafiku pro typ obrazu

Rychlá optimalizace pro SEO ve 3 krocích:

• Doplňte k obrázkům alternativní popisky (alt tag)
• Doplňte názvy obrázků
• Popište obrázky (titulky)

Pokud však chcete dosáhnout skutečné optimalizace webových stránek pro vyhledávače, je potřeba podívat se na všechny aspekty SEO. 

Tyto konkrétní kroky vám pomohou alespoň optimalizovat vizuální obsah webových stránek tak, aby si jejich návštěvník odnesl bezproblémový a informačně či jinak hodnotný zážitek.

Originál článku: https://blog.linkody.com/seo/wordpress-image-optimization

Autor: Helvis Smoteks