Obrázky mohou často zvýšit kvalitu svých webových stránek a jsou klíčem k realizaci vizuální strategie. Nicméně, čím více médií, tím jsou stránky těžší, a to má větší dopad na dobu načítání vašich stránek. Pokud načítání vašich webových stránek trvá příliš dlouho, tak nezáleží na tom, jak vypadají úžasně – návštěvníky budou odrazovat a odejdou dřive než by jste si přáli.
Odpověď je komprimovat nebo optimalizovat vaše obrázky, takže se zmenší, aniž by ztratily jakoukoli kvalitu. V tomto článku budeme hovořit více o kompresi obrázků, o tom, jak vám to pomůže, a jak používat údaje, abyste přesně věděli, jaký rozdíl to může udělat, pokud jde o dobu načítání.
Co je komprese obrázků (a jak vám může pomoci)
Stručně řečeno, komprese obrázků znamená snížení jejich velikosti souboru, takže zabere méně místa. Existují dvě metody: „ztrátové“ a „bezztrátové“. Ztrátová optimalizuje vaše snímky drasticky, přičemž potenciálně snižuje vizuální kvalitu a bezztrátová pouze komprimuje soubory co nejvíce, aniž by ovlivnil jejich vzhled.
V každém případě je hlavní výhoda optimalizace obrázků snadno pochopitelná. Méně úložného prostoru vaše grafika zaujme, tím budou vaše stránky lehčí. To znamená, že uživatelé budou moci načíst vaše stránky rychleji, což má přímý dopad na jejich použitelnost. Zde se budeme zabývat bezztrátovou kompresí.
Jak komprese obrazků ovlivňuje čas načítání vašich webových stránek
To můžete zjistit velice rychle. Zkuste si vytvořit stránku kam nahrajete obrázek/ky v plné velikosti. Poté si otestujte tuto stránku online nástrojem Pingdom Toos , Google PageSpeed Insights nebo GTmetrix. Poznamenejte si výsledky a podívejte se na doporučení. Neumíte anglicky? Nevadí. Zkopírujte jakýkoliv text a vložte je do Google překladače.
Ten samý obrázek vložte do online komprese Tiny PNG, stáhněte obrázek a vložte jej místo originálního obrázku a znovu otestujte nástrojem Pingdom Tools .
Optimalizace obrazků má významný dopad na dobu načítání webových stránek. Abychom byli přesnější, pokud optimalizujete každý obrázek na vašem webu, můžete očekávat zlepšení v době načítání o minimálně 10%.
Někteří z vás si možná myslí, že 10% nestačí k ospravedlnění potíží s kompresí jednotlivých obrázků na vašem webu. Existuje však spousta způsobů, jak automatizovat proces v aplikaci WordPress. Pokud to neuděláte, v podstatě říkáte „ne“ pro lepší výkon.
Ještě důležitější je, že optimalizace obrazků je pouze jedním z mnoha vylepšení, které byste měli implementovat na vašem webu, abyste zlepšili doby načítání. Mohou být vzaty v úvahu například ukládání do mezipaměti (pluginy jako: W3 Total Cache nebo WP Super Cache , komprese GZIP, použití dobře optimalizované šablony a mnoho dalších aspektů. Pokud implementujete všechny z nich, vaše webové stránky by měly být rychlé!
Závěrem, vaše zisky rychlosti načítání webu budou záviset na tom, kolik obrázků vaše stránky obsahují a jaké kompresní nástroje používáte. S největší pravděpodobností se vaše doby načítání pravděpodobně budou dále zlepšovat. Nicméně, nic nezjistíte, dokud si to nevyzkoušíte sami.
Komprese je jen jedna část příběhu
Než začnete komprimovat obrázky, měli by jste mít jasno v tom kam obrázky na stránce vložíte a jakou čast velikosti stránky mají zabírat. Když víte, že obrázek bude jen na 50% velikosti stránky, tak je zbytečné komprimovat obrázek, který je stažený přímo z fotoaparátu nebo mobilu a má velikosti pixelů, které pro web absolutně nepotřebujete.
Maximální rozlišení, které stačí na většinu webových stránek je šířka okolo 2 400 pixelů na plnou stránku. Tyto velikosti se používají na vytvoření pozadí stránek nebo na slidery (posuvníky) obrázků.
Zde je jednoduchý diagram, který Vám ukáže přibližné velikosti obrázků. Vždy hovoříme o šířce v pixelech. Výška záleží na tom co chcete z obrázku ukázat.
A co pozadí obrázku?
Ne vždy potřebujete, aby obrázek měl background/pozadí (např. fotografie osob). Pokud je to tento případ je dobré pozadí odstranit a tím získat další kB ve váš prospěch. Zdá se to jako maličkost, ale jak na webu přibývá obsah, tak se i mění doba načítání stránek. Dodržování pravidel velikosti v pixelech, velikosti v kB a odstranení toho co nepotřebujeme, nám ve výsledku zachová web na, který se každý rád podívá a neodejde.
Skvělým nástrojem na odstranení pozadí je Remove Image Background
Závěrem
Optimalizace obrázků je jedním z mnoha způsobů, jak zkrátit dobu načítání webových stránek. Nicméně je často obtížné si představit, jak velký dopad může mít na celkový výkon. V každém případě WordPress nabízí spoustu nástrojů, které můžete použít k optimalizaci obrázků. Dokonce můžete automatizovat proces, pokud chcete.
Zdroj: Elegant Themes