Blog o vývoji softvéru na mieru

Pútavé obrázky sú základom pre každý pekný web. Okrem vzhľadu obrázka sú však dôležité aj ďalšie faktory, na ktoré netreba zabúdať.

Rýchlosť načítania webových stránok

Než sa webová stránka zobrazí v celej svojej kráse, musí počítač, tablet, či mobil načítať okrem textov aj všetky obrázky a informácie o spôsobe použitia farieb, veľkosti písma a mnohé ďalšie informácie.

Až keď je všetko načítané, až potom sa stránka zobrazí tak, ako to jej autor zamýšľal.

Čiže čím menej obrázkov a textov stránka obsahuje, tým rýchlejšie sa aj stránka zobrazí. Mohlo by sa zdať, že v dnešnej dobe, keď rýchlosti internetu dovoľujú sledovať online videá, či televíziu, tak je možné na webové stránky nahrať čokoľvek.

Pamätajte však na fakt, že aj dnes existujú ľudia, ktorých internetové pripojenie nie je veľmi rýchle a taktiež pamätajte na skutočnosť, že pokiaľ ľudia pristupujú na internet z mobilného telefónu, tak čím väčšie obrázky na web dáte, tak tým pomalšie sa webové stránky načítajú, pretože musí mobil stiahnuť viac dát. A samozrejme čím viac dát mobil stiahne, tak tým vyšší môže byť aj účet jeho majiteľa za dátové služby.

Treba sa teda držať zásady, že dátová veľkosť obrázkov by mala byť, čo najmenšia. Pri zmenšovaní obrázkov však dbajte aj na ich vizuálnu kvalitu, aby ste na úkor ich veľkosti nedali na webové stránky obrázky, ktoré v konečnom dôsledku nebudú vôbec pekné.

V prípade ilustračných obrázkov na hlavnej stránke webu a podobných marketingových podstránkach, ak má obrázok pokrývať väčšinu plochy danej stránky, tak sa pokúste vtesnať do objemovej veľkosti obrázka 100KB.

Katalógy produktov a e-shopy

V prípade katalógov produktov alebo zoznamu produktov v e-shope by mala byť veľkosť obrázkov ešte menšia ako 100KB. Ak máte v produktovej kategórii na jednej webovej stránke zobrazených napríklad 20 produktov a obrázok pre každý produkt by mal 100KB, tak ich celková veľkosť už bude 20 * 100KB = 2MB. Načítanie takéhoto objemu dát už bude naozaj chvíľu trvať.

Pre tento účel sa väčšinou pripravujú iba menšie náhľadové obrázky a väčšie detailnejšie obrázky sa zobrazujú až na stránke detailného zobrazenia konkrétneho produktu.

Ďalším dôležitým faktorom pri zozname produktov je rozmer obrázkov. Obrázky by mali mať všetky rovnaký rozmer, aby bolo zobrazenie webu jednotné a nevznikali rôzne skoky a nezarovnané zobrazenia. 

Tvorca webových stránok môže web naprogramovať tak, že sa veľkosť obrázkov bude automaticky prispôsobovať na konkrétny zvolený rozmer pre zoznam produktov. Má to však svoje úskalia. 

Ak nahráte pre jeden produkt obrázok s pomerom strán 4:3 a pre druhý s pomerom strán 16:9, tak ich automatickým  zmenšovaním nedosiahnete jednoliaty dizajn. Ak by ste sa o to pokúsili, tak bude jeden z obrázkov samozrejme zdeformovaný. Ak bude webová stránka upravovať rozmer obrázka z pomeru strán 4:3 na pomer strán 16:9, tak bude výsledok sploštený na výšku alebo na šírku.

Alternatívnym riešením je možnosť obrázok orezať. Čiže webová stránka sa môže pokúsiť časť obrázka odrezať, aby sa dosiahol potrebný pomer strán a takto orezaný obrázok potom zväčšiť alebo zmenšiť na požadovaný finálny rozmer. Pri tomto prístupe sa však v dôsledku orezu môžu z obrázka vytratiť detaily, ktoré by ste tam chceli mať.

Je vždy najlepšie obrázky upraviť na požadovaný rozmer a objemovú veľkosť skôr ako ich nahráte na web. Potom máte plnú kontrolu nad tým, či sa obrázky zobrazia správne so všetkými detailmi a budú sa načítavať dostatočne rýchlo.

Ako upraviť rozmery a veľkosť obrázkov

Na úpravu obrázkov existuje nespočet nástrojov a editorov fotografií. Súčasťou operačného systému Windows je vždy program s názvom Malovanie (Paint), ktorý vám dobre poslúži na základné úpravy obrázkov. Existujú samozrejme aj ďalšie pokročilejšie programy na úpravu obrázkov, ale ak nie ste profesionál, tak základný editor, ktorý Windows so sebou prináša vám postačí.