Máte pomalý web? Možná za to můžou obrázky

Máte taky ten pocit, že se váš web najednou zpomalil? Může to mít samozřejmě spoustu příčin. Často se ale setkávám s klienty, kteří na svém webu mají opravdu nesmyslně velké obrázky. A protože klidně i jeden obrázek velikosti několika megabajtů dokáže pěkně zadělat na nervy, povím vám dnes něco málo o tom, jak si obrázky před použitím na webu optimalizovat.

Jaká je realita

V době, kdy má většina z nás fotoaparát neustále po ruce, není problém udělat fotku kdykoliv je to potřeba. Pokud pak ale takovou fotku chcete nahrát na svůj web, je potřeba ji předem upravit. Taková fotka může mít klidně i 20 MB (někdy ještě mnohem více). A sami si pak spočítáte, co to udělá s načítáním stránky, když takových fotek budete mít na jedné stránce svého webu 10.

Pokud má webová stránka velikost 2 MB, doba jejího načtení je cca. 4 sekundy. To není mnoho a je to také správně. Pokud ale na takovou stránku umístíte obrovské obrázky a ještě k tomu jich bude více, doba načtení se rapidně prodlouží. A většina uživatelů se pak na váš web ani nepodívá. Protože než aby čekali, raději jdou pryč.

Velikost souboru vs. rozměry obrázku

Na výslednou velikost souboru obrázku nemají vliv pouze jeho rozměry. Roli zde hrají také typ souboru a úroveň komprimace.

Níže uvádím tři příklady, které se v mém případě v praxi dobře osvědčily:

• Obrázky, které chci použít jako pozadí stránky, kde budou přes celou obrazovku, používám v rozměrech Full HD (1920 x 1080 px.), respektive 1920 pixelů na šířku a k tomu odpovídající výška. Pokud má můj obrázek větší rozměry (typicky po stažení z fotoaparátu), jednoduše ho zmenším. Obrázek ukládám samozřejmě jako klasický JPG soubor. Většina editorů obrázků umožňuje při ukládání nastavit také úroveň komprimace. U JPG souborů používám komprimaci cca. 90, při které pouhým okem prakticky nepoznáte rozdíl proti originálu. Vždy se snažím, aby velikost souboru s obrázkem na pozadí byla do 300 kB.
• Menší obrázky, které používám na webu například jako doplnění textu, ilustrace apod. upravuji na velikost okolo 500 pixelů na šířku. Ve formátu JPG při použití komprimace mají takové obrázky velikost souboru v řádu jednotek až desítek kB.
• Pokud potřebuji vložit obrázek se zachováním 100% kvality (třeba logo, značku), místo JPG používám formátu PNG. Upravím pak pouze rozměry obrázku na zhruba skutečnou velikost, ve které se má zobrazovat na webu. Takový obrázek pak samozřejmě bude souborově větší, ale většinou jich nebývá mnoho a není tak třeba se tím znepokojovat.

V čem obrázky upravit

Existuje mnoho nástrojů pro práci s obrázky. Pokud pracujete na Macu, bohatě si vystačíte s nativní aplikací. V případě Windows zase poslouží Malování.

Sofistikovanější ovládání pak poskytuje skvělý online editor obrázků Canva.com, který můžete používat zcela zdarma (v příštím článku vám o něm řeknu více).

Pokud potřebujete obrázky optimalizovat hromadně, výborným řešením je resizepiconline.com. Optimalizace většího množství obrázků třeba pro fotogalerie je tak otázkou chvilky.

Mioweb to udělá za vás

Teď ale potěším všechny uživatele Miowebu. Pokud svůj web tvoříte právě v Miowebu, nemusíte nějakou velikost obrázků řešit vůbec. V aktuálně dostupné verzi umí Mioweb optimalizaci obrázků provádět za vás.

Chcete také Mioweb? Podle mě ten nejlepší nástroj, co dnes můžete mít. Přečtěte si o něm více zde.