Jak porozumět pixelům a obrázkům na webu?
Při tvorbě webdesignu pro své webové stránky nebo e-shop jste se jistě zamýšleli nad tím, jakou velikost obrázků potřebujete, jak velké logo by bylo vhodné, případně, jak velký dynamický banner byste měli použít.
Ve všech třech případech jste se setkali s velikostí udávanou v pixelech. Často se nás ptáte, co je to pixel a jak je vlastně velký, proto jsme se rozhodli toto téma blíže specifikovat.
Co je to pixel?
Toto označení v sobě skrývá zkratku anglických slov „picture element“, tedy „obrazový prvek“.
Zkratka pro tuto jednotku je „px“.
pixelové logo ByznysWeb.cz
Každý jeden čtvereček na uvedeném obrázku představuje 1 pixel obrázku. Při dostatečném přiblížení každého obrázku můžete vidět jednotlivé pixely.
Věděli jste, že…?
Pixel není možné změřit pravítkem. Tato jednotka nemá přesně stanovený rozměr, jde o nejmenší bezrozměrnou digitální jednotku grafiky.
Proč pixel nemá přesně stanovený rozměr?
Velikost pixelů stanovuje rozlišení, které máte nastaveno na svém displeji nebo monitoru. Pokud je monitor nastaven na nejvyšší možné rozlišení, pixel je stejně veliký jako základní bod obrazovky.
Věděli jste, že…?
Monitor a obrazovka nezobrazují kompaktní obraz, ale vytvářejí jej prostřednictvím milionů bodů, které jsou od sebe odděleny. Mezery mezi těmito body jsou velice malé a při běžném pohledu si jich nevšimnete. Výborným příkladem jsou velkoplošné obrazovky, které z dálky poskytují kompaktní obraz, ale z blízka je velmi dobře vidět jednotlivé body obrazovky. Na stejném principu funguje i monitor nebo displej.
Pokud je ale rozlišení obrazovky nižší, pixel je tvořen více body obrazovky. Nemá tedy přesně stanovenou velikost. Velikost jednotlivých pixelů se rovněž může měnit i v závislosti na technologii, která byla použita při tvorbě obrazovky.
Jak může můj monitor ovlivnit kvalitu obrázku/obrazu?
Monitor je poskládán ze základních prvků, které při nejvyšším možném rozlišení představují 1 pixel. Stejně jako je obrázek tvořen z jednotlivých pixelů, i velikost digitálního obrázku se nejčastěji udává v pixelech. Vlastní rozlišení má tedy monitor, ale i samotný obrázek.
Doporučené rozlišení pro monitor, na kterém je psán tento článek, má 1 366 pixelů na šířku a 768 pixelů na výšku. Když se pokusím otevřít obrázek, který má větší rozlišení (například Full HD – 1920 pixelů na šířku a 1080 pixelů na výšku), monitor mi jej zobrazí, ale ne v jeho skutečné, plné velikosti, ale menší. Množství pixelů, které obsahuje obrázek, je totiž větší než množství pixelů, které má monitor k dispozici. Podobný princip ale platí i opačně. Pokud využíváte drahý monitor, který má velké rozlišení, jako příklad si můžeme uvést novou technologii 4K (rozlišení 4 096 pixelů na šířku x 2304 pixelů na výšku), může se Vám stát, že obrázek na tomto monitoru bude vypadat menší, případně bude mít horší kvalitu než na jiných monitorech, jelikož nebyl vytvořen pro monitor s tak vysokým rozlišením.
Rozlišení obrázku je tedy to, co způsobuje, že na jednom monitoru se Vám obrázek může zdát dostatečně velký a kvalitní, ale na jiném monitoru to již nemusí být pravda. Z tohoto faktu vychází každý zkušený webdesignér a grafik. Proto když máte pocit, že Vaše obrázky nejsou příliš kvalitní, doporučujeme zkontrolovat nastavení rozlišení Vašeho monitoru.
Jak velké rozměry by měly mít obrázky na webu?
Při tvorbě webové stránky nebo e-shopu, resp. webdesignu, byste měli přesně vědět, jaké velikosti obrázků budete potřebovat. Když se k této informaci neumíte dopracovat, investujte do obrázků v co největších rozměrech. Tak budete mít jistotu, že následné zmenšení nebude mít negativní dopad na kvalitu obrázků. (Toto neplatí u vektorové grafiky, které se budeme věnovat někdy příště. 🙂 )
Při ukládání souborů je potřeba mít na paměti i samotnou velikost obrázků a rovněž rychlost jejich načtení.
Proto je dobré mít k dispozici originály obrázků ve velkých rozměrech. V případě potřeby dokážete rychle přizpůsobit jejich velikost tak, aby zabíraly co nejméně z diskové kapacity webu a načetly se co nejrychleji.
Věděli jste, že…?
Maximální velikost loga nahraného do webu ve Flox 3 je 300 pixelů na šířku a 100 pixelů na výšku?
Kvalitní obrázky jsou jedním ze základních pilířů designu Vašeho e-shopu nebo webové stránky. Právě obrázek rozhoduje o tom, zda si zákazník koupí produkt ve Vašem e-shopu.
Stejně důležitý je i jejich rozměr.
Dejte si proto záležet na vlastních produktových obrázcích, příp. zakupte originály z fotobanky. Tato investice se Vám rychle vrátí v podobě nových objednávek a spokojených zákazníků. Detailní obrázky na webu jsou totiž skvělým způsobem, jak zákazníkovi nahradit kontakt s produktem v kamenné prodejně.
A přesně to potřebujete, nahradit smyslové vnímání Vašich zákazníků prostřednictvím dostupných možností – textem, obrázky, příp. videem.
Letní okurková sezona je na tuto aktivitu jako stvořená. 🙂
Tak neztrácejte ani chvíli!
