Jak rychlejší načtení obrázků na váš web WordPress

Takže chcete, aby se obrázky načítaly rychleji?


No, nebudu pilně dally. Pojďme se ponořit přímo do dobrých věcí!

Existují tři způsoby, jak zrychlit načítání obrázků ve WordPressu:

  • Změnit velikost
  • Komprimovat
  • Líné zatížení

V tomto příspěvku vysvětlím, jak každá z těchto technik funguje a proč způsobí, že se váš web načítá rychleji. Ukážu vám také, jak implementovat každou taktiku pomocí ručních řešení i doporučení pluginů.

Tato první technika je velmi jednoduchá, ale často ji nováčci WordPress přehlíží.

Jak optimalizovat obrázky ve WordPressu

Změňte velikost obrázků

Absolutně nejjednodušší způsob, jak zrychlit načítání obrázků, je změnit jejich velikost. Nech mě to vysvětlit.

Co je změna velikosti?

Když řeknu „změna velikosti“, chci změnit rozměry obrázku, a v tomto případě chcete zmenšit rozměry příliš velkých obrázků.

Například bloggerové někdy pořizují fotografie na svých telefonech nebo digitálních fotoaparátech a nahrávají je na své blogy. Neupravené kopie fotografií mohou být široké až 5 000 pixelů. Nyní o tom přemýšlejte…

Šířka sekce příspěvku na vašem webu pravděpodobně není větší než 800 pixelů. Text, který právě čtete, pokrývá na stránce pouze asi 700 pixelů, takže si představte, že sem přidáte obrázek o šířce 5 000 pixelů. Bylo by mnohem větší, než je třeba a přestože by se velikost stránky zmenšila, aby se vešly na stránku, načtený obrazový soubor je stále masivní a nesmírně nehospodárný. A to proto, že …

Obrázky, které mají větší rozměry, mají také větší velikosti souborů.

Pokud jde o výkon a zrychlení načítání obrázků, zmenšení rozměrů obrázku je skvělý způsob, jak drasticky zmenšit velikost souboru, a tím zrychlí načítání obrázku..

Vraťme se k mému příkladu a předpokládejme, že obraz je široký a vysoký 5 000 pixelů. Pokud byste jej snížili z 5 000 pixelů na pouhých 700 pixelů, obrázek by ve skutečnosti používal o 99% méně pixelů. Jinými slovy, velikost souboru by se snížila asi o 99%. Pokud by byl obrázek 5 MB, skončil by jen 50 kB a na váš web by se načítal o 99% rychleji.

Změna velikosti obrázků

Pokud nemáte v úmyslu pečlivě měnit velikost svých obrázků, je téměř jisté, že z toho vyděláte.

Existuje několik způsobů, jak můžete změnit velikost svých obrázků tak, aby se perfektně přizpůsobily webu.

Ruční změna velikosti obrázků

Před nahráním nového obrázku na svůj web ručně změňte jeho velikost pomocí vestavěných nástrojů pro úpravu obrázků v počítači.

Pokud máte mimořádně velký obraz jako v mém příkladu, okamžitě to bude mít velký význam. Po změně velikosti obrázku jej můžete nahrát do knihovny médií.

I když se chystáte použít obrázek v lightboxu nebo posuvníku, obvykle není důvod, aby byl širší než 2 000 pixelů. Pokud se obrázek bude nacházet v oblasti obsahu příspěvku nebo stránky, pravděpodobně se vám to povede dobře, když je obrázek široký 800px.

Tento způsob změny velikosti obrázků funguje dobře, ale nepomůže u obrázků, které jsou již na váš web nahrány. Snadnou technikou pro existující obrázky je jednoduše vybrat jinou velikost.

Používejte menší velikosti

Když nahrajete obrázek do své knihovny médií, WordPress vytvoří až 3 další verze: Miniatura, Střední a Velká.

Pokud navštívíte stránku nastavení médií, uvidíte, že zde můžete vybrat tyto velikosti:

Nastavení médií WordPress

