Nowoczesne strony i składniki Web Part są zaprojektowane tak, aby były w pełni responsywne na różnych urządzeniach, co oznacza, że obrazy używane w składnikach Web Part będą skalowane w różny sposób w zależności od tego, gdzie są wyświetlane, który układ jest używany i na którym urządzeniu są wyświetlane. Na przykład nowoczesne strony są zaprojektowane tak, aby wyglądały świetnie na urządzeniach przenośnych, a automatyczne skalowanie obrazów ułatwia tworzenie atrakcyjnego środowiska.
Jakie rozmiary obrazów działają najlepiej?
Ze względu na responsywny projekt strony nie ma konkretnej wysokości ani szerokości w pikselach, co zapewni zachowanie określonego kształtu na różnych urządzeniach i w układach. Obrazy są automatycznie przycinane i zmieniane w celu pokazania najlepszego możliwego wyniku na różnych urządzeniach i układach. Istnieją jednak pewne wskazówki, które mogą ułatwić upewnienie się, że obrazy wyglądają świetnie na stronach.
Znalezienie najlepszych rozmiarów obrazów na stronie zależy od następujących czynników:
- Współczynnik proporcji: relacja między wysokością a szerokością obrazów
- Układ kolumn: typ i liczba kolumn na stronie
- Układ składnika Web Part: układ wybranego dla składnika Web Part, w którym jest używany obraz
Współczynnik proporcji
Współczynnik proporcji to relacja między szerokością a wysokością obrazów. Zazwyczaj jest wyrażona jako dwie liczby, na przykład 3:2, 4:3 lub 16:9. Szerokość jest zawsze pierwszą liczbą. Na przykład stosunek 16:9 może wynosić 1600 pikseli szerokości na 900 pikseli wysokości. Może to być 1920 x 1080, 1280 x 720 lub dowolne inne kombinacje szerokości/wysokości, które można obliczyć na wartość 16:9. Kalkulatory współczynnika proporcji są dostępne w trybie online oraz w niektórych narzędziach do edycji zdjęć, które ułatwiają określanie współczynników proporcji obrazów.
W większości przypadków obrazy w nowoczesnych składnikach Web Part działają najlepiej na różnych układach i urządzeniach, gdy mają współczynnik proporcji 16:9 lub 4:3, w zależności od układu.
Układy kolumn
Stronę można rozłożyć na sekcje zawierające różne typy kolumn i układy, takie jak kolumny o pełnej szerokości, jedna kolumna, dwie kolumny, trzy kolumny, jedna trzecia kolumna z lewej i jedna trzecia kolumn z prawej. Ogólną regułą dla obrazów, które mają wypełnić szerokość kolumny, jest to, że mają one co najmniej taką szerokość jak kolumna, w której są umieszczone. Na przykład obraz w składniku Web Part obrazu w jednej kolumnie powinien mieć szerokość co najmniej 1204 pikseli.
Poniżej przedstawiono wskazówki dotyczące szerokości poszczególnych układów kolumn:
| Układ | Szerokość w pikselach |
|---|---|
| Kolumna o pełnej szerokości | 1920 |
| Jedna kolumna | 1204 |
| Dwie kolumny | 586 na kolumnę |
| Trzy kolumny | 380 na kolumnę |
| Jedna trzecia lewej kolumny | 380 dla lewej kolumny; 792 dla prawej kolumny |
| Jedna trzecia prawej kolumny | 792 dla lewej kolumny; 380 dla prawej kolumny |
Ze względu na responsywny charakter stron obrazy w kolumnach o pełnej szerokości zawsze będą wyświetlane na pełnej szerokości ekranu z automatyczną wysokością zależną od rozmiaru ekranu.
Wysokość obrazów umieszczonych w innych układach kolumn zależy od współczynnika proporcji. Poniżej przedstawiono wskazówki dotyczące wysokości/szerokości współczynników proporcji 16:9 i 4:3 (zaokrąglone w górę/w dół do najbliższego piksela). Jest to pomocne, aby zachować szerokość i wysokość obrazów, które są odpowiednio skalowane dla urządzeń przenośnych, na przykład:
| PROPORCJI UKŁAD |
16 x 9 Szerokość x Wysokość w pikselach |
4 x 3 Szerokość x Wysokość w pikselach |
|---|---|---|
| Jedna kolumna | 1204 x 677 | 1204 x 903 |
| Dwie kolumny | 586 x 330 | 586 x 439 |
| Trzy kolumny | 380 x 214 | 380 x 285 |
| Jedna trzecia lewej kolumny | 380 x 446 dla lewej kolumny; 792 x 446 dla prawej kolumny | 380 x 594 dla lewej kolumny; 792 x 594 dla prawej kolumny |
| Jedna trzecia prawej kolumny | 792 x 446 dla lewej kolumny; 380 x 446 dla prawej kolumny | 792 x 594 dla lewej kolumny; 380 x 594 dla prawej kolumny |
Układy składników Web Part
Układy używanych składników Web Part mają również wpływ na skalę obrazów. W poniższych przykładach przedstawiono różne składniki Web Part oraz niektóre opcje i współczynniki proporcji, których można użyć.
| Główny składnik Web Part | Następujące współczynniki proporcji dla układów Kafelki i Warstwy są następujące:
|
| Składnik Web Part wyróżnionej zawartości | 16:9 to współczynnik proporcji dla układów Karuzela, Opaska i Siatka. Oto przykład współczynnika proporcji 16:9. Na pierwszym obrazie przedstawiono układ Filmstrip, a drugi układ Siatka: 
|
| Składnik Web Part obrazu | Obrazy zostaną rozszerzone do szerokości sekcji zawierającej składnik Web Part. Oto przykład obrazu w składniku Web Part obrazu, który ma współczynnik proporcji 16:9. 
Możesz również zmienić współczynnik proporcji lub dowolne przycięcie przy użyciu narzędzia do edycji obrazów lub użyć uchwytów zmiany rozmiaru, aby powiększyć lub pomniejszyć obraz. 
|
| Składnik Web Part Galeria obrazów | W różnych układach można używać następujących współczynników proporcji:
|
| Składnik Web Part wiadomości | W zależności od układu obrazy w składniku Web Part Wiadomości mogą mieć wartość 4:3, 16:9 lub 21:9. Oto przykład obrazów w sekcji Najważniejsze i układ karuzeli: 
|
| Obszar tytułu strony | Obrazy wyglądają najlepiej, gdy mają orientację poziomą lub współczynnik proporcji 16:9 lub większą oraz mają rozmiar co najmniej 1 MB. Ponadto należy ustawić punkt ogniskowy, aby zachować najważniejszą część obrazu w widoku, zwłaszcza gdy obraz jest używany w miniaturach, układach wiadomości i wynikach wyszukiwania. Przykład (oryginalny obraz 16:9) z ustawionym punktem ogniskowym głośnika: 
|
| Miniatura strony | Miniatury stron są wyświetlane w miejscach takich jak wyniki wyszukiwania, wyróżnione wyniki zawartości, wpisy z wiadomościami i nie tylko. Domyślnie miniatura pochodzi z obszaru tytułu strony lub ze składnika Web Part znajdującego się w pierwszej kolejności na stronie (na przykład w lewym górnym rogu układu strony). Możesz zastąpić ustawienie domyślne i zmienić miniaturę strony. W takim przypadku najlepiej jest użyć obrazu o współczynniku proporcji 16:9. Przykład (oryginalny obraz 16:9): 
|
| Składnik Web Part Szybkie linki | Składnik Web Part Szybkie linki ma sześć różnych układów. Oto wstępnie ustawione współczynniki proporcji:
|
Porada
Po dodaniu obrazu do obszaru tytułu strony lub składnika Web Part Element główny najlepiej jest również ustawić punkt ogniskowy w obszarze obrazu, który ma być zawsze wyświetlany. Aby dowiedzieć się więcej na temat ustawiania punktu centralnego dla tych dwóch scenariuszy, zobacz Używanie składnika Web Part Element główny oraz Tworzenie i używanie nowoczesnych stron w witrynie programu SharePoint.
Zalecenia dotyczące obrazów nagłówka witryny
Oprócz stron warto dodać niestandardowe logo lub obrazy w układzie rozszerzonym. Poniżej przedstawiono zalecenia dotyczące rozmiaru tych elementów.
| Element | Opis | Zalecenie Szerokość x Wysokość w pikselach |
|---|---|---|
| Logo witryny | Większe logo, które może być nie kwadratowe i przezroczyste w zależności od przekazanego projektu. | 192 x 64 Format: PNG, JPEG, SVG (SVG nie jest dozwolone w witrynach połączonych z grupą) |
| Miniatura logo witryny | Miniatura kwadratowego logo używana w przypadku braku przekazywanego logo witryny lub w miejscach, w których wymagany jest format kwadratowy. Ten element jest wymagany. |
64 x 64 Format: PNG, JPEG, SVG (SVG nie jest dozwolone w witrynach połączonych z grupą) |
| Logo witryny układu rozszerzonego | Rozszerzony układ nagłówka ma rozszerzoną szerokość logo witryny. | 300 x 64 Format: JPEG, PNG, SVG |
| Obraz tła układu rozszerzonego | Nowy obraz tła, który może być używany z rozszerzonym nagłówkiem. | 2560 x 164 Format: JPEG, PNG |