Ako porozumieť pixelom a obrázkom na webe?

Pri tvorbe webdizajnu pre Vašu webstránku či eshop ste sa iste zamýšľali, akú veľkosť obrázkov potrebujete, aké veľké logo by bolo vhodné, prípadne, aký veľký dynamický banner by ste mali použiť.

Vo všetkých troch prípadoch ste sa stretli s veľkosťou udávanou v pixeloch. Často sa nás pýtate, čo je pixel a aký je vlastne veľký, preto som sa rozhodol túto tému trochu bližšie rozobrať.

Čo je to pixel?

Toto označenie v sebe skrýva skratku anglických slov „picture element“, teda „obrazový prvok“.

Skratka pre túto jednotku je „px“.

pixelové logo BiznisWeb.sk

Každý jeden štvorček na uvedenom obrázku predstavuje 1 pixel obrázku. Pri dostatočnom priblížení každého obrázku môžete vidieť jednotlivé pixely.

Vedeli ste, že…?

Pixel nie je možné zmerať pravítkom. Táto jednotka nemá presne stanovený rozmer, ide o najmenšiu bezrozmernú digitálnu jednotku grafiky. 

Prečo pixel nemá presne stanovený rozmer?

Veľkosť pixelov stanovuje rozlíšenie, ktoré máte nastavené na svojom displeji alebo monitore. Ak je monitor nastavený na najvyššie možné rozlíšenie, pixel je rovnako veľký ako základný bod obrazovky.

Vedeli ste, že…?

Monitor a obrazovka nezobrazujú kompaktný obraz, ale vytvárajú ho prostredníctvom miliónov bodov, ktoré sú od seba oddelené. Medzery medzi týmito bodmi sú však veľmi malé a pri bežnom pohľade si ich nevšimnete. Výborným príkladom sú veľkoplošné obrazovky, ktoré z diaľky poskytujú kompaktný obraz, no z blízka je veľmi dobre vidieť jednotlivé body obrazovky. Na rovnakom princípe funguje aj monitor alebo displej.

Ak je však rozlíšenie obrazovky nižšie, pixel je tvorený viacerými bodmi obrazovky. Nemá teda presne stanovenú veľkosť. Veľkosť jednotlivých pixelov sa taktiež môže meniť aj od závislosti technológie, ktorá bola použitá pri tvorbe obrazovky.

Ako môže môj monitor ovplyvniť kvalitu obrázku/obrazu?

Monitor je poskladaný zo základných prvkov, ktoré pri najvyššom možnom rozlíšení predstavujú jeden pixel. Rovnako, ako obrázok, je tvorený z jednotlivých pixelov, aj veľkosť digitálneho obrázka sa najčastejšie udáva v pixeloch. Vlastné rozlíšenie má teda monitor, ale aj samotný obrázok.

Nastavenie rozlíšenia monitora

Odporúčané rozlíšenie pre monitor, na ktorom je písaný tento článok, má 1366 pixelov na šírku a 768 pixelov na výšku. Ak sa pokúsim otvoriť obrázok, ktorý má väčšie rozlíšenie (napríklad Full HD – 1920 pixelov na šírku a 1080 pixelov na výšku), monitor mi ho zobrazí, no nie v jeho skutočnej, plnej veľkosti, ale menší. Nakoľko množstvo pixelov, ktoré obsahuje obrázok, je väčšie ako množstvo pixelov, ktoré má monitor k dispozícii. Podobný princíp však platí aj opačne. Ak využívate drahý monitor, ktorý ma veľké rozlíšenie, ako príklad si môžeme uviesť novú technológiu 4K (rozlíšenie 4096 pixelov šírku x 2304 pixelov na výšku), môže sa Vám stať, že obrázok na tomto monitore bude vyzerať menší, prípadne bude mať horšiu kvalitu ako na iných monitoroch, nakoľko nebol vytvorený pre monitor s tak vysokým rozlíšením.

Rozlíšenie obrázka je teda to, čo spôsobuje, že na jednom monitore sa Vám obrázok môže zdať dostatočne veľký a kvalitný, no na inom monitore to už nemusí byť pravda.

Z tohto faktu vychádza každý skúsený webdizajnér a grafik. Preto, ak máte pocit, že Vaše obrázky nie sú veľmi kvalitné, odporúčame skontrolovať nastavenie rozlíšenia Vášho monitora.

Aké veľké rozmery by mali mať obrázky na webe?

Pri tvorbe webovej stránky alebo eshopu, resp. webdizajnu, by ste mali presne vedieť,  aké veľkosti obrázkov budete potrebovať.  Ak sa k tejto informácii neviete dopracovať, investujte do obrázkov v čo najväčších rozmerov. Tak budete mať istotu, že následne zmenšenie nebude mať negatívny dopad na kvalitu obrázkov. (Toto neplatí pri vektorovej grafike, ktorej sa však budeme venovať niekedy nabudúce :))

Pri ukladaní však treba mať na pamäti aj samotnú veľkosť obrázkov a taktiež rýchlosť ich načítania.

Preto je dobré mať k dispozícii originály obrázkov vo veľkých rozmeroch. V prípade potreby dokážete rýchlo prispôsobiť jeho veľkosť tak, aby zaberal čo najmenej z diskovej kapacity webu a načítal sa čo najrýchlejšie.

Vedeli ste, že…?

Maximálna veľkosť loga nahratého do webu vo Flox 3 je 300 pixelov na šírku a 100 pixelov na výšku?

Kvalitné obrázky sú jedným zo základných pilierov dizajnu Vášho e-shopu alebo webstránky. Práve obrázok rozhoduje o tom, či si zákazník kúpi produkt vo Vašom internetovom obchode.

Rovnako dôležitý je aj ich rozmer.

Dajte si preto záležať na vlastných produktových obrázkoch, príp. zakúpte originály z fotobanky. Táto investícia sa Vám rýchlo vráti v podobe nových objednávok a spokojných zákazníkov. Detailné obrázky na webe sú totiž skvelým spôsobom, ako zákazníkovi nahradiť kontakt s produktom v kamennej predajni.

A presne to potrebujete, nahradiť zmyslové vnímanie Vašich zákazníkov prostredníctvom dostupných možností – textom, obrázkami, príp. videom.

Letná uhorková sezóna je na túto aktivitu ako stvorená 🙂

Tak nestrácajte ani chvíľu!