Pokud se vám web načítá pomalu, je to problém. Tím spíš dnes, protože čím dál tím více lidí chodí na web přes mobil, takže často přes mobilní data, kde každý kilobajt je znát. Uživatel může odejít a nebo minimálně to sníží konverzní poměr, protože než vůbec uživatel dostane k akci - třeba zakoupení zboží a služeb, může ho mezitím odradit to, že se mu vše dlouho načítá. Samozřejmě si toho všímá i google, který váš web hodnotí a rychlost načítání je jedním z parametrů. Podle toho hodnocení vás potom umístí ve výsledcích hledávání kde chcete být samozřejmě co nejvýše.

‍

Nespočetněkrát jsem dokonce viděl, jak majitelé webu na něj nahrávají fotky třeba přímo ze zrcadlovky, které mají i několit desítek megabajtů a to fakt nikdo nechce stahovat. Oni často i samotní webaři se s tím moc nepářou a jsou schopní na web nahrát PNG o velikosti několika megabajtů. Naštěstí některé redakční systémy už mají limit pro vkládání obrázků, jako je třeba webflow, ale podle mě pořád povolujou celkem dost. No a proto vznkllo tohle video, jednak abych ho mohl přeposlat jako návod svým klientům a jednak samozřejmě pro všechny majitele webu, kteří chtějí vědět, jak s obrázky na webu správně pracovat, pokud vám to váš webař při předání webu neřekl.

‍

FORMÁTY

Začnu formátem - ty běžné jsou jpg pro fotky, PNG pro obrázky s průhlednou pozadím a pak gif pro animace. Google ale vymyslel formát webp, a právě ten i doporučuji pro použití na webu, protože dokáže kombinovat vlastnosti všech tří zmíněných, ale až v o desítky procent datově úspornější verzi.

‍

Pokud na web vkládáte cokoliv vektorového, co je vektor se mrkněte na tento článek, typicky logo, ideální formát je SVG. Ten zachovává přirozené vlastnosti vektoru, tedy možnost jeho roztahování bez ztráty kvality a zároveň je datově úsporný.

‍

Ke konverzi mezi formáty, typicky JPG, PNG a GIF do Webp stačí do google zadat PNG to Webp a pak už vám vyběhne několik webových stránek, kam obrázek nahrajete a ono vám to vyhodí požadované.

‍

VELIKOST

Velikost je jednak rozlišení. Jak to zjistíte? Dáte pravé tlačítko myši u obrázku a pak vlastnosti a hodnota je uvedená v pixelech - px. Aktuálně bych doporučil šířku 1500px až 2500px pro velké obrazovky které jsou třeba na pozadí webu. A abych to nekomplikoval, tak zjednodušeně pro většinu ostatního obsahu bude v pohodě šířka od 600 do 1200px.

‍

Upravit to můžete buď pomoci grafických programů jako jsou Photoshop, Affinity Photo, Figma nebo třeba Pixelmator. Pokud ani jeden z nich nemáte, zase pomůže webová aplikace, zadáte do google resize image, nahrajete obrázek, u většiny z nich můžete nahrát i několik souběžně a ono to udělá na konkrétní rozměr a nebo to dáte procentuálně.

‍

Druhou věcí z pohledu velikosti je velikost datová. K tomu můžete použít stejné aplikace, jen budete hledat kompres image. Díky nim pak zmenšíte fotku až o desítky procent, takže třeba ze 2MB na 150kb. Obecně bych doporučil, pokud používáte jpg a png, aby jste ideálně nepřekračili u obsahových obrázků 100kb a u titulních velkýh 100 až dejme tomu 300kb.

‍

Mimochodem pokud používáte pro správu svého webu redakční systémy, jako je třeba Wordpress nebo Webflow, tak zmíněnou optimalizaci můžete udělat přímo v nich. Třeba zmíněné Webflow to má jako součást galerie, kdy si vyberete fotky, které chcete optimalizovat a dáte kompres a je to - respektive převede to do formátu Webp. Nezmenšuje to ale rozlišení, tudíž o to je potřeba se postarat ještě před nahráním.

‍

Takže jak sami vidíte, není to nic složitého a to ani pokud neovládáte žádný grafický software.