Optimalizujte své obrázky s předdefinovanými velikostmi obrázků [Tip aplikace WordPress]

Optimalizace obrázků na webových stránkách je skličující úkol. Můžete použít méně obrázků, komprimovaných obrázků, skřítků nebo svg; seznam pokračuje. Jedním z míst, kde se mnoho stránek WordPress dostane zakopnutí je v definování velikosti obrázků, což je klíčovým aspektem optimalizace obsahově náročných stránek.

Velikost obrázků je důležitá, protože obrázky jsou automaticky vytvářeny podle velikosti dané při nahrání snímků. To zajišťuje, že i když máte originální obraz o šířce 3000px, nikdy se nepoužije, pokud je dostačující 600px obraz. V ideálním případě by měl 600px široký prostor použít širokoúhlý obraz 600px namísto zmenšení většího obrazu.

V tomto článku vás provedu jaké velikosti obrázku jsou a jak je definovat.

Jak WordPress zpracovává obrázky

Pokud jste někdy vložili obrázek do článku aplikace WordPress, měli byste přiřadit výběr velikosti obrázku. To vám umožní vkládat malé, střední a velké verze obrázků. Skutečné velikosti pro tyto lze upravit v nastavení WordPressu.

Kdykoli nahrajete obrázek přes WordPress, generuje verze těchto obrázků a ukládá je odděleně. Pokud například nahrajete obrázek s rozlišením 1200 × 800, aplikace WordPress může vytvořit verze 100 × 100, 600 × 400 a 900 × 600. Když vložíte obrázek a zvolíte "médium", bude použita skutečná verze média, na rozdíl od zmenšené verze originálu.

To je nesmírně prospěšné, protože to šetří šířku pásma na serveru a dobu zpracování v klientském počítači. Myslím, že to nepřekvapí, že stahování obrazu 600 × 400 je rychlejší než stahování obrazu 1200 × 800.

Pokud je použit větší obrázek, který musí být zmenšen, prohlížeč se musí starat o výpočty aby se to stalo. I když to nebude trvat hodiny, může to být patrné na image-těžké webové stránky.

Správný obrázek na správném místě

Konečným cílem by mělo být vždy používejte vhodné velikosti obrázků. Potřebujete-li obraz 440 × 380, uchopte ze serveru obrázek s přesnou velikostí. Tam jsou dvě hlavní místa, kde budete používat nahrané obrázky: představoval obrázky a in-post obrázky - doporučil bych se zaměřit na doporučené obrázky první.

Ve všech, ale nejvíce vizuálně nasměrovaných článcích, nezáleží na tom, zda je post-post obraz 220px nebo 245px široký. Kterákoli verze, kterou máte k dispozici, bude stejně použitelná. Doporučené snímky jsou však obvykle zobrazeny v běžných velikostech. Pro seznamy článků můžete použít miniaturu 178 × 178, pro záhlaví článků můžete použít široký obraz 1200 × 600.

Kromě toho můžete také chtít ponechat samostatnou miniaturu / střední / velkou velikost definovanou v nastavení vám umožní snadný přístup ke specifickým rozměrům při přidávání obrázků do příspěvků.

Takže to, co to všechno scvrkává, je toto: Nebylo by skvělé, kdybychom měli dvě další velikosti obrázků, které bychom mohli použít pro představované obrázky? Tyto velikosti obrazu budou vytvořeny přímo vedle zbytku při nahrání obrázku. Dobrou zprávou je, že WordPress jste se vztahuje s docela jednoduchou funkci.

Vytvoření velikosti obrázků

Pomocí funkce add_image_size () můžete definovat všechny velikosti obrázků, které vaše webové stránky potřebují. Vytvořme dva výše uvedené příklady. Umístěte níže uvedený kód do souboru theme.php tématu nebo do souboru pluginu.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Jak vidíte, tato funkce má čtyři parametry. První parametr umožňuje nastavit název velikosti. Druhým parametrem je maximální šířka, třetí maximální výška. Čtvrtý parametr nastavuje tvrdé oříznutí. Pokud je nastavena na hodnotu true, obrázek bude vytvořen v přesně určené velikosti.

Jakmile to bylo přidáno do vašeho tématu nebo plugin dvě nové verze každého souboru, který nahrajete bude vytvořen WordPress.

Použití velikosti obrázků

Tyto velikosti obrazu lze použít v řadě funkcí, které se zabývají načítáním médií. Nejdříve se podívejme na představené obrázky. the_post_thumbnail () je běžně používán pro zobrazení postu s představeným obrázkem. Následující kód lze umístit do smyčky aplikace WordPress:

 the_post_thumbnail ('featured_thumbnail'); 

První parametr této funkce umožňuje určit velikost obrazu, který se má použít. Vzhledem k tomu, že jsem uvedl "featured_thumbnail", bude použita verze 178 × 178 tohoto souboru.

Existuje celá řada dalších funkcí, jako například wp_get_attachment_image ()a wp_get_attachment_image_src () které také používají parametr velikosti obrazu. Kdykoli použijete tuto funkci, měli byste vždy zadat odpovídající velikost obrázku.

Obnovení miniatur

Pokud již máte stránky na svém místě, nebudete schopni své články optimalizovat retrospektivně pouze definováním velikosti obrázku. Velikosti obrázků se berou v úvahu pouze při nahrání nového obrázku, takže se nepoužijí na snímky již v systému.

Neboj se, plugin Regenerate Thumbnails udělá věci lepší! Tento plugin může regenerovat miniatury pro všechny obrázky s ohledem na všechny definované velikosti obrázků. Může to také cílit na konkrétní obrázek, což je užitečné, pokud máte jen pár, nebo děláte nějaké testy.

Jakmile budou vaše náhledy regenerovány, měli byste vidět optimalizované verze načtené na vašich stránkách. Tuto možnost můžete zkontrolovat zobrazením zdroje obrazu. Pokud jste nahráli 'example.jpeg' a vidíte 'example.jpeg' jako zdroj pro váš doporučený obrázek, něco není v pořádku. Pokud vidíte “příklad-178 × 178.jpeg” pak je vše v pořádku; zobrazí se optimalizovaný obrázek.

Citlivé obrazy

Jeden problém při udržování optimalizovaného místa je citlivost. Když si prohlížím článek na iPadu, bude obraz ve velké velikosti zmenšen, protože maximální šířka bude 786px..

Nejjednodušším řešením je použít plugin jako Hammy. Hammy pracuje na základě šířky obsahu vašeho motivu (na rozdíl od šířky okna prohlížeče) a může na něm sloužit optimalizované obrázky. To je užitečné zejména pro mobilní uživatele, kde výkon a šířka pásma mohou být problémem.

Další optimalizace obrazu

Jak jsem zmínil v úvodu, existuje mnoho způsobů, jak optimalizovat obrázky. Od skřítků až po kompresi obrázků lze použít spoustu technik ke snížení doby načítání, které přicházejí ruku v ruce s obrázky. Ashutosh KS napsal skvělý článek představí 9 WordPress Plugins Chcete-li zlepšit výkon obrazu, doporučuji dát to číst!

Navrhuji také podívat se na Hassle Free Responsive Images, který vám ukáže, jak přidat podporu pro prvek obrázku, který chcete použít, pokud chcete napsat vlastní kód.