Jak optimalizovat obrázky pro WordPress, Kompletní průvodce

Jak optimalizovat obrázky pro WordPress, Kompletní průvodce

Lidé na webu nemají tolik času na spotřebování dat – protože je toho tolik. Existuje tolik dat, že prostě nemáme čas si je přečíst všechny! Jako kurátor obsahu pro moderní web je vaším úkolem maximalizovat propustnost. Čím více vyjadřujete menšími slovy, tím lépe jste ve své práci.


Proč jsou obrázky (tak velmi) důležité?

Existuje mnoho, mnoho důvodů, proč byste (a měli) používat obrázky ve vašich příspěvcích a článcích:

  • Obrázky slouží jako vizuální podněty pro výzvu k akci (CTA). CTA může být jakýkoli úkol, který má váš návštěvník plnit. Mezi běžné CTA patří přihlášení k odběru novinek, sdílení vašeho článku přes sociální média nebo nákup produktu.
  • Obrázky zvyšují spojení, které se autor pokouší navázat se čtenářem.
  • Obrázky vyjadřují více prostřednictvím méně.

Proto je nezbytně důležité, abychom v našich prezentacích používali správné obrázky (blogový příspěvek, neformální zprávu, aktuální prezentaci PowerPoint atd.), Abychom v mysli čtenáře nechali značku!

Ale počkej! Je tu problém!

Obrázky zabírají přibližně 63% šířky pásma používané moderními webovými stránkami, takže je stále důležitější, aby byly řádně optimalizovány pro rychlost.

Jednosekundové zpoždění v době načítání stránky by mohlo snížit míru konverze o 7%

Zjistili jsme, že lidé mají krátkou dobu pozornosti (jedna z nevýhod moderní rychlosti produkce obsahu). I když použijete správné obrázky, pokud se nenačtou v přijatelném časovém rámci, zájem se ztratí.

10 nejčastějších chyb optimalizace obrazu

Většina webů má problém – používají vynikající obrázky, ale způsob, jakým je obrázek zobrazen návštěvníkovi, je špatný. Velká velikost, špatná optimalizace, nesprávný formát, zbytečně velké rozměry (velikosti), nereagující obrázky a neopatrné chyby SEO jsou některé z nejčastějších problémů, kterým čelí moderní webové stránky. V dnešním článku se budeme těmito otázkami zabývat!

1. Velké rozměry

„Extra hranolky“ nejsou vždy dobré

Tohle je klasika. Předpokládejme, že na stránce „Tým“ vašeho webu potřebujete fotografii o velikosti 150 × 150 pixelů. Obvykle použijete headshot 5MP, upravíte jej a nakonec nahrajete.

Všimli jste si problému? Někteří lidé přímo nahrají skutečný obrázek 5MP! Téma WordPress načte celý obrázek 5MP (tj. 5 x 10 ^ 6 pixelů) a požádá prohlížeč, aby jej zmenšil na požadovaný rozměr 150 x 150 pixelů. Prohlížeč v podstatě zobrazuje pouze 0,0045% původního obrázku!

Nakonec ztrácíte šířku pásma vašeho i návštěvníka (i když zobrazujete obraz prostřednictvím sítě pro doručování obsahu, jako je Stackpath CDN), spotřebováváte více místa na pevném disku a prodlužujete dobu načítání. Žádná z funkcí není něco, co byste na svém webu chtěli.

Vždy upravte velikost obrázku (a tím myslím zmenšení velikosti obrázku) na požadované rozměry a poté jej nahrajte!

ImageResize.org

K tomu nepotřebujete fantastický software – existují bezplatné online nástroje jako ImageResize.org můžete použít k rychlé změně velikosti a optimalizaci obrázků. Stačí nahrát a vyladit nastavení fotografií. Až budete hotovi, stáhněte si optimalizovaný obrázek, který chcete použít na svém webu. Nabízejí také rychlé Image Compressor pokud chcete pouze snížit velikost souboru.

Užitečné nástroje:

  • IrfanView je vynikající freeware pro dávkovou změnu velikosti obrázků s pokročilými možnostmi, jako je optimalizace, vodoznak a hranice.
  • ImageMagick je pokročilý nástroj s otevřeným zdrojovým kódem, který lze použít v různých programovacích jazycích a operačních systémech. Můžete napsat vlastní aplikaci nebo ji jednoduše použít pomocí příkazového řádku.
  • ImageOptim (Mac) umožňuje přetáhnout celé složky a rychle optimalizovat více obrázků.
  • TinyPNG je online nástroj pro kompresi obrázků s API.

2. Nesprávný formát obrazu

shutterstock_108312266

Formát použitý pro obrázek hraje zásadní roli. Jako obecné pravidlo použijte PNG pro vektorovou grafiku a počítačem generované obrázky, jako je klipart atd. Použití JPEG pro fotografie nebo obrázky s různými barvami. Podrobné vysvětlení najdete v tomto dokumentu úžasná odpověď StackOverflow.

3. Nepoužíváme progresivní JPEG

Základní (normální) JPG versus progresivní JPG

Základní (normální) JPG versus progresivní JPG

Pro obyčejného člověka jsou JPEG dva typy – základní a progresivní. Vizuálně jsou obě stejné. Rozdíl spočívá ve způsobu, jakým jsou načteny:

  • Základní JPEG obsahuje pouze jednu vrstvu – obsahující celý obrázek. Na požádání se celý obraz načte najednou.
  • Progresivní soubory JPEG komponují obrázek s více vrstvami. Progresivní obrázek JPEG se načítá vrstva po vrstvě, která se postupně zvyšuje v kvalitě, což v konečném důsledku poskytuje bezeztrátové zobrazení.
IrfanView podporuje dávkovou konverzi s progresivním JPEG

IrfanView podporuje dávkovou konverzi s progresivním JPEG

Všechny hlavní Image Resizer vám umožní ukládat obrázky jako progresivní JPEG.

4. Nepoužíváme Lazy Load

Lazy-Loading je vynikající úspora zdrojů technika, kdy je obrázek načten pouze tehdy, když návštěvník přejde dolů k zobrazovacímu rámečku obrázku. Zvažte článek – „15 nejúspornějších automobilů v roce 2014“. Tento článek bude samozřejmě obsahovat nejméně 15 obrázků. A bez ohledu na výšku zobrazovacího zařízení – monitoru, tabletu nebo smartphonu, nemůžete umístit všech 15 obrázků do rámečku pohledu. Chcete-li zobrazit všechny obrázky, musíte se posunout dolů.

Pokud je povoleno Lazy Load, budou obrázky načteny pouze v případě, že se návštěvník nachází v blízkosti obrázku. Jinými slovy, obrázky se začnou načítat, když je posunete dolů a zobrazí se. Prvních několik obrázků se však načte okamžitě, protože jste již v rámečku pohledu. Lazy Loading šetří šířku pásma na obou koncích a zkracuje dobu načítání! Můžete použít Lazy Loading v WordPress s BJ Lazy Load Plugin.

5. Nepoužíváte CDN

cdn-network

Pomocí sítě pro doručování obsahu (CDN) se obrázek zobrazí ze serveru, který je fyzicky nejblíže místu návštěvníka. Pokud návštěvník z Indie požádá o obrázek a CDN má POP (místo přítomnosti nebo jednoduše server) v Tokiu a New Yorku, bude obrázek doručen ze serveru se sídlem v Tokiu.

Pokud máte značný provoz, měli byste nastavit CDN pomocí WordPress, abyste snížili dobu načítání a získali celkový výkon. Zde na WPExplorer doporučujeme Zataženo. Pro nově narozené weby doporučujeme seznam bezplatných služeb CDN, které byste mohli vyzkoušet.

6. Ne deklarování atributu „alt“

Atribut ‘alt’ popisuje obrázek vyhledávače. Text, který zadáte do tohoto pole, se uživateli zobrazí v případě, že obrázek nelze načíst. Mnoho lidí má sklon nechat tato pole prázdná. To je pro SEO velmi škodlivé a ztratíte na provozu. Vždy byste se měli pokusit zahrnout klíčová slova vašeho webu do alt značky pro obrázky.

7. Neoptimalizace obrázků

tužka-pastelky-body

Optimalizované obrázky jsou o 40% lehčí než běžné obrázky. To zlepšuje dobu načítání a šetří šířku pásma. Z Freddyho seznamu nejlepších pluginů pro optimalizaci obrázků WordPress doporučujeme WPSmush.it pro optimalizaci vašich obrázků. Kraken.io je také skvělou online volbou pro komprimaci obrázků v okamžiku. Používáme je zde neustále ve WPExplorer k optimalizaci doporučených obrázků před jejich nahráním na příspěvky a ukázky motivů.

8. Citlivé obrázky

Responzivní webdesign je zde

Responzivní webdesign je zde

I když vaše stránky reagují, neznamená to, že jsou vaše obrázky. To znamená, že obrázek záhlaví, který používáte pro 22palcovou obrazovku na ploše, se také zobrazí pro 5palcový iPhone. Když nahrajete obrázek, WordPress změní jeho velikost do několika verzí – miniatura, střední, plná velikost atd. To může vývojář změnit. Dobře kódované téma poslouží verzi obrazu „Střední“ velikosti, čímž se ušetří šířka pásma.

Picturefill.WP plugin nahradí značky obrázků novými prvek, který by sloužil různým obrázkům na základě mediálních dotazů. Je to docela experimentální (to znamená, že existují chyby) a nemělo by se používat na živém webu.

9. Obrazové titulky

Titulky nejsou vždy nutné, i když v některých případech je to nutné – například snímky obrazovky v tutoriálu. Obrázky titulků pomáhají čtenářům lépe porozumět tématu a zároveň vylepšují SEO.

10. Název souboru obrázku

Zamyslete se nad názvem souboru z pohledu vyhledávače. Použijte stejný text, jaký byste použili ve značce „title“ obrázku. Zkuste také zahrnout klíčová slova, která jsou pro váš web nejrelevantnější.

Závěr

hrdina-11

Image SEO je kriticky důležité pro všechny webové stránky – staré nebo nové. Lidé, kteří implementují image SEO správně (může to být občas docela všední), můžete získat značné množství organického provozu (nejlepší druh provozu) v dlouhý běh.

Máte skvělou optimalizační techniku? Vystřelit!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map