Optimalizace obrazu pro zvýšení rychlosti a propagace webových stránek - Semalt Expert

Obrázky jsou samozřejmě po textu jednou z nejdůležitějších součástí webu. Web bez obrázků bude pro surfaře obvykle nudný a méně motivující než web, který má obrázky.

Existuje také poměrně málo oblastí, kde je použití obrázků povinné a dokonce nezbytné k odůvodnění stránky.

Například:

Online obchodní weby
Portfoliové weby a zobrazení děl
Stránky s obrázky, kde jsou „produktem“ fotografie - například svatební šaty, fotografie událostí atd.
Sociální sítě - Stále více studií poukazuje na skutečnost, že příspěvky s fotkami získávají mnohem více komentářů a sdílení, a to o značné procento ve srovnání s příspěvky a statusy bez fotografií

Propagace obrázků Google: správné používání obrázků

Investovali jste a zakoupili fotografie z fotografických webů/úložišť obrázků, nebo jste si dokonce sami zvětšili a pořídili fotografie? Měli byste je také maximalizovat pro účely SEO!

Google Image Promotion je jedním z nejlepší způsoby, jak zvýšit návštěvnost webových stránek v určitých oblastech - zejména v těch, které se zaměřují na vizuální stránku.

Navzdory výše uvedenému může nesprávné použití obrázků webu způsobit více škody než užitku a dokonce výrazně zhoršit propagační úsilí. Když mluvíme o použití obrázků v v kontextu ekologické propagaceJe důležité mít na paměti také několik pravidel. Nesprávné použití obrázků může výrazně snížit rychlost webu, a proto může mít významný dopad na propagaci.

Základní pravidla optimalizace obrazu:

1. Hmotnost a rozměry obrázku

Jedním z důležitých parametrů pro propagaci obrázků online - je váha obrázku.

Na jedné straně bychom chtěli používat vysoce kvalitní obrázky, ale na druhé straně to nebude na úkor rychlosti webu, uživatelské zkušenosti a propagace. Doporučuje se vždy „optimalizovat“ (od optimalizace slova) obrázky na maximum, aniž by to významně zhoršovalo kvalitu. Postupujte podle všech následujících pravidel:

Použití formátu vhodného pro různé situace (jpg, png, gif a další) - podrobné informace o různých typech formátů níže.
Důležité - Nastavení rozměrů každého obrázku na webu - Vyhněte se co největšímu zobrazování obrázku menšího, než je skutečná (fyzická) velikost obrázku, aby nedošlo k plýtvání zbytečnými prostředky. Čím větší a mobilnější web, tím větší význam.
Zajištění responzivního párování - Pokud pracujete s WordPress a moderní šablonou, je pravděpodobné, že jste tento koutek zavřeli. Pokud ne, je důležité vždy zajistit, aby obrázky na webu, zejména obrázky uvnitř příspěvků, byly responzivní a dobře se zobrazovaly na mobilních zařízeních, tabletech atd.
Maximální komprese hmotnosti obrazu bez významného zhoršení kvality (rozšíření nástrojů a metod - níže).

Doporučená hmotnost pro fotografie

Téměř jakýkoli obrázek lze zkomprimovat na jeden či druhý stupeň, takže je vždy vhodné použít pouze rozměry, které jsou skutečně potřebné a které jsou fyzicky zobrazeny na webu, a snížit tak váhu obrázků co nejvíce. To platí pro jakýkoli web. Ale zejména pro weby se spoustou obrázků. Ve všech případech neexistuje žádné pravidlo, které je pravdivé, ale je vhodné zajistit, aby váha obrazu nepřesáhla 70–80 kB, pokud se nejedná o obraz galerie/posuvníku zvláštního významu.

2. Vyberte vhodný název obrázku

Při vyhledávání obrázků Google se zohledňuje několik parametrů pro zobrazení obrázku relevantního pro dotaz. Jedním z nich je název souboru. Doporučuje se strávit další sekundu a dát obrazu název, který popisuje to, co na něm vidíte. Je důležité zachovat název souboru v angličtině a používat prostřední čáry, nikoli mezery. Důvodem je to, že Google se lépe vyrovná se středními pomlčkami.

Příklady špatného jména obrázku:

DSC2387.jpg

Stránka promoter.png

Příklad dobrého jména obrázku:

