Jak upravovat fotky, které vkládáte na svůj web?

Umístit fotku na web se zdá jako poměrně jednoduchý úkol – pro grafika. Ale pro obyčejného smrtelníka, který si nechal vytvořit web na míru a nyní pracuje s administračním systémem, do kterého nový obsah umisťuje sám, to může být poměrně oříšek.

Umístit fotku na web se zdá jako poměrně jednoduchý úkol – pro grafika. Ale pro obyčejného smrtelníka, který si nechal vytvořit web na míru a nyní pracuje s administračním systémem, do kterého nový obsah umisťuje sám, to může být poměrně oříšek.

Ne snad proto, že by neuměl kliknout na tlačítko „Nahrát fotografii“, ale ono to takto jednoduché ve většině případů nebývá. Pokud má totiž fotografie na webu vypadat k světu, je potřeba dodržet jistá pravidla a postupy. Pokud jsme navíc omezení rozměry fotky či velikostí souboru, situace se trošku komplikuje. To se stává typicky například při publikování fotek do internetové galerie.

Optimální velikost obrázků pro web

Častou chybou na webových stránkách bývají vložené fotografie ve větším rozlišení, než se skutečně zobrazují. Na první pohled rozdíl není vidět, ale poznáte jej při stahovaní dat prohlížečem. Pokud je takto vložených obrázků na stránce více, výrazně to sníží rychlost načítaní a tak i trpělivost vašich návštěvníků.

Obrázky na stránce by měly mít stejné rozměry v pixelech jako ty ve skutečném rozlišení. Rozlišení by mělo být 72 DPI (Dots Per Inch, neboli počet bodů na palec). Pokud na web vkládáte i náhledové obrázky (obrázky, které se po rozkliknutí zvětší), měly by mít rozměry idálně 800×600 pixelů, maximálně pak 1200×800 pixelů. Pokud byste náhledy vytvořily větší, návštěvníci vašeho webu by mohli mít problém například náhledové okno zavřít.

velikost.png

V čem nám snížení datové velikosti obrázků pomůže?

  • URYCHLÍ NAČÍTÁNÍ STRÁNEK
  • SNÍŽÍ ZATÍŽENÍ HOSTINGU
  • ZAJISTÍ LEPŠÍ HODNOCENÍ Z HLEDISKA SEO
  • UMOŽNÍ POUŽÍVAT OPRAVDU VELKÉ PRODUKTOVÉ FOTOGRAFIE
  • ZVÝŠÍ POHODLÍ PŘI PROHLÍŽENÍ STRÁNEK

Oříznutí snadno a rychle

Vizuálně sice nepatří mezi nejhezčí stránky, ale účel plní dokonale. Řeč je o Lunapic  – stránce, na kterou nahrajete Vaší fotografii a ona Vám umožní oříznout jí přesně podle vašich představ a uložit. Ořezávání fotek na této stránce už nemůže být jednoduší, stačí si vybrat tvar (obdélník, čtverec či kruh) a následně myší vybrat tu část obrázku, kterou chcete oříznout. Při vybírání výseče se vám zároveň s pohybem myši zobrazuje i její aktuální výška a šířka, takže máte vždy přehled o tom, jak je na tom oříznutá část s velikostí a zda vyhovuje Vašim požadavkům.

Pokud si chcete s fotkami trochu i pohrát

Pokud hledáte jednoduchý editor, který vám pomůže s oříznutím či změnou velikosti fotky, ale zároveň vám nabídne i výběr dalších možností jak si s fotkou „pohrát“, bude pro vás BeFunky to pravé ořechové. Najdete zde totiž i možnost fotku otočit, přidat do ní text či vyvážit její jas, barvy a podobně. Celý editor je přehledný, jednoduchý k použití a vizuálně velmi povedený.

uprava.png

Dalšími šikovnými pomocníky při úpravě obrázků na web Vám mohou být například:

A jaký formát obrázků zvolit?

Na internetu se nejvíce používají dva formáty obrázků a to ty s koncovkou .jpg a .png.

.JPG

Nejčastější formát obrázků na internetu. Výborný pro úpravu digitálních fotografií, protože dokáže výrazně snížit datový objem a přesto zachovat kvalitu obrazu. Nehodí se ale pro zobrazení textu nebo ikon nebo obrázky tvořené uměle.

.PNG

Formát .PNG zaručuje jemný přechod okraje objektu na obrázku do průhledného pozadí. Tento formát ocení právě především tvůrci webových stránek. Hodí se pro obrázky obsahující jednobarevné oblasti, plynulé přechody a ostré hrany (umělé obrázky). Pro tento formát existují i návrhy pro jednoduché animace podobně jako u GIFu, ale do praxe se zatím neprosadily.

Vít Kašpar

Je spoluzakladatelem agentury. V oblasti webdesignu se pohybuje více než 14 let. Zkušenosti sbíral jako HTML kodér, UI designér i PHP programátor na malých i nadnárodních projektech. Aktuálně se věnuje UX designu a návrhům řešení pro naše klienty.

Další články