Nowoczesne strony i składniki Web Part są zaprojektowane tak, aby w pełni reagowały na różnych urządzeniach, co oznacza, że obrazy używane w składnikach Web Part będą skalowane inaczej w zależności od tego, gdzie są wyświetlane, jaki układ jest używany i na jakim urządzeniu są wyświetlane. Na przykład nowoczesne strony są zaprojektowane tak, aby wyglądały doskonale na urządzeniach przenośnych, a automatyczne skalowanie obrazu pomaga w uzyskaniu atrakcyjnego środowiska.
Jakie rozmiary obrazów są najlepsze?
Ze względu na responsywny projekt strony nie ma określonej wysokości ani szerokości w pikselach, które zapewnią, że obraz zachowa określony kształt na różnych urządzeniach i układach. Rozmiar obrazów jest zmieniany i przycinany automatycznie, aby uzyskać jak najlepsze rezultaty na różnych urządzeniach i układach. Istnieją jednak pewne wskazówki, które mogą pomóc w upewnieniu się, że obrazy wyglądają świetnie na stronach.
Znalezienie najlepszych rozmiarów obrazów dla strony 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: wybrany układ składnika Web Part, w którym obraz jest używany
Współczynnik proporcji
Współczynnik proporcji to relacja między szerokością i wysokością obrazów. Zazwyczaj jest wyrażana 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 mieć szerokość 1600 pikseli na 900 pikseli wysokości. Może to być też 1920 x 1080, 1280 x 720 albo dowolna inna kombinacja szerokości i wysokości, którą można obliczyć jako równą 16:9. Kalkulatory współczynnika proporcji można znaleźć w Internecie i w niektórych narzędziach do edycji zdjęć, które ułatwiają określenie współczynnika 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, jeśli mają współczynnik proporcji 16:9 lub 4:3, w zależności od układu.
Układy kolumn
Układ strony może obejmować sekcje o różnych typach kolumn i układach, na przykład kolumny o pełnej szerokości, jedna kolumna, dwie kolumny, trzy kolumny, jedna trzecia lewej kolumny i jedna trzecia prawej. Ogólna reguła dotycząca obrazów, które powinny wypełniać szerokość kolumny, jest taka, że muszą one mieć co najmniej taką szerokość, jak kolumna, w której zostały umieszczone. Na przykład obraz w składniku Web Part obrazu w jednej kolumnie powinien mieć szerokość co najmniej 1204 pikseli.
Poniżej przedstawiono wytyczne dotyczące szerokości dla każdego z 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 będą zawsze wyświetlane na pełnej szerokości ekranu, a wysokość jest automatycznie określana na podstawie rozmiaru ekranu.
Wysokość obrazów umieszczonych w innych układach kolumn zależy od współczynnika proporcji. Poniżej podano wskazówki dotyczące wysokości i szerokości dla współczynników proporcji 16:9 i 4:3 (zaokrąglonych w górę/w dół do najbliższego piksela). Jest to pomocne w utrzymywaniu szerokości i wysokości obrazów skalujących się odpowiednio do urządzeń przenośnych, na przykład:
| WSPÓŁCZYNNIK PROPORCJI UKŁAD |
Wymiary: 16 x 9 Szerokość x wysokość w pikselach |
4 x 3 szt. 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 skalowanie obrazów. W poniższych przykładach pokazano różne składniki Web Part oraz niektóre opcje i współczynniki proporcji, których można użyć.
| Składnik Web Part elementu głównego | Dla układów Kafelki i Warstwy są dostępne następujące współczynniki proporcji:
|
| Składnik Web Part Wyróżniona zawartość | Współczynnik proporcji dla układów karuzeli, taśmy filmowej i siatki to 16:9. Oto przykład współczynnika proporcji 16:9. Pierwszy obraz przedstawia układ przezroczystości, a drugi — układ siatki: 
|
| Składnik Web Part obrazu | Obrazy zostaną powiększone do szerokości sekcji zawierającej składnik Web Part. Oto przykład obrazu w składniku Web Part obrazu, który używa współczynnika proporcji 16:9. 
Możesz również zmienić współczynnik proporcji lub przyciąć obraz ręcznie, korzystając z narzędzia do edycji obrazu, lub użyć uchwytów zmiany rozmiaru, aby powiększyć lub pomniejszyć obraz. 
|
| Składnik Web Part galerii obrazów | W różnych układach można stosować następujące współczynniki proporcji:
|
| Składnik Web Part wiadomości | W zależności od układu obrazy w składniku Web Part Wiadomości mogą mieć proporcje 4:3, 16:9 lub 21:9. Oto przykładowe obrazy w układzie Góra i w układzie karuzeli: 
|
| Obszar tytułu strony | Obrazy wyglądają najlepiej, gdy są poziome lub mają współczynnik proporcji 16:9 lub większy, a ich rozmiar wynosi co najmniej 1 MB. Należy również pamiętać o ustawieniu punktu centralnego tak, aby zachować widoczność najważniejszej części obrazu, zwłaszcza gdy obraz jest używany w miniaturach, układach wiadomości i wynikach wyszukiwania. Przykład (oryginalne zdjęcie 16:9) z ustawioną ostrością na głośniku: 
|
| Miniatura strony | Miniatury stron są wyświetlane w miejscach, takich jak wyniki wyszukiwania, wyniki wyróżnionej zawartości, wpisy z wiadomościami i inne. 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 z lewego górnego rogu układu strony). Możesz zastąpić ustawienie domyślne i zmienić miniaturę strony. W takim przypadku najlepiej 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
Podczas dodawania obrazu do obszaru tytułu strony lub składnika Web Part Element główny najlepiej jest również ustawić punkt fokusu w obszarze obrazu, który ma być zawsze wyświetlany. Aby dowiedzieć się więcej o ustawianiu 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łówków witryn
Oprócz stron możesz dodać niestandardowe logo lub obrazy w układzie rozszerzonym. Poniżej przedstawiono zalecenia dotyczące rozmiarów tych elementów.
| Element | Opis | Zalecenie Szerokość x wysokość w pikselach |
|---|---|---|
| Logo witryny | Większe logo, które może być niekwadratowe i przezroczyste w zależności od przesłanego projektu. | 192 x 64 Format: PNG, JPEG, SVG (format SVG nie jest dozwolony w witrynach połączonych grupą) |
| Miniatura logo witryny | Kwadratowa miniatura logo używana wówczas, gdy nie przekazano żadnego logo witryny lub w miejscach, w których jest wymagane użycie formatu kwadratowego. Ten element jest wymagany. |
64 x 64 Format: PNG, JPEG, SVG (format SVG nie jest dozwolony w witrynach połączonych grupą) |
| Logo witryny w układzie rozszerzonym | 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órego można używać z rozszerzonym nagłówkiem. | 2560 x 164 Format: JPEG, PNG |