I když můžete upravit nastavení, výchozí velká velikost je 1024 pixelů, což je dostatečně velké, aby bylo možné použít pro příspěvky, aniž by to bylo příliš zbytečné. Tuto velikost můžete použít pro všechny obrázky, které přidáte do svých příspěvků.

Chcete-li změnit velikost obrázku, který jste přidali do příspěvku, klikněte na něj v editoru a na pravém postranním panelu se zobrazí rozbalovací nabídka Velikost obrázku..

Velikost obrázku WordPress

Vyberte velikost „Large“ a aktualizujte příspěvek. Pokud máte nadrozměrné obrázky, tato technika vám umožní rychle obsloužit vhodnější velikost, která se načte rychleji, aniž byste museli znovu načíst a nahradit původní.

To však může být strašně únavné, pokud máte desítky příspěvků s desítkami obrázků. K dispozici je ještě rychlejší a efektivnější metoda.

Automatická změna velikosti pomocí pluginu

Namísto změny velikosti obrázků sami můžete nechat plugin, aby to udělal automaticky za vás. Pokud jde o automatickou změnu velikosti obrazu, nic nepřekoná Optimole zapojit.

Optimole Image Optimizer

Nefunguje to tak, jak byste očekávali.

Místo úpravy obrázků v knihovně médií si Optimole uchovává vlastní kopie svých obrázků a obsluhuje je z vysoce výkonného CDN. Tímto způsobem nejsou vaše originály žádným způsobem upravovány.

Navíc nemusíte dávat Optimole jednotnou velikost, kterou použijete pro své obrázky. Spíše získává velikost obrazovky návštěvníka a generuje optimální velikost každého obrazu za běhu. To znamená, že někdo v mobilním zařízení může načíst verzi obrázku 400 pixelů, zatímco jiný návštěvník v notebooku dostane verzi stejného obrázku 700 pixelů..

Tento způsob změny velikosti je pro mobilní zařízení mnohem snazší implementovat a zefektivnit, což je obzvláště důležité, protože mobilní návštěvníci často bývají na pomalejším připojení.

Pokud se chcete dozvědět, jak používat Optimole, můžete sledovat mé plné video:

Doporučil jsem změnit velikost nejprve, protože ať už to děláte ručně nebo automatizujete pomocí pluginu, je to jednoduché a může nabídnout obrovské zisky.

Pokud jsou vaše obrázky pro váš web již dostatečně velké, můžete komprimací ještě vylepšit výkon svých stránek.

Komprimujte své obrázky

Komprese je způsob, jak zmenšit velikost souboru obrázku beze změny jeho rozměrů.

K dispozici jsou dva typy komprese obrazu.

První typ komprese obrazu se nazývá „bezeztrátová“ komprese.

Bezeztrátová komprese

S bezeztrátovou optimalizací není samotný obraz ve skutečnosti upravován. Tato technika spíše odebere všechna metadata uložená v obrazovém souboru. Například snímky často ukládají název zařízení použitého k pořízení snímku, datum pořízení fotografie a někdy i GPS souřadnice snímku.

Protože tato data jsou obvykle velmi omezená, bezeztrátová optimalizace může zmenšit pouze velikost obrázku o 1-5%, ale ve skutečnosti není důvod jej nepoužívat, protože to nemá žádný dopad na kvalitu obrázku..

Skutečné zisky plynou ze ztrátové optimalizace.

Ztráta komprese

Jak se dalo očekávat, ztrátová komprese optimalizuje samotný obraz a vede ke snížení kvality. Ale tady je ta věc …

Kompresní algoritmy jsou v dnešní době tak dobré, že často můžete zmenšit velikost souboru obrázku o 50–70% bez viditelných rozdílů. Pokud nejste profesionální fotograf a nepotřebujete, aby vaše obrázky byly dokonale ostré na 4k monitorech, ani si nevšimnete ztráty kvality.

Jak komprimovat obrázky

Můžete ručně komprimovat obrázky pomocí nástroje, jako je TinyPNG před jejich nahráním nebo automatizací pomocí pluginu.

