Dimensionarea și scalarea imaginilor în paginile moderne SharePoint
Applies ToSharePoint în Microsoft 365

Paginile și părțile web moderne sunt proiectate pentru a răspunde complet pe toate dispozitivele, ceea ce înseamnă că imaginile utilizate în părțile web se vor scala diferit, în funcție de locul în care sunt afișate, de aspectul utilizat și de dispozitivul pe care sunt vizualizate. De exemplu, paginile moderne sunt proiectate să arate excelent pe dispozitivele mobile, iar scalarea automată a imaginilor vă ajută să creați acea experiență atractivă.

Exemple de pagini de pe toate dispozitivele

Ce dimensiuni de imagine funcționează cel mai bine?

Din cauza proiectării de pagină receptive, nu există o anumită înălțime sau lățime în pixeli care să asigure că o imagine va menține 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. Totuși, există câteva instrucțiuni care vă pot ajuta să vă asigurați că imaginile arată minunat 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 coloanei: tipul și numărul de coloane de pe pagină

  • Aspect parte Web: aspectul ales pentru partea Web în care este utilizată imaginea

Raport aspect

Un raport de aspect este relația dintre lățimea și înălțimea imaginilor. Se exprimă de obicei ca două numere, cum ar fi 3:2, 4:3 sau 16:9. Lățimea este întotdeauna primul număr. De exemplu, un raport de 16:9 poate fi de 1600 pixeli lățime și 900 pixeli înălțime. Sau poate fi 1920 x 1080, 1280 x 720 sau orice alte combinații de lățime/înălțime care pot fi calculate pentru a fi egale cu 16:9. Puteți găsi calculatoare de rapoarte de aspect online și în unele instrumente de editare foto pentru a vă ajuta să determinați raportul de aspect al imaginilor. 

Exemple de rapoarte de aspect 16:9 și 4:3.

În majoritatea cazurilor, imaginile din părțile web moderne funcționează cel mai bine între aspecte și dispozitive atunci când au un raport de aspect de 16:9 sau 4:3, în funcție de aspect.

Aspecte coloană

O pagină poate fi prevăzută 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 la stânga și o treime coloane la dreapta. O regulă generală pentru imaginile care se așteaptă să umple lățimea unei coloane este că acestea să fie cel puțin la fel de late ca și coloana în care sunt plasate. De exemplu, o imagine dintr-o parte web imagine dintr-o coloană trebuie să aibă o lățime de cel puțin 1204 pixeli.

Iată instrucțiunile privind lățimea pentru fiecare aspect de coloană:

Aspect

Lățime în pixeli

Coloană la lățime întreagă

1920

O coloană

1204

Două coloane

586 pe coloană

Trei coloane

380 pe coloană

A treia coloană din stânga

380 pentru coloana din stânga; 792 pentru coloana din dreapta

O treime din coloana din 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ă, pe baza dimensiunii ecranului.

Înălțimea imaginilor amplasate în alte aspecte de coloană va depinde de raportul de aspect. Iată instrucțiunile privind înălțimea/lățimea pentru rapoartele de aspect de 16:9 și 4:3 (rotunjite în sus/în jos până la cel mai apropiat pixel). Acest lucru este util pentru a vă păstra imaginile la o lățime și o înălțime care se scalează corespunzător pentru 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

A treia coloană din 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 din coloana din 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 părți Web

Aspectele din părțile web pe care le utilizați vor afecta, de asemenea, modul în care se scalează imaginile. Următoarele exemple arată părți web diferite și unele dintre opțiunile și rapoartele de aspect pe care le puteți utiliza.

Partea web Erou

Următoarele rapoarte de aspect pentru aspectele Dale și Straturi sunt:

  • Dale: înălțimea părții web este scalată pentru a urma un raport de aspect de 8:3, iar imaginile din interiorul părții web se scalează la un raport de aspect de 4:3.

  • Straturi: Un strat individual se scalează la un raport de aspect de 8:3, iar imaginile din fiecare strat se scalează la un raport de aspect apropiat de 16:9.

  • Pe dispozitivele mobile, un aspect Carusel este utilizat la ora 16:9.

Iată un exemplu de imagine afișată în aspectul Straturi (sus) și în aspectul Dale (jos):

Example of Hero web part images in Layers and Ti layouts

Parte Web conținut evidențiat

16:9 este raportul de aspect pentru aspectele Carusel, Filmstrip și Grid.

Iată un exemplu de raport aspect de 16:9. Prima imagine arată aspectul Filmstrip, iar a doua arată aspectul Grilă:

The Highlighted content web part using the Filmstrip layout.

Aspectul Grilă conținut evidențiat cu fotografii extinse afișate.

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 de 16:9.

O imagine din partea web Imagine utilizând raportul Carusel 16:9.

De asemenea, aveți opțiunea de a modifica raportul aspect sau trunchierea cu mâna liberă utilizând instrumentul de editare Imagine sau de a utiliza ghidajele de redimensionare pentru a mări sau a micșora imaginea.

O fotografie deschisă în instrumentul de editare SharePoint.

Parte Web Galerie de imagini

Următoarele rapoarte de aspect pot fi utilizate în aspecte diferite:

  • Aspectele Cărămidă și Carusel respectă raportul de aspect al tuturor imaginilor: 16:9, 1:1, 4:3 și așa mai departe. 

  • Aspectul Grilă permite trei rapoarte de aspect: 1:1 pătrat, 16:9 lățime și 4:3 standard.

Prima imagine afișează aspectul Cărămidă din parteaweb Galerie de imagini (păstrând rapoartele de aspect 16:9 și 1:1). A doua imagine afișează aspectul Grilă (utilizând raportul de aspect 1:1).

Partea web Galerie de imagini utilizând opțiunea aspect cărămidă.

Partea web Galerie de imagini utilizând opțiunea aspect grilă.

Parte web Știri

Î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-o poveste de top și un aspect Carusel:

Exemple de imagini cu aspecte de știri

Zona de titlu a paginii

Imaginile arată cel mai bine atunci când sunt vedere sau 16:9 sau mai mare în raport aspect și când au o dimensiune de cel puțin 1 MB. De asemenea, asigurați-vă că setați un punct focal pentru a păstra cea mai importantă parte a imaginii în vizualizare, mai ales atunci când imaginea este utilizată în miniaturi, aspecte de știri și rezultate de căutare.

Exemplu (imagine originală 16:9) cu punct focal setat pe difuzor:

Exemplu de imagine 16:9 în zona de titlu a paginii.

Imagine redusă pagină

Miniaturile paginilor sunt afișate în locuri precum rezultatele căutării, rezultatele de conținut evidențiate, postările de știri și altele. În mod implicit, miniatura provine din zona de titlu a paginii sau din partea web care se află în prima ordine de 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. Atunci când faceți acest lucru, se recomandă să utilizați o imagine cu un raport aspect de 16:9.

Exemplu (imagine originală 16:9):

Example of page thumbnail image in Highlighted content web part

Quick links web part

Partea web Linkuri rapide are șase aspecte diferite. Iată rapoartele de aspect prestabilite:

  • Compact, Listă, Dale: 1:1, 4:3

  • Rolă, grilă, buton: 16:9

Prima imagine afișează aspectul Compact din parteaweb Linkuri rapide. A doua imagine arată aceeași parte web Linkuri rapide utilizând aspectul Filmstrip.

Partea web Linkuri rapide afișând imagini în miniatură pentru linkuri.

Partea web Linkuri rapide afișând raportul de 16:9 pentru imagini.

Sfaturi: 

Recomandări pentru imaginile de antet de site

În plus față de pagini, se recomandă să adăugați sigle particularizate sau imagini î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 proiectul încărcat.

192 x 64 

Format: PNG, JPEG, SVG (SVG nu este permis pe site-urile conectate la grup)

Imagine redusă siglă site

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 site-ului aspect extins

Aspectul de antet extins are o lățime extinsă a siglei site-ului.

300 x 64

Format: JPEG, PNG, SVG

Extended Layout background image

O nouă imagine de fundal care poate fi utilizată cu antetul extins.

2560 x 164

Format: JPEG, PNG

Aveți nevoie de ajutor suplimentar?

Doriți mai multe opțiuni?

Explorați avantajele abonamentului, navigați prin cursurile de instruire, aflați cum să vă securizați dispozitivul și multe altele.

Comunitățile vă ajută să adresați întrebări și să răspundeți la întrebări, să oferiți feedback și să primiți feedback de la experți cu cunoștințe bogate.