Search-engine-optimizer.jpg

Pro ty z vás, kteří se divíte - ano, Google ví, jak zacházet s anglickými názvy obrázků i pro jiné jazyky. Jak ví, jak přeložit vyhledávací řetězce a zvýraznit přeložená slova ve výsledcích vyhledávání.

3. ALT na obrázek

Značka alt, což je zkratka alternativy, je parametr, jehož cílem je popsat obrázek. Alternativní značka je definována v systému správy/HTML kódu pro každý obrázek zvlášť a její původní funkcí je sloužit nevidomým a lidem se zdravotním postižením, kteří používají speciální software, který tyto značky skenuje a čte psaný text.

Technicky to v kódu vypadá takto:

<imgsrc="tree.jpg" alt="strom">

Kromě důležitosti značky z hlediska přístupnosti webových stránek má význam i pro vyhledávače. Značka alt pomáhá vyhledávačům pochopit, co je předmětem obrázku (spolu s dalšími věcmi, jako je název souboru, kontext stránky, na které je, atd.), A také přirozeně ovlivňuje vyhledávání obrázků na Googlu.

Značka alt je také součástí optimalizace na stránce pro všechno. Také, když z obrázku vychází externí odkaz, značka alt slouží jako druh textové kotvy („text kotvy“) pro obrázek.

Jak zkontroluji, zda má obrázek značku ALT?

Existuje několik způsobů:

Celá cesta - klikněte na obrázek myší -> klikněte pravým tlačítkem myši -> zkontrolujte prvek (znění se v různých prohlížečích liší).
Rádi bychom hledali značku v příkazu <img>, jak je znázorněno výše.
Použijte plugin s názvem Web Developer (skvělý pro mnoho dalších úkolů). Rozšíření nám umožňuje kliknutím na tlačítko zobrazit všechny alternativní značky, které mají obrázky na konkrétní stránce.

Křičící žába - Použijte žábu vhodnou, když chceme provést důkladné skenování obrázků na webu.

Proces spočívá v zadání adresy URL ke skenování a následném kliknutí na kartu Obrázky.

Tam uvidíme seznam obrázků na webu, které lze řadit podle několika parametrů:

Obrázky vážící více než 100 kB
Obrázky bez značek ALT
Obrázky se značkami ALT, které obsahují více než 100 znaků (a pravděpodobně byste je měli trochu zkrátit)

Samozřejmě existuje více způsobů a více pluginů různého druhu, ale zdá se mi, že jsem zde popsal předmět z hlediska potřeby bodu na stránku a rozsáhlou kontrolu webu.

Google image promotion - tipy pro optimalizaci ALT tagů

Neměli byste vynucovat klíčová slova, ale pokuste se popsat, co vidíte na obrázku.

Pokud je možné kombinovat popis obrázku + relevantní klíčová slova, aby vynikly přirozeně - k čemu.
Není třeba přehánět popis, 2-5 slovní alt tag je víc než dost.
Doporučuje se, aby značka alt a značka názvu pro obrázek nebyly totožné.
Pro komerční weby - pokud má produkt číslo modelu, doporučujeme jej použít ve značce alt (pro zobrazení při vyhledávání obrázků Google).

Není nutné používat alts pro tapety/dekorativní obrázky - i když se to nedoporučuje, aby Google neměl podezření, že se snažíte příliš optimalizovat.

4. Značka názvu obrázku

Titulky k obrázkům nebo Titulky jsou druhem popisku, který lze zobrazit pohybem myši nad obrázkem. Mnoho lidí si je mýlí s ALT tagy.

Názvy obrázků jsou dalším údajem o relevanci a předmětu obrázku, který může Googlu pomoci pochopit, o čem obrázek mluví, a vylepšit hodnocení vyhledávání obrázků. Na rozdíl od značky ALT bude značka názvu obvykle popisnější a o něco delší a jejím účelem je popsat surfaři, co je vidět na obrázku a/nebo co přijde po kliknutí na obrázek. Zpravodajské weby tuto značku často používají.

Takto to vypadá v kódu:

5. Typy obrázků a přípony souborů

Existuje několik běžných formátů pro použití obrázků online. Krátce se budu věnovat každému z nich:

