Pro mnoho podnikatelů a marketérů je vizuál nezbytný pro jejich podnikání. Obrázky mohou mít ohromný dopad jak na uživatele, tak na výkon webu, a proto je zvládnutí optimalizace obrázků zásadní pro pohodu vašeho webu.
Co přesně je optimalizace obrázků a jak optimalizujete obrázky pro webové stránky? Podělíme se s vámi o všechny nezbytné kroky, o které se musíte postarat, aby se vaše snímky načítaly bez problémů.
V tomto shrnutí vás provedeme následujícími tématy:
Při optimalizaci obrázků zmenšíte jejich velikost, aniž byste ohrozili kvalitu obrázku. A když zmenšíte velikost souborů, vaše stránky se načítají rychleji. To je důležité jak pro vaše SEO, tak pro vaše návštěvníky. Čím rychleji se váš obsah plně načte, tím nižší bude míra okamžitého opuštění. Další věc, kterou je třeba mít na paměti, pokud jde o obrázky, je nutnost dobrého rozlišení, což znamená vysoce kvalitní obrázky. Zvýšení rozlišení obrázku pomocí nástrojů, jako je Photoshop, je poměrně snadné, takže se musíte omluvit, že na tom šetříte. Ale vraťme se k našemu dnešnímu tématu, kterým je optimalizace obrazu pro účely rychlosti.
Zhruba před deseti lety se Google rozhodl zahrnout rychlost webu mezi své relevantní hodnotící faktory. Jeden z jejich webmasterů, John Mueller, to napsal v roce 2016 načítání webových stránek by mělo trvat méně než 2–3 sekundy, a to je aktuální dodnes.
Postupem času Google dokonce vyvinul nástroje jako např Google PageSpeed Insights, abychom lidem pomohli vyhodnotit rychlost jejich webu. Ke stejnému účelu slouží nespočet dalších nástrojů, např Pingdom, GTmetrix, nebo Hmotnost stránky (což vám řekne, jak moc obrázky ovlivňují rychlost vaší stránky), ale PageSpeed Insights zůstává mezi odborníky na SEO poměrně populární.
Pro lepší hodnocení nezapomeňte používat optimalizační nástroje, z nichž některé jsou zcela zdarma.
Pokud jsou vaše obrázky příliš velké, Google je pravděpodobně nebude schopen procházet a indexovat, což může být dalším faktorem přispívajícím k nižšímu hodnocení.. Nezapomeňte, že někteří z vašich návštěvníků pocházejí z Vyhledávání obrázků Google (můžete zkontrolujte návštěvnost obrázků v Google Analytics), tak se snažte je zachovat.
Další výhodou použití menších souborů obrázků je to můžete vytvářet zálohy během okamžiku. Také zabírají méně místa v úložišti (což by snížilo náklady na úložiště záloh) a zabírají menší šířku pásma. Většina hostingových plánů přichází s určitými limity šířky pásma na plán, takže byste měli své obrázky používat chytře.
Formátování souboru
Začněme tím, že si ukážeme, jak vybrat vhodný formát souboru. Existuje mnoho formátů obrázků, ale tři nejběžnější jsou:
Rozměry obrázku
Snímky pořízené chytrým telefonem nebo profesionálním fotoaparátem mají velká rozlišení kolem 300 dpi a rozměry minimálně 2000 px a více. Fotografie tak velké se ale na weby nehodí, jejich načítání trvá věčnost. Jistě chcete, aby vaše vizuály vypadaly působivě, ale přesto musí být doba načítání nízká. Proto je potřeba změnit velikost obrázku ve Photoshopu nebo jiný software pro úpravu obrázků podle vašeho výběru, než je přidáte na svůj web. Na samotném rozlišení nakonec nezáleží tolik jako na váze obrazu, která se musí držet pod 100 kb, nebo max. 150 kb. Ale o tom více v další kapitole.
Komprese obrazu
Pokud to přeženete a obrázek příliš zkomprimujete, bude to mít za následek malou velikost souboru a nízkou kvalitu obrázku. Na druhou stranu, když kompresní poměr není velký, obrázky mají vysokou kvalitu, ale jsou také velké.
Jako pravidlo palce, celková váha vašeho webu by neměla přesáhnout 2 MB. V ideálním případě by velikost rychle se načítajícího webu měla pohybovat kolem 1 MB.
s tím na mysli zvažte, zda by vaše obrázky neměly mít velikost přibližně 150 kB nebo menší. Pokud používáte formát PNG, nepřekračujte 100 kB.
Existují dva typy komprese: ztrátová a bezztrátová.
Ztrátová nebo nevratná komprese znamená, že některá data a kvalita budou z původní verze ztraceny. I poté, co značně zmenšíte velikost souboru, bude se zdát, že zde nejsou žádné znatelné rozdíly. Samozřejmě při bližším zkoumání budou tyto rozdíly patrnější. Pokud je velikost nového souboru příliš malá, můžete na obrázku vidět některé oblasti s pixely a zubaté okraje.
Bezeztrátová komprese je metoda, která umožňuje zmenšit velikost obrázku bez snížení jeho kvality. Při bezztrátové komprimaci souboru se neztratí žádná data, což znamená, že původní data lze kdykoli obnovit. Protože však nejsou odstraněna žádná data, soubory nelze komprimovat o více než 50 %.
Název obrázku
Nepřehlédněte tento krok. Přiřazování správných jmen souborům obrázků je důležité pro SEO obrázků, protože Google a další vyhledávače procházejí názvy souborů obrázků. Vyhněte se obecným názvům, ale jděte spíše popisnou cestou a zahrnout klíčová slova. Pokud je například na vašem webu obrázek auta, můžete v názvu souboru uvést jeho značku a model.
Je to také důležité optimalizovat atributy alt neboli textové alternativy k obrázkům. Pokud z nějakého důvodu prohlížeč nemůže vykreslit obrázek, zobrazí se místo něj alternativní text. Atributy alt se zobrazí, i když se stránka plně načte, když najedete myší na obrázek. Docela na nich záleží, protože ovlivňují SEO vašeho webu a zvyšují šance, že se vaše obrázky objeví ve vyhledávání obrázků Google. Dejte si pozor, abyste své alt atributy nepřeplnili klíčovými slovy, protože vyhledávače vás za to mohou penalizovat.
Náhled rozmazaného obrázku
Tento krok je o všem vytvoření dojmu rychle se načítajících vysoce kvalitních obrázků tím, že nejprve načtete méně kvalitní verzi obrázku. Zatímco vaši návštěvníci čekají na úplné načtení webu, zobrazí se menší verze obrázku. Je roztažený na původní velikost a zdá se rozmazaný, ale trvá to jen krátkou dobu, než se načte obrázek v plné velikosti. Ačkoli to vyžaduje určité základní znalosti CSS, vytvoření efektu rozostření je vlastně docela proveditelné.
Nástroje pro optimalizaci obrázků vám umožňují upravovat obrázky podle vašich potřeb. Můžete je komprimovat, měnit typy souborů, upravovat rozměry obrázků atd.
Adobe Photoshop
Nejoblíbenějším nástrojem pro úpravu obrázků je bezesporu Adobe Photoshop. Obsahuje některé působivé funkce pro úpravu obrázků, ale Uložit pro web volba je obzvláště zajímavé.
Pokud potřebujete zmenšit velikost jedné ze svých fotografií, aniž byste ohrozili její kvalitu, použijte tuto možnost. Umožní vám to vyberte typ obrázku, kvalitu obrázku a rozměry. Dávejte pozor na Kvalita a rozostření možnosti. Jejich úpravou (i bez dotyku na další nastavení) můžete zachovat vysoce kvalitní obraz, který příliš nezatěžuje.
Pluginy pro optimalizaci obrázků ve WordPressu
WordPress přichází se spoustou šikovných pluginů, které vám pomohou optimalizovat vaše fotografie bez přílišného zmatku. Ale bez ohledu na to, jak mocný je každý z nich, stále byste měli změňte velikost obrázků před jejich nahráním na WordPress, jinak byste mohli přijít o spoustu vzácného hostingového prostoru.
Některé z nejlepších pluginů pro optimalizaci obrazu zahrnují Optimole, EWWW Image Optimizer Cloud, Představte si, Smush, Optimus – WordPress Image Optimizer, a Komprimujte obrázky JPEG a PNG.
Smush je nejoblíbenější, s více než 1 milionem aktivních stažení, ale bez ohledu na to, jaký plugin si vyberete, všechny vám pomohou optimalizovat obrázky, aby se vaše webové stránky načítaly rychleji. Jediná věc, na kterou byste si mohli dát pozor, je to plugin, který nainstalujete, může komprimovat a optimalizovat obrázky externě na svých vlastních serverech. Rychlost načítání stránky tak nebude ovlivněna velikostí obrázků.
Závěr
Optimalizace obrázků je jedním z určujících faktorů pro bezchybný výkon vašeho webu. Pokud to uděláte špatně, riskujete nízké hodnocení, vysokou dobu načítání, stejně jako obrovské okamžité opuštění a nízkou míru konverze. Správná optimalizace obrázků vám nejen pomůže vést úspěšnější online obchod, ale ušetří vám spoustu místa na úložišti, které budete jistě potřebovat, protože se váš web neustále vyvíjí a rozšiřuje.
Ze špatného UX nikdy nevzešlo nic dobrého, takže se řiďte našimi tipy, jak optimalizovat obrázky pro web, a váš web bude fungovat jako hodinky.
Podpořte naši práci ❤️
Pokud se vám tento článek líbil, zvažte zaslání spropitného, abychom mohli i nadále vydávat kvalitní obsah.
