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ć.
|
Następujące współczynniki proporcji dla układów Kafelki i Warstwy są następujące:
Oto przykład obrazu przedstawionego w układzie Warstwy (u góry) i w układzie Kafelki (u dołu):
|
|
|
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:
|
|
|
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.
|
|
|
W różnych układach można używać następujących współczynników proporcji:
Pierwszy obraz przedstawia układ Cegła w składnikuWeb Part Galeria obrazów (z zachowaniem współczynników proporcji 16:9 i 1:1). Drugi obraz przedstawia układ Siatka (przy współczynniku proporcji 1:1).
|
|
|
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:
|
|
|
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:
|
|
|
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 ma sześć różnych układów. Oto wstępnie ustawione współczynniki proporcji:
Na pierwszym obrazie przedstawiono układ Kompaktowy w składnikuWeb Part Szybkie linki. Drugi obraz przedstawia ten sam składnik Web Part Szybkie linki przy użyciu układu Filmstrip.
|
Porady:
-
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 |