JPEG/JPG - Nejstarší a pravděpodobně nejběžnější formát obrázků na webu. Výhodou formátu JPG je schopnost zobrazovat obrázky relativně vysoké kvality a nízké hmotnosti. Obrázky JPG nepodporují krytí.
GIF - Formát GIF je tu s námi už nějakou dobu, počínaje dobami, kdy ještě existovaly diskety. Gify podporují pouze 256 barev, jedná se tedy o méně kvalitní obrazový formát a jsou primárně určeny k použití jako ikony nebo dekorace různých druhů. Formát GIP také podporuje animaci a dokonce i Facebook nedávno začal podporovat tento formát ve zdroji.

Sečteno a podtrženo - gify nejsou určeny pro zobrazování obrázků, zejména pokud jde o kvalitu obrazu, ale pro jednodušší ikony, animace a prvky.

PNG - Toto je (relativně) nový formát ve skupině. Hlavní výhody souborů PNG - vyšší kvalita ve srovnání s JPG a GIF a podpora průhlednosti. Soubory PNG jsou rozděleny do 2 formátů - PNG24, což je lepší kvalita (a odpovídající váha obrázku), a PNG8, který je ze všech nejekonomičtější.

Existuje spousta dalších obrazových formátů, ale pro použití na webových stránkách jsou méně relevantní.

Spropitné - Pro ty, kteří používají Photoshop, vždy doporučuji porovnávat váhy obrazu pomocí Save for web a zařízení mezi různými formáty (před uložením souboru je náhled hmotnosti obrazu).

Pravidla pro výběr formátů obrázků

Ve většině případů to udělá formát JPG. Obrázky JPG umožňují vysokou kvalitu a nízkou hmotnost souboru.
Nepoužívejte soubory GIF ve velkých souborech, které obsahují mnoho podrobností - váha souboru bude velká. Formát k tomu není určen a je vhodnější pro použití s malými a jednoduchými prvky.
Pokud průhlednost hraje důležitou roli - použijte formát PNG. Vždy je vhodné porovnat PNG24 a PNG8, abyste snížili váhu obrázků na minimum.

6. Správné používání miniatur

Miniatury (náhledy) jsou důležitou a dokonce kritickou součástí některých webů - zejména webů založených na galeriích a komerčních webech. Miniatury („Thumbnails“ od Google Translate…) mohou být skvělé na jedné straně, ale výrazně sabotují web a uživatelskou zkušenost na straně druhé.

Nejdůležitější věcí při používání těchto obrázků je udržovat rozumnou kvalitu a váhu na co nejnižší úrovni. Na velkých obchodních webech, které se při zobrazení stránek kategorií a náhledů produktů spoléhají na miniatury, je tato skutečnost obzvláště důležitá. Věděli jste, že každá sekunda zpoždění při načítání stránky stojí Amazon 1,6 miliardy dolarů ročně? Většinu času načítání na těchto webech tvoří obrázky.

Je pravda, že většina z nás může jen snít o tom, že bude mít web takového rozsahu. Ale víte - velké změny začínají zdola nahoru a malé. Čím dříve oslovíme, tím lépe.

Tipy pro správné používání miniatur

Důrazně doporučujeme vytvořit miniaturu pro miniaturu a větší obrázek pro samotnou stránku produktu. Nepoužívejte velký obrázek jako miniaturu! Tím se načte několikanásobné načtení webu, zvláště když je na jedné stránce mnoho miniatur. V různých systémech CMS jste z tohoto vydání automaticky osvobozeni.

Pokud jde o pravidla optimalizace obrázků, je vhodné investovat více do velkých obrázků než do miniatur. Například - nezahrnujte miniatury do souboru Sitemap pro obrázky (přípona níže), v některých případech pro ně nenastavujte ani značky ALT. Ambicí je, aby Google indexoval velké obrázky na úkor miniatur, a nikoli naopak.

Doporučuje se nastavit Image Image na Thumbnails, které popisují produkt několika slovy a obecně, co surfař uvidí po kliknutí na obrázek.

Pokud má každá stránka s kategorií produktů mnoho produktů (řekněme více než 30), doporučuje se použít skript Lazy Load, který načte obrázky, pouze když se surfař posouvá do oblasti, kde jsou.

7. Použití zalamovacího textu

