Velkoformátová fotografie dokáže webu dodat emoce, atmosféru i silný první dojem. Zároveň ale patří k prvkům, které se při návrhu nejčastěji podceňují. Obzvlášť tehdy, když je na snímku lidská tvář.
Představme si situaci, kterou známe z významných veřejných událostí. Zemře panovník, prezident nebo jiná významná osobnost a instituce zveřejní na svém webu celoplošný portrét. Na velkém monitoru působí důstojně, kompozice je vyvážená a tvář je přesně tam, kde má být. Jenže na notebooku je část hlavy oříznutá, na mobilu zůstane vidět pouze oko a přes obličej vede nadpis.
Není to nutně chyba fotografie. Často jde o problém způsobu, jakým web s obrázkem pracuje.
Jeden obrázek, stovky různých obrazovek
Webové stránky nemají pevně daný formát jako plakát nebo tisková stránka. Stejný obsah se zobrazuje na širokoúhlém monitoru, notebooku, tabletu i telefonu. Každé zařízení má jiný poměr stran a jinou výšku dostupného prostoru.
Pokud má fotografie vyplnit celou plochu, musí se přizpůsobit. Nejčastěji se používá vlastnost background-size: cover, která zajistí, že obrázek pokryje celý kontejner. Zachovává jeho proporce, takže nedochází k deformaci, ale část fotografie se ořízne.
A právě zde vzniká zásadní rozdíl: obrázek se nedeformuje, ale jeho kompozice se může úplně změnit.
U krajiny to často nevadí. Když se ořízne kus oblohy nebo lesa, snímek stále funguje. U portrétu může několik desítek pixelů rozhodnout o tom, zda bude výsledek působit profesionálně, nebo nechtěně komicky.
Proč je portrét na pozadí tak náročný
Lidská tvář je vizuálně citlivý motiv. Návštěvník okamžitě rozpozná, když je hlava nevhodně uříznutá, oči jsou příliš blízko okraji nebo přes obličej prochází text. U pietních a oficiálních webů je tento problém ještě výraznější, protože fotografie musí zachovat důstojnost a respekt k zobrazované osobě.
Nejčastější chyby vznikají tehdy, když se použije jedna fotografie pro všechna zařízení, nastaví se cover a výsledek se zkontroluje pouze na desktopu. Na mobilu se pak může stát, že zůstane viditelný jen úzký střed snímku.
Dalším problémem je umístění textu. Nadpis, tlačítko nebo navigace mohou překrýt oči či ústa. Přitom právě tyto části obličeje jsou pro vnímání portrétu nejdůležitější.
Začněte výběrem správné fotografie
Technické nastavení nedokáže zachránit každou kompozici. Pokud je portrét vyfotografovaný velmi těsně, bez prostoru kolem hlavy, bude jeho použití jako celoplošného pozadí obtížné.
Pro hero sekci je vhodnější fotografie s dostatečným negativním prostorem – tedy volnou plochou, do které lze umístit text a která poskytuje rezervu pro ořez. Ideální je, když je osoba umístěná mimo střed a na druhé straně zůstává prostor pro nadpis.
Při výběru je dobré myslet také na mobilní verzi. Někdy je lepší připravit samostatný vertikální výřez než se snažit za každou cenu použít širokoúhlou fotografii.
Nastavení pozice je důležitější než samotné „cover“
V CSS lze určit, která část fotografie má zůstat při ořezu viditelná. K tomu slouží vlastnost background-position.
.hero {
background-image: url("portret.jpg");
background-size: cover;
background-position: 65% 35%;
background-repeat: no-repeat;
}Hodnoty určují ohnisko obrázku. Místo automatického centrování tak můžeme upřednostnit oblast, kde se nachází tvář. Neexistuje však univerzální nastavení, které bude fungovat pro každý portrét. Je potřeba jej ověřit na různých šířkách a výškách obrazovky.
U responzivního webu lze pozici měnit pomocí media queries:
.hero {
background-size: cover;
background-position: 65% center;
}
@media (max-width: 767px) {
.hero {
background-position: 58% 25%;
}
}Tím lze pro mobilní zařízení zvolit jiné ohnisko. Pokud ale samotná fotografie neposkytuje dostatek prostoru, ani tato úprava nemusí stačit.
Kdy použít samostatnou mobilní fotografii
U významných portrétů bývá nejspolehlivějším řešením připravit dva různé výřezy: horizontální pro desktop a vertikální pro mobil. Nejde o dvě odlišné fotografie, ale o dvě kompozice stejného snímku, optimalizované pro konkrétní formát.
Na desktopu může být osoba umístěná vpravo a text vlevo. Na mobilu lze použít bližší portrét, nadpis přesunout pod fotografii a zachovat celou tvář bez nevhodného překrytí.
Takové řešení je často lepší než komplikované CSS, které se snaží vynutit jednu kompozici pro všechny poměry stran.
Text přes fotografii: čitelnost versus respekt k motivu
Text umístěný přímo přes fotografii potřebuje dostatečný kontrast. Jednoduchý tmavý overlay může pomoci, ale při vysoké intenzitě potlačí samotný snímek. U portrétu navíc může nepřirozeně ztmavit obličej.
Modernější a často účinnější variantou je směrový gradient, který ztmaví pouze oblast určenou pro text:
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0, 0, 0, .78) 0%,
rgba(0, 0, 0, .35) 48%,
rgba(0, 0, 0, 0) 100%
);
}Text je díky tomu čitelný, zatímco portrét na opačné straně zůstává přirozený. Na mobilu je ale potřeba gradient upravit podle nové kompozice. Nelze předpokládat, že desktopové řešení bude fungovat i na úzké obrazovce.
Ještě bezpečnější možností je text přes fotografii vůbec neumísťovat. Samostatný textový blok pod obrázkem může působit čistěji, důstojněji a zároveň zajistit lepší přístupnost.
Pozadí není vždy správná volba
Fotografie, která nese zásadní obsah, by neměla být automaticky považována za dekorativní pozadí. U portrétu významné osobnosti může být vhodnější použít běžný HTML obrázek s atributem alt, případně element <picture> pro různé responzivní zdroje.
To umožňuje lépe kontrolovat význam obrázku, jeho přístupnost i způsob zobrazení. CSS vlastnost object-fit: cover funguje podobně jako background cover, ale obrázek zůstává skutečným obsahem stránky.
Pokud je cílem zachovat celý portrét, lze použít object-fit: contain, případně nechat fotografii zobrazit v jejím přirozeném poměru stran. V takovém případě se nemusí vyplnit celá plocha, ale nedojde k nežádoucímu ořezu.
Jak bych postupoval při návrhu důležitého portrétu
Nejprve bych určil, co je na fotografii zásadní a co se nesmí oříznout. Následně bych připravil kompozici pro desktop i mobil, vymezil bezpečnou oblast pro text a zvolil vhodný způsob zobrazení. Teprve poté bych řešil gradienty, animace a další vizuální efekty.
Výsledek bych testoval nejen na několika běžných šířkách, ale také na různých výškách obrazovky. Nízký notebook a vysoký mobil totiž mohou stejný hero obrázek oříznout zcela odlišně. Důležité je zkontrolovat také stav při zvětšení textu a při delším nadpisu.
U pietního nebo oficiálního webu bych upřednostnil jistotu před efektem. Pokud není možné zaručit důstojné zobrazení portrétu na všech zařízeních, je lepší zvolit jednodušší rozvržení s fotografií a textem odděleně.
Dobrý webdesign není jen o tom, co vidíme na monitoru
Práce s pozadím ukazuje, že kvalitní webdesign není pouze otázkou výběru hezké fotografie. Je to schopnost předvídat, jak se bude kompozice chovat v různých podmínkách, a navrhnout řešení, které zachová čitelnost, estetiku i význam obsahu.
Při tvorbě webových stránek pro klienty v Praze i dalších městech se proto věnuji nejen vizuálnímu návrhu, ale také responzivnímu chování jednotlivých prvků. Cílem je, aby web fungoval stejně přesvědčivě na velkém monitoru i na telefonu – a aby důležité detaily nezmizely při prvním zmenšení obrazovky.
Pokud připravujete nový web nebo potřebujete upravit stávající stránky, rád s Vámi proberu možnosti. Více informací najdete na stránce zde, případně mi můžete rovnou napsat a společně se podíváme na Váš projekt.