Moderní stránky a webové části jsou navržené tak, aby byly plně responzivní napříč zařízeními. To znamená, že obrázky použité ve webových částech se budou různě škálovat podle toho, kde jsou zobrazené, jaké rozložení je použité a na kterém zařízení je zobrazujete. Například moderní stránky jsou navrženy tak, aby vypadaly skvěle na mobilních zařízeních, a automatické měřítko obrázků pomáhá tento atraktivní zážitek vytvořit.
Jaké velikosti obrázků fungují nejlépe?
Vzhledem k responzivnímu designu stránky není v pixelech konkrétní výška ani šířka, která by zajistila, že si obrázek zachová specifický tvar napříč zařízeními a rozvrženími. Velikost obrázků se automaticky mění a ořezávají, aby se zobrazil co nejlepší výsledek na různých zařízeních a rozloženích. Existuje však několik pokynů, které vám mohou pomoci zajistit, aby vaše obrázky vypadaly na vašich stránkách skvěle.
Nalezení nejvhodnějších velikostí obrázků pro vaši stránku závisí na těchto faktorech:
- Poměr stran: vztah mezi výškou a šířkou obrázků
- Rozložení sloupců: Typ a počet sloupců na stránce
- Rozložení webové části: Rozložení zvolené pro webovou část, ve které je obrázek použitý
Poměr stran
Poměr stran je vztah mezi šířkou a výškou obrázků. Obvykle se vyjadřuje jako dvě čísla, například 3:2, 4:3 nebo 16:9. Šířka je vždy první číslo. Například poměr 16:9 může být 1600 pixelů na šířku a 900 pixelů na výšku. Nebo to může být 1920 x 1080, 1280 x 720 nebo jakákoli jiná kombinace šířky a výšky, která se dá vypočítat jako 16:9. Kalkulačky poměru stran najdete online a v některých nástrojích pro úpravu fotografií, které vám pomohou určit poměry stran vašich obrázků.
Ve většině případů fungují obrázky v moderních webových částech nejlépe v různých rozloženích a zařízeních, pokud mají poměr stran 16:9 nebo 4:3, v závislosti na rozložení.
Rozložení sloupců
Stránka může být rozložena do oddílů, které obsahují různé typy a rozložení sloupců, například sloupce s plnou šířkou, jeden sloupec, dva sloupce a tři sloupce, jeden třetina levého sloupce a třetina pravého sloupce. Obecným pravidlem pro obrázky, u kterých se očekává, že vyplní šířku sloupce, je, že musí být minimálně tak široké jako sloupec, ve kterém jsou umístěné. Například obrázek ve webové části Obrázek v jednom sloupci by měl mít šířku aspoň 1204 pixelů.
Následují pokyny pro šířku jednotlivých rozložení sloupců:
| Rozložení | Šířka v pixelech |
|---|---|
| Sloupec s plnou šířkou | 1920 |
| Jeden sloupec | 1204 |
| Dva sloupce | 586 na sloupec |
| Tři sloupce | 380 na sloupec |
| Jedna třetina levého sloupce | 380 pro levý sloupec; 792 pro pravý sloupec |
| Jedna třetina pravého sloupce | 792 pro levý sloupec; 380 pro pravý sloupec |
Vzhledem k responzivní povaze stránek se obrázky ve sloupcích s plnou šířkou budou vždy zobrazovat přes celou šířku obrazovky s automatickou výškou podle velikosti obrazovky.
Výška obrázků umístěných v jiných rozloženích sloupců bude záviset na poměru stran. Zde jsou pokyny pro výšku/šířku pro poměry stran 16:9 a 4:3 (zaokrouhlené nahoru/dolů na nejbližší pixel). To je užitečné, pokud chcete mít obrázky na šířce a výšce, které se přizpůsobí pro mobilní zařízení, například:
| POMĚR STRAN ROZLOŽENÍ |
16 × 9 Šířka × výška v pixelech |
4 x 3 Šířka × výška v pixelech |
|---|---|---|
| Jeden sloupec | Rozměry 1204 × 677 | 1204 × 903 |
| Dva sloupce | 586 × 330 | 586 × 439 |
| Tři sloupce | Rozměry 380 × 214 | Rozměry 380 × 285 |
| Jedna třetina levého sloupce | 380 x 446 pro levý sloupec; 792 x 446 pro pravý sloupec | 380 x 594 pro levý sloupec; 792 x 594 pro pravý sloupec |
| Jedna třetina pravého sloupce | 792 x 446 pro levý sloupec; 380 x 446 pro pravý sloupec | 792 x 594 pro levý sloupec; 380 × 594 pro pravý sloupec |
Rozložení webových částí
Rozložení ve webových částech, které používáte, budou mít vliv také na měřítko obrázků. Následující příklady ukazují různé webové části a některé možnosti a poměry stran, které můžete použít.
| Webová část Hero | Následující poměry stran pro rozložení dlaždic a vrstev jsou:
|
| Webová část Zvýrazněný obsah | 16:9 je poměr stran pro rozložení Karusel, Filmový pás a Mřížka. Tady je příklad poměru stran 16:9. První obrázek ukazuje rozložení filmového proužku a druhý rozložení mřížky: 
|
| Webová část Obrázek | Obrázky se zvětší na šířku oddílu, který webovou část obsahuje. Tady je příklad obrázku ve webové části Obrázek, který používá poměr stran 16:9. 
Máte také možnost změnit poměr stran nebo použít nástroj pro úpravu obrázků nebo použít úchyty pro změnu velikosti obrázku a obrázek zvětšit nebo zmenšit. 
|
| Webová část Galerie obrázků | V různých rozloženích lze použít následující poměry stran:
|
| Webová část Zprávy | V závislosti na rozložení můžou mít obrázky ve webové části Příspěvky formát 4:3, 16:9 nebo 21:9. Tady je příklad obrázků v rozložení Hlavní příběh a Karusel: 
|
| Oblast názvu stránky | Obrázky vypadají nejlépe na šířku, mají poměr stran 16:9 nebo větší a mají velikost aspoň 1 MB. Nezapomeňte také nastavit ohnisko tak, abyste měli zobrazenou nejdůležitější část obrázku, zvlášť pokud se obrázek používá v miniaturách, rozvrženích zpráv a výsledcích hledání. Příklad (původní obrázek 16:9) s fokusem nastaveným na reproduktoru: 
|
| Miniatura stránky | Miniatury stránek se zobrazují na místech, jako jsou výsledky hledání, zvýrazněné výsledky obsahu, příspěvky a další. Ve výchozím nastavení pochází miniatura z oblasti názvu stránky nebo z webové části, která je na stránce v prvním pořadí (například vlevo nahoře v rozložení stránky). Výchozí nastavení můžete přepsat a miniaturu stránky změnit. V takovém případě je nejlepší použít obrázek s poměrem stran 16:9. Příklad (původní obrázek 16:9): 
|
| Webová část Rychlé odkazy | Webová část Rychlé odkazy má šest různých rozložení. Tady jsou přednastavené poměry stran:
|
Tip:
Když do oblasti názvu stránky nebo webové části Hlavní banner přidáte obrázek, je taky nejlepší nastavit ohnisko v oblasti obrázku, která se má pořád zobrazovat. Další informace o nastavení ústředního bodu pro tyto dva scénáře najdete v tématech Použití webové části Hlavní banner a Vytvoření a použití moderních stránek na sharepointovém webu.
Doporučení k obrázkům záhlaví webu
Kromě stránek můžete do rozšířeného rozložení přidat vlastní loga nebo obrázky. Tady jsou doporučení velikosti pro tyto prvky.
| Prvek | Popis | Doporučení Šířka × výška v pixelech |
|---|---|---|
| Logo webu | Větší logo, které může být nečtvercové a průhledné v závislosti na nahraném návrhu. | Rozměry 192 × 64 Formát: PNG, JPEG, SVG (na webech připojených ke skupině není povolený formát SVG) |
| Miniatura loga webu | Miniatura čtvercového loga, která se použije, když není nahráno žádné logo webu nebo v místech, kde je vyžadován čtvercový formát. Tento prvek je povinný. |
Rozměry 64 × 64 Formát: PNG, JPEG, SVG (na webech připojených ke skupině není povolený formát SVG) |
| Rozšířené rozložení loga webu | Rozšířené rozložení záhlaví má rozšířenou šířku loga webu. | Rozměry 300 × 64 Formát: JPEG, PNG, SVG |
| Obrázek pozadí Rozšířené rozložení | Nový obrázek pozadí, který je možné použít s rozšířeným záhlavím. | 2560 × 164 Formát: JPEG, PNG |