Mūsdienu lapas un tīmekļa daļas ir veidotas tā, lai pilnībā reaģētu visās ierīcēs, kas nozīmē, ka tīmekļa daļās izmantotie attēli atšķirsies atkarībā no to rādīšanas vietas, izmantotā izkārtojuma un ierīces, kurā tie tiek skatīti. Piemēram, modernas lapas ir veidotas tā, lai tās lieliski izskatītos mobilajās ierīcēs, un automātiskā attēlu mērogošana palīdz radīt pievilcīgu pieredzi.
Kādi attēlu izmēri ir piemērotāki?
Adaptīvā lapas noformējuma dēļ pikseļos nav noteikts augstums vai platums, kas nodrošinātu, ka attēls saglabās noteiktu formu visās ierīcēs un izkārtojumos. Attēlu lielums ir mainīts un apgriezti automātiski, lai rādītu labāko iespējamo rezultātu dažādās ierīcēs un izkārtojumos. Tomēr ir daži norādījumi, kas var palīdzēt jums nodrošināt, lai attēli lapās izskatītos lieliski.
Labāko lapas attēlu izmēru atrašana ir atkarīga no šiem faktoriem:
- Proporcijas: attēlu augstuma un platuma attiecība
- Sleju izkārtojums: kolonnu tips un skaits lapā
- Tīmekļa daļas izkārtojums: tīmekļa daļai, kurā tiek izmantots attēls, izvēlaties izkārtojumu
Proporcijas
Proporcijas ir relācija starp attēlu platumu un augstumu. Parasti to izsaka kā divus skaitļus, piemēram, 3:2, 4:3 vai 16:9. Platums vienmēr ir pirmais skaitlis. Piemēram, attiecība 16:9 var būt 1600 pikseļus plata un 900 pikseļu augsta. Vai arī tas var būt 1920x1080, 1280x720 vai jebkura cita platuma/augstuma kombinācija, ko var aprēķināt kā vienādu 16:9. Proporciju kalkulatorus varat atrast tiešsaistē un dažos fotoattēlu rediģēšanas rīkos, lai palīdzētu noteikt attēlu proporcijas.
Lielākajā daļā gadījumu attēli modernajās tīmekļa daļās vislabāk darbojas visos izkārtojumos un ierīcēs, ja to proporcijas atkarībā no izkārtojuma ir 16:9 vai 4:3.
Sleju izkārtojumi
Lapa var būt izkārtota ar sadaļām, kurās ir dažādi kolonnu tipi un izkārtojumi, piemēram, pilna platuma kolonnas, viena kolonna, divas kolonnas, trīs kolonnas, viena trešdaļa kolonnas pa kreisi un viena trešdaļa labās kolonnas. Attēls, kam jāaizpilda kolonnas platums, parasti ir tāds, ka tiem jābūt vismaz tikpat platiem kā kolonnai, kurā tie ir novietoti. Piemēram, attēla tīmekļa daļas vienā kolonnā platumam ir jābūt vismaz 1204 pikseļus platam.
Tālāk ir norādītas katra kolonnas izkārtojuma platuma vadlīnijas:
| Izkārtojums | Platums pikseļos |
|---|---|
| Pilna platuma kolonna | 1920 |
| Viena kolonna | 1204 |
| Divas kolonnas | 586 kolonnā |
| Three columns | 380 kolonnā |
| Viena trešdaļa kreisās kolonnas | 380 kreisajai kolonnai; 792 labajai kolonnai |
| Viena trešdaļa labā kolonna | 792 kreisajai kolonnai; 380 labajai kolonnai |
Tā kā lapas ir atsaucīgas, attēli pilna platuma kolonnās vienmēr tiks rādīti pilnā ekrāna platumā ar automātisku augstumu atkarībā no ekrāna lieluma.
Citos kolonnu izkārtojumos ievietoto attēlu augstums ir atkarīgs no jūsu proporcijām. Šeit sniegtas augstuma/platuma vadlīnijas 16:9 un 4:3 proporcijām (noapaļotas uz augšu/uz leju līdz tuvākajam pikselim). Tas ir noderīgi, lai saglabātu attēlu platumu un augstumu, kas piemērots mobilajām ierīcēm, piemēram:
| PROPORCIJAS IZKĀRTOJUMS |
16 x 9 Platums x augstums pikseļos |
4 x 3 Platums x augstums pikseļos |
|---|---|---|
| Viena kolonna | 1204 x 677 | 1204 x 903 |
| Divas kolonnas | 586 x 330 | 586 x 439 |
| Three columns | 380 x 214 | 380 x 285 |
| Viena trešdaļa kreisās kolonnas | 380 x 446 kreisajai kolonnai; 792 x 446 labajai kolonnai | 380 x 594 kreisajai kolonnai; 792 x 594 labajai kolonnai |
| Viena trešdaļa labā kolonna | 792 x 446 kreisajai kolonnai; 380x446 labajai kolonnai | 792 x 594 kreisajai kolonnai; 380x594 labajai kolonnai |
Tīmekļa daļu izkārtojumi
Izmantoto tīmekļa daļu izkārtojumi arī ietekmēs attēlu mērogu. Tālāk sniegtajos piemēros ir parādītas dažādas tīmekļa daļas un dažas opcijas un proporcijas, ko varat izmantot.
| Hero tīmekļa daļa | Tālāk norādītas elementu un slāņu izkārtojumu proporcijas.
|
| Iezīmētā satura tīmekļa daļa | 16:9 ir karuseļa, filmu un režģa izkārtojumu proporcijas. Lūk, 16:9 proporcijas piemērs. Pirmajā attēlā redzams izkārtojums Filmstrip, bet otrajā — režģa izkārtojums. 
|
| Attēla tīmekļa daļa | Attēli tiks izvērsti līdz tās sadaļas platumam, kurā atrodas tīmekļa daļa. Tālāk ir sniegts attēla piemērs attēla tīmekļa daļā, kurā izmantotas proporcijas 16:9. 
Varat arī mainīt proporcijas vai apgriezt ar brīvu roku, izmantojot attēlu rediģēšanas rīku, vai izmantot izmēru maiņas turus, lai palielinātu vai samazinātu attēlu. 
|
| Attēlu galerijas tīmekļa daļa | Dažādos izkārtojumos var izmantot šādas proporcijas:
|
| Jaunumu tīmekļa daļa | Atkarībā no izkārtojuma jaunumu tīmekļa daļā attēli var būt 4:3, 16:9 vai 21:9. Lūk, piemērs ar attēliem augšējā stāva un karuseļa izkārtojumā: 
|
| Lapas virsraksta apgabals | Attēli izskatās vislabāk, ja tie ir ainavas vai 16:9 vai lielāka proporcija un ja to lielums ir vismaz 1 MB. Noteikti iestatiet arī fokusa punktu, lai redzētu svarīgāko attēla daļu, īpaši, ja attēls tiek izmantots sīktēlos, ziņu izkārtojumos un meklēšanas rezultātos. Piemērs (oriģinālais attēls 16:9) ar skaļruņa fokusa punktu: 
|
| Lappuses sīktēls | Lappušu sīktēli tiek rādīti tādās vietās kā meklēšanas rezultāti, izceltā satura rezultāti, jaunumu ziņas un citur. Pēc noklusējuma sīktēls tiek iegūts no lapas virsraksta apgabala vai no tīmekļa daļas, kas ir lapas pirmajā secībā (piemēram, lapas izkārtojuma augšējā kreisajā secībā). Varat ignorēt noklusējumu un mainīt lappuses sīktēlu. Šajā gadījumā ieteicams izmantot attēlu ar proporcijām 16:9. Piemērs (oriģinālais attēls 16:9): 
|
| Ātro saišu tīmekļa daļa | Ātro saišu tīmekļa daļai ir seši dažādi izkārtojumi. Tālāk ir norādītas sākotnēji iestatītās proporcijas.
|
Padoms
Pievienojot attēlu lapas virsraksta apgabalam vai Hero tīmekļa daļai, ir ieteicams iestatīt fokusa punktu tajā attēla apgabalā, kuru vēlaties vienmēr rādīt. Papildinformāciju par fokusa punkta iestatīšanu šajos divos scenārijos skatiet rakstā Hero tīmekļa daļas izmantošana un Modernu lapu izveide un lietošana SharePoint vietnē.
Vietnes galvenes attēlu ieteikumi
Papildus lapām, iespējams, vēlēsities pievienot pielāgotus logotipus vai attēlus paplašinātā izkārtojumā. Šeit ir izmēru ieteikumi šiem elementiem.
| Elements | Apraksts | Ieteikums Platums x augstums pikseļos |
|---|---|---|
| Vietnes logotips | Lielāks logotips, kas var būt ne kvadrātveida un caurspīdīgs atkarībā no augšupielādētā noformējuma. | 192 x 64 Formāts: PNG, JPEG, SVG (SVG nav atļauts ar grupām savienotās vietnēs) |
| Vietnes logotipa sīktēls | Kvadrātveida logotipa sīktēls, kas tiek izmantots, ja vietnes logotips nav augšupielādēts vai vietās, kur nepieciešams kvadrātveida formāts. Šis elements ir obligāts. |
64 x 64 Formāts: PNG, JPEG, SVG (SVG nav atļauts ar grupām savienotās vietnēs) |
| Paplašināta izkārtojuma vietnes logotips | Paplašinātajam galvenes izkārtojumam ir paplašināts vietnes logotipa platums. | 300 x 64 Formāts: JPEG, PNG, SVG |
| Paplašinātā izkārtojuma fona attēls | Jauns fona attēls, ko var izmantot ar paplašināto galveni. | 2560 x 164 Formāts: JPEG, PNG |