Obrázky obvykle přicházejí, aby sloužily textu, a ne naopak. Ale pokud jde o optimalizaci obrázků a propagaci obrázků Google, a pokud je web sítí založenou na obrázcích, je velmi užitečné nezanedbávat obsah textů, i když se jedná o základní věci.

Pro ty, kteří si chtějí zachovat čistý a minimalistický vzhled (například na webových stránkách fotografa s portfoliem), se doporučuje, aby na každé stránce, která má obrázek, definoval alespoň následující:

H1 Podle předmětu obrazu
Krátký popis (i 10–20 slov je lepší než nic) na obrázku, nejlépe s relevantním klíčovým slovem nebo dvěma
Název a popis jsou samozřejmě relevantní (v případě, že se jedná o fyzickou stránku a ne obrázek, který se objeví z galerie).
Názvy altů a fotografií - v tomto případě velmi doporučujeme.

8. Mapa stránek pro fotografie

Image Sitemap (image-sitemap.xml) pomáhá Googlu lépe číst a indexovat naše obrázky na webu. Podobně jako standardní soubor XML Sitemap lze soubor Sitemap obrázků odeslat pomocí služby Search Console v oblasti souborů Sitemap.

Přidejte soubor Sitemap do služby Search Console

Soubor Sitemap obrázků je obzvláště užitečný, když používáte všechny druhy galerií se skripty a různými efekty - což Google běžně těžko skenuje.

Existují některé parametry pro použití souborů Sitemap obrázků.

Jak vytvořit soubor Sitemap?

WordPress - Jako obvykle, pokud pracujete na WordPress, váš život je snadný. Za vás zavírá plugin Udinra All Image Sitemap. Vše, co musíte udělat, je nainstalovat plugin, označit některé V v nastavení, vytvořit soubor Sitemap a spustit jej na Google prostřednictvím Search Console.

Na jakékoli jiné platformě - záleží. Pokud neexistuje žádné out of box řešení jako plugin atd., Lze to provést pomocí Screaming Frog.

Žába vám pomůže snadno vytvořit soubor Sitemap obrázků. Jediný problém - nebude se aktualizovat automaticky (na rozdíl od pluginu) a musí se čas od času aktualizovat.

Jak to děláš?

Je třeba provést úplnou kontrolu požadovaného webu a poté v horní nabídce softwaru přejít na Sitemap -> Vytvořit obrázky Sitemap. Dostanete košer soubor XML, který můžete použít a spustit prostřednictvím služby Search Console.

9. Podporujte sdílení fotografií

Pokud se chlubíte velkým množstvím využití originálních obrázků (ať už fyzického, nebo grafického prvku) a obrázky jsou hlavní věcí nebo alespoň podstatnou součástí webu, je velmi užitečné vyzvat uživatele ke sdílení obrázků na sociálních sítích. a usnadnit jim to.

Jako obvykle mám praktické tipy pro platformu WordPress, v jiných systémech doporučuji použít programátor nebo zkontrolovat, zda je k tomu vyhrazený plugin.

WordPress má pro tento účel 2 pěkné pluginy:

Social Image Hover pro WordPress - placený plugin (em; lak na nehty - 17 $).
Tlačítko Pin Pin Pinterest - Plugin, který přidává malou ikonu Pinterest k fotografiím na webu.

10. Nástroje pro redukci a optimalizaci obrazu

TinyPNG - vynikající služba, která umožňuje komprimovat obrázky online pomocí obzvláště pohodlného rozhraní pro přetahování. Mají také API, které vám umožní pracovat ve větším množství a automaticky, a také skvělý plugin pro WordPress, který vám umožní komprimovat všechny obrázky na webu - vyžaduje použití jejich API (zdarma pro 500 obrázků za měsíc).

Fotosizer - pěkný desktopový software, který umožňuje upravovat obrázky ve velkém množství - nejen kompresi, ale také zmenšení rozměrů, přidání vodoznaků a různých efektů do obrázků a mnoho dalších příjemných funkcí.

Závěr

Právě jste pochopili důležitost optimalizace obrázků webových stránek. Pokud však chcete zjistit aktuální stav svého webu, můžete to udělat zdarma, a to díky Semalt's SEO konzultace.

Semalt vám pomůže identifikovat SEO problémy související s vaším webem. Navíc se Semalt Experts můžete snadno zlepšit výkon vašeho online podnikání za nižší cenu.

send email