Jedním z faktorů, které mohou zpomalit váš web, je použití velkých fotografií, které nejsou pro web optimalizovány.
Někdy, když se lidé snaží něco rychle publikovat, nahrávají fotografie přímo ze svých fotoaparátů ve velmi vysokém rozlišení, obrázky o hmotnosti až 4–5 MB.
Optimalizovaný obrázek má méně kilobajtů bez jakékoli viditelné ztráty kvality a vždy byste měli optimalizovat obrázky bez ztráty kvality před nebo během jejich nahrání na váš web.
Bez ohledu na to, zda je váš web WordPress nebo jiná platforma, můžete optimalizovat obrázky pro web a zrychlit načítání webu.
Jednou z výhod používání WordPressu je, že máte pluginy, které dokážou optimalizovat obrázky, když je nahráváte na svůj web, a také hromadně optimalizovat stávající obrázky.
Jaké jsou tedy nejlepší postupy týkající se fotografií?
Neztrácejte kvalitu
Sledujte cíle svého webu. Neoptimalizujte slepě jen proto, že vám nějaký nástroj dal špatné skóre. Nástroje neznají cíle vašeho webu.
Kdybych měl módní blog nebo obchod, ukazoval bych krásné obrázky; Je mi jedno, jak mě hodnotili YSlow nebo Pagespeed Insights.
Nenechte se zavěsit na známky a skóre, dělejte to, co je nejlepší pro vás a vaše návštěvníky. Nejlepší je utratit více za CDN, aby bylo možné poskytovat větší a lepší obrázky, než přehnaně optimalizovat obrázky a mít ošklivé webové stránky.
Může vás to stát návštěvníky a peníze.
Nenahrávejte obrázky větší, než potřebujete
Pokud je šířka vašeho obsahu 620 pixelů, měli byste změnit velikost obrázků na šířku 620 pixelů, než je nahrajete na svůj web.
Pokud chcete, aby návštěvníci viděli větší obrázek, když na něj kliknou, můžete použít šířku 1024 pixelů. Nastavte jednu z miniatur WordPress na šířku 620 pixelů a použijte tuto miniaturu na své stránce a propojte ji s větším obrázkem.
Pravděpodobně nepotřebujete obrázky vyšší než 1024px (to by mělo pro většinu blogů stačit), ale co když ano?
V takovém případě můžete zvážit nahrání obrázků ve větším rozlišení a použít CDN.
Za chvíli se o CDN dostaneme podrobněji.
Před nahráním obrázky optimalizujte
Své obrázky můžete v počítači optimalizovat pomocí Photoshopu. Někteří lidé doporučují, abyste udělali svůj obrázek o něco ostřejším pomocí Smart Sharpen, Unsharp Mask, High Pass Filter nebo jakýmkoli jiným nástrojem, který se vám líbí; Photoshop má několik možností.
Po doostření jsem neviděl moc velký rozdíl (v KB), ale nejsem mistr Photoshopu.
Změňte velikost fotografie na rozlišení, které potřebujete na svém webu, použijte Uložit pro web, zvolte JPG, Kvalita mezi 60-80 %, zaškrtněte Progresivní a poté Uložit.
Doporučuji používat JPG, pokud nepotřebujete průhlednost a nepotřebujete použít PNG.
Pokud nemáte Photoshop, můžete k optimalizaci použít tyto nástroje:
- Riot (Windows)
- Imageoptim (Mac)
- Jpegmini (online, Mac a Windows)
- Kraken (online)
- Compressor.io (online)
Sám používám Jpegmini; I po optimalizaci pomocí Photoshopu mohu stále oholit dalších 5-10 %
Nebo optimalizujte během nahrávání
Nevěřím, že existuje jeden způsob, který je nejlepší způsob, jak optimalizovat obrázky, pokud nechcete trávit čas optimalizací svých fotografií v počítači, než je nahrajete, můžete nechat veškerou práci udělat plugin WordPress pro vás.
Existuje mnoho pluginů WordPress, které můžete použít:
- WP Smush – Optimalizace obrazu
- ShortPixel Image Optimizer
- Kraken.io Image Optimizer
- Optimus - WordPress Image Optimizer
- EWWW Image Optimizer Cloud
- Imagify Image Optimizer
Pomocí těchto pluginů můžete optimalizovat obrázky při nahrávání a také optimalizovat ty, které jste již nahráli.
Nepoužil jsem je všechny, pouze WP Smush a ShortPixel a zjistil jsem, že ShortPixel je vynikající. Může ubrat pár KB i pro obrázky dříve optimalizované pomocí Photoshopu a Jpegmini.
Dalším užitečným pluginem je Imsanity .
Pokud máte web s více autory, musíte mít pod kontrolou, jaké obrázky lidé nahrávají. Nastavte maximální šířku, výšku a kvalitu. Když uživatel nahraje obrázek, který je větší, plugin jej automaticky zmenší na nakonfigurovanou velikost.
WP Smush Pro to také dělá.
Zobrazování obrázků
Nyní, když máte optimalizované obrázky, můžete také zlepšit způsob, jakým tyto obrázky prezentujete na svých webových stránkách.
Pokud máte na stránce hodně fotek, například na módním blogu, můžete využít líné načítání.
To znamená, že vaše obrázky se načtou, pouze když jsou viditelné, když návštěvník posouvá dolů.
K tomu můžete použít jeden z následujících pluginů WordPress:
Nemůžu ti říct, který plugin je lepší. Musíte otestovat, protože může dojít k nekompatibilitě s vaším tématem. Například líné načítání nefunguje pro doporučené obrázky, pokud máte téma Genesis Framework.
Také když jsem testoval líné načítání, vypadalo to na mobilu divně. Na místech, kde měly být fotografie, byla prázdná místa, protože obrázky se nenačítaly tak rychle jako při zobrazení na ploše.
Další věc, kterou můžete udělat pro urychlení načítání, je poskytovat obrázky ze subdomény, například images.domain.com.
Musíte vytvořit subdoménu z cPanel nebo jakéhokoli ovládacího panelu, který vaše hostitelská společnost nabízí, a poté nastavit WordPress tak, aby načítal média z této subdomény pomocí WP Original Media Path .
Mohu napsat podrobný blogový příspěvek pro lidi, kteří to chtějí udělat (pokud to někdo požaduje), ale moje doporučení je použít místo toho CDN. Je to mnohem přímočařejší řešení.
Použijte CDN
Cloudflare je super snadný a zdarma. Stačí změnit své doménové jmenné servery na Cloudflare a aktivovat (zaškrtněte oranžový cloud pro záznamy DNS) a je to. Vaše statické soubory (obrázky, CSS, JS) se načtou z Cloudflare CDN.
Existují další společnosti CDN, které můžete použít, uvedené níže. Ale myslím, že Cloudflare je nejjednodušší implementovat:
Ukliďte po sobě
Pokaždé, když změníte téma, zanecháte za sebou stopu nepoužitých miniatur a záznamů databáze souvisejících s těmito obrázky.
Při přepínání motivů můžete použít AJAX Thumbnail Rebuild k opětovnému vytvoření miniatur tak, aby odpovídaly vašemu novému motivu.
Staré miniatury lze ze serveru odstranit pomocí jednoho z následujících pluginů:
Doporučuji Thumbnail Cleaner, protože je rychlý. Ale odstraní všechny vaše miniatury, nejen ty nepoužívané. Po jeho odstranění musíte použít AJAX Thumbnail Rebuild k opětovnému vytvoření miniatur, které potřebujete.
Nepoužité miniatury nemají vliv na výkon vašeho webu. Jen zabírají místo na vašem serveru. Existují však položky databáze související s těmito miniaturami a je dobrým zvykem udržovat databázi co nejčistší.
To uděláme v dalším kroku – vyčistíme databázi WordPress.
Zanechat odpověď