ShortPixel je skvělý plugin pro optimalizaci obrázků na vašem webu. Může je okamžitě optimalizovat, když je nahrajete, a hromadně optimalizovat všechny obrázky, které již jsou v knihovně médií.

shortpixel

Doporučil jsem Optimole pro změnu velikosti obrazu a velmi dobře komprimuje obrázky. Opět neoptimalizuje originály uložené v knihovně médií, ale spíše komprimuje kopie, které slouží vašim návštěvníkům..

Zde najdete několik dalších doplňků pro optimalizaci obrázků.

Při změně velikosti a komprese obrázků se váš web načte mnohem rychleji, ale pro obrázky, které můžete provést, existuje ještě jedna poslední optimalizace..

Implementujte líné načítání

Líné načítání je opravdu chytrý způsob, jak dále optimalizovat obrázky.

Řekněme, že máte blogový příspěvek s 12 obrázky. Když někdo navštíví váš web, nebudou všechny tyto obrázky hned na obrazovce viditelné. Aby se většina z nich ukázala, bude muset posunout dolů. Tak proč nahrát všech 12 hned?

Při líném načítání se načítají pouze obrázky, které se objeví na obrazovce. Namísto načítání 12 obrázků lze místo nich načíst pouze 2-3. Když návštěvník posouvá stránku dolů, zbývající obrázky se načtou, jakmile se dostanou na obrazovku. To znamená, že počáteční načítání je mnohem rychlejší a protože většina návštěvníků se neposouvá po celé stránce dolů, mnoho obrázků se nikdy nenačte, což vám ušetří cenné prostředky serveru.

Toto video obsahuje vizualizaci, která jej vysvětluje lépe, pokud chcete jasnější představu o tom, jak funguje líné načítání:

Nyní, když jste koncept prodali, můžete na svém webu implementovat líné načítání.

Jak používat líné načítání

Tuto techniku ​​optimalizace výkonu lze snadno přidat do WordPress pomocí pluginu.

Pokud hledáte bezplatnou možnost, vyzkoušejte Optimole nebo a3 Lazy Load.

S Optimole je líné načítání automaticky zapnuto a plugin a3 lze snadno konfigurovat.

Navíc, pokud vám to nevadí platit, podívejte se WP Rocket. Má vysoce výkonné ukládání do mezipaměti a řadu dalších rychlých nástrojů.

Chcete-li zapnout líné načítání pomocí WP Rocket, stačí přepnout tento přepínač:

WP Rocket Media

To nemohlo být snazší!

Užijte si rychlejší načítání obrázků

Shrnout, co jste se právě naučili…

Velkoformátové obrázky nahrané na váš web jsou extrémně pomalé. Pouze jeden z těchto obrázků může váš web zastavit.

Nejdůležitější věcí, kterou můžete pro urychlení obrázků udělat, je změna velikosti příliš velkých obrázků, aby odpovídaly velikosti vašeho webu. Můžete to udělat ručně nebo automatizovat pomocí Optimole.

Dále, algoritmy komprese obrázků prošly dlouhou cestou a v těchto dnech můžete zmenšit velikost souboru obrázku o 50-70%, aniž byste viditelně ovlivnili kvalitu. Tohle není žádná myšlenka. Komprimujte každý obrázek na vašem webu pomocí ShortPixel nebo Optimole.

A konečně, líné načítání je skvělý způsob, jak selektivně načítat obrázky. Můžete použít Optimole, a3 Lazy Load nebo WP Rocket k okamžité implementaci líného načítání na svůj web.

Pokud jste žádnou z těchto technik nepoužívali, váš web se po implementaci dramaticky zrychlí. Odfoukne vás to.

Máte nějaké dotazy ohledně konceptů a technik v tomto příspěvku? Máte další tip na sdílení? Příspěvek v sekci komentářů níže!

Mohlo by se vám také líbit,

Jak opravit pomalý web WordPress a panel administrátorů (trvale)

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