Paginile și părțile web moderne sunt proiectate pentru a fi complet receptive pe toate dispozitivele, ceea ce înseamnă că imaginile utilizate în părțile web vor fi scalate diferit, în funcție de locul unde sunt afișate, de aspectul utilizat și de dispozitivul pe care sunt vizualizate. De exemplu, paginile moderne sunt proiectate să arate minunat pe dispozitivele mobile, iar scalarea automată a imaginilor contribuie la crearea acestei experiențe atractive.
Ce dimensiuni de imagine funcționează cel mai bine?
Datorită designului paginii receptive, nu există o anumită înălțime sau lățime în pixeli care să asigure că o imagine va păstra o formă specifică pe toate dispozitivele și aspectele. Imaginile sunt redimensionate și trunchiate automat pentru a afișa cel mai bun rezultat posibil pe o varietate de dispozitive și aspecte. Cu toate acestea, există câteva instrucțiuni care vă pot ajuta să vă asigurați că imaginile arată bine pe paginile dvs.
Găsirea celor mai bune dimensiuni de imagine pentru pagina dvs. depinde de acești factori:
- Raport aspect: relația dintre înălțimea și lățimea imaginilor
- Aspectul coloanelor: tipul și numărul de coloane de pe pagină
- Aspectul părții web: aspectul pe care îl alegeți pentru partea web în care este utilizată imaginea
Raport aspect
Un raport aspect reprezintă relația dintre lățimea și înălțimea imaginilor. De obicei, este exprimată ca două numere, cum ar fi 3:2, 4:3 sau 16:9. Lățimea este întotdeauna primul număr. De exemplu, un raport 16:9 poate avea 1600 pixeli lățime și 900 pixeli înălțime. Sau poate fi 1920 x 1080, 1280 x 720 sau orice alte combinații lățime/înălțime care pot fi calculate ca fiind egale cu 16:9. Puteți găsi calculatoare de raport de aspect online și în unele instrumente de editare foto pentru a determina rapoartele de aspect ale imaginilor.
În majoritatea cazurilor, imaginile din părțile web moderne funcționează cel mai bine pe toate aspectele și dispozitivele atunci când au un raport aspect de 16:9 sau 4:3, în funcție de aspect.
Aspecte de coloane
O pagină poate fi aranjată cu secțiuni care includ diferite tipuri de coloane și aspecte, cum ar fi coloane cu lățime întreagă, o coloană, două coloane, trei coloane, o treime din stânga și o treime din dreapta. O regulă generală pentru imaginile care se așteaptă să umple lățimea unei coloane este să fie cel puțin la fel de late ca și coloana în care sunt amplasate. De exemplu, o imagine dintr-o parte web imagine dintr-o singură coloană ar trebui să aibă o lățime de cel puțin 1204 pixeli.
Iată instrucțiunile privind lățimea pentru fiecare dintre aspectele de coloană:
| Aspect | Lățime în pixeli |
|---|---|
| Coloană cu lățime întreagă | 1920 |
| O coloană | 1204 |
| Două coloane | 586 pe coloană |
| Trei coloane | 380 pe coloană |
| O treime de coloană la stânga | 380 pentru coloana din stânga; 792 pentru coloana din dreapta |
| O treime de coloană la dreapta | 792 pentru coloana din stânga; 380 pentru coloana din dreapta |
Datorită naturii receptive a paginilor, imaginile din coloanele cu lățime întreagă se vor afișa întotdeauna la lățimea completă a ecranului, cu o înălțime automată bazată pe dimensiunea ecranului.
Înălțimea imaginilor amplasate în alte aspecte de coloană va depinde de raportul de aspect. Iată instrucțiunile pentru înălțime/lățime pentru rapoartele de aspect 16:9 și 4:3 (rotunjite în sus/jos la cel mai apropiat pixel). Acest lucru este util pentru a păstra imaginile la o lățime și o înălțime care se potrivesc cu dispozitivele mobile, de exemplu:
| RAPORT ASPECT ASPECT |
16 x 9 Lățime x înălțime în pixeli |
4 x 3 Lățime x înălțime în pixeli |
|---|---|---|
| O coloană | 1204 x 677 | 1204 x 903 |
| Două coloane | 586 x 330 | 586 x 439 |
| Trei coloane | 380 x 214 | 380 x 285 |
| O treime de coloană la stânga | 380 x 446 pentru coloana din stânga; 792 x 446 pentru coloana din dreapta | 380 x 594 pentru coloana din stânga; 792 x 594 pentru coloana din dreapta |
| O treime de coloană la dreapta | 792 x 446 pentru coloana din stânga; 380 x 446 pentru coloana din dreapta | 792 x 594 pentru coloana din stânga; 380 x 594 pentru coloana din dreapta |
Aspecte de părți web
Aspectele din părțile web pe care le utilizați vor afecta, de asemenea, scalarea imaginilor. Următoarele exemple arată diferite părți web și unele dintre opțiunile și rapoartele de aspect pe care le puteți utiliza.
| Partea web a Eroului | Următoarele rapoarte de aspect pentru aspectele cu dale și straturi sunt:
|
| Parte web conținut evidențiat | 16:9 este raportul de aspect pentru aspectele Carusel, Filmstrip și Grilă. Iată un exemplu de raport aspect 16:9. Prima imagine arată aspectul Tiră de filme și a doua arată aspectul Grilă: 
|
| Parte web imagine | Imaginile se vor extinde la lățimea secțiunii care conține partea web. Iată un exemplu de imagine din partea web Imagine care utilizează raportul aspect 16:9. 
De asemenea, aveți opțiunea de a modifica raportul aspectului sau de a trunchia cu mâna liberă utilizând instrumentul Editare imagine sau puteți utiliza ghidajele de redimensionare pentru a mări sau a micșora imaginea. 
|
| Partea web Galerie de imagini | Următoarele rapoarte de aspect pot fi utilizate în diverse aspecte:
|
| News web part | În funcție de aspect, imaginile din partea web Știri pot fi 4:3, 16:9 sau 21:9. Iată un exemplu de imagini dintr-un articol de top și un aspect Carusel: 
|
| Zona de titlu pagină | Imaginile arată cel mai bine atunci când au un raport de aspect de tip vedere sau de 16:9 sau mai mare și atunci când au o dimensiune de cel puțin 1 MB. De asemenea, aveți grijă să setați un punct focal pentru a păstra la vedere cea mai importantă parte a imaginii, mai ales atunci când imaginea este utilizată în imagini reduse, în aspecte de știri și în rezultate de căutare. Exemplu (imaginea originală 16:9) cu punctul focal setat pe difuzor: 
|
| Page thumbnail | Miniaturile paginilor sunt afișate în locuri precum rezultatele căutării, rezultatele conținutului evidențiat, postările de știri și altele. În mod implicit, miniatura provine din zona de titlu al paginii sau din partea web aflată în prima ordine pe pagină (cum ar fi partea din stânga sus a unui aspect de pagină). Puteți să înlocuiți valoarea implicită și să modificați miniatura paginii. Când faceți acest lucru, cel mai bine este să utilizați o imagine cu un raport de aspect de 16:9. Exemplu (imaginea originală 16:9): 
|
| Parte web linkuri rapide | Partea web Linkuri rapide are șase aspecte diferite. Iată rapoartele de aspect preconfigurate:
|
Sfat
Atunci când adăugați o imagine la o zonă de titlu de pagină sau la o parte web Erou, cel mai bine este să setați punctul focal în zona imaginii pe care doriți să o afișați întotdeauna. Pentru a afla mai multe despre setarea unui punct focal pentru aceste două scenarii, consultați Utilizarea părții web Erou și Crearea și utilizarea paginilor moderne pe un site SharePoint.
Recomandări de imagini pentru antetul de site
În plus față de pagini, poate veți dori să adăugați sigle sau imagini particularizate într-un aspect extins. Iată recomandările de dimensiune pentru aceste elemente.
| Element | Descriere | Recomandare Lățime x înălțime în pixeli |
|---|---|---|
| Sigla site-ului | Siglă mai mare, care poate fi non-pătrată și transparentă, în funcție de designul încărcat. | 192 x 64 Format: PNG, JPEG, SVG (SVG nu este permis pe site-urile conectate la grup) |
| Site logo thumbnail | O miniatură cu sigla pătrată care este utilizată dacă nu este încărcată nicio siglă de site sau în locuri în care este necesar un format pătrat. Acest element este obligatoriu. |
64 x 64 Format: PNG, JPEG, SVG (SVG nu este permis pe site-urile conectate la grup) |
| Sigla de site cu aspect extins | Aspectul de antet extins are o lățime extinsă a siglei de site. | 300 x 64 Format: JPEG, PNG, SVG |
| Imagine de fundal cu aspect extins | O nouă imagine de fundal care poate fi utilizată cu antetul extins. | 2560 x 164 Format: JPEG, PNG |