Šiuolaikiniai puslapiai ir puslapio dalys sukurti taip, kad visiškai reaguotų visuose įrenginiuose, o tai reiškia, kad puslapio dalyse naudojamų vaizdų mastelis skirsis, atsižvelgiant į tai, kur jie rodomi, koks maketas naudojamas ir koks įrenginys peržiūrimas. Pavyzdžiui, šiuolaikiniai puslapiai sukurti taip, kad puikiai atrodytų mobiliuosiuose įrenginiuose, o automatinis vaizdo mastelio keitimas padeda sukurti patrauklią patirtį.
Kokie vaizdų dydžiai geriausiai tinka?
Dėl interaktyvaus puslapio dizaino nėra konkretaus aukščio ar pločio pikseliais, kurie užtikrintų, kad vaizdas išlaikys konkrečią formą įvairiuose įrenginiuose ir maketuose. Vaizdų dydis keičiamas ir apkarpomas automatiškai, kad būtų rodomi geriausi įmanomi rezultatai įvairiuose įrenginiuose ir maketuose. Tačiau yra keletas gairių, kurios gali padėti užtikrinti, kad vaizdai jūsų puslapiuose atrodytų puikiai.
Tai, kas geriausiai tinka jūsų puslapiui, priklauso nuo šių veiksnių:
- Vaizdo formatas: atvaizdų aukščio ir pločio santykis
- Stulpelių maketas: stulpelių tipas ir skaičius puslapyje
- Puslapio dalies maketas: pasirinktas puslapio dalies, kurioje naudojamas vaizdas, maketas
Vaizdo formatas
Proporcijos – tai paveikslėlių pločio ir aukščio santykis. Paprastai jis išreiškiamas dviem skaičiais, pvz., 3:2, 4:3 arba 16:9. Plotis visada yra pirmasis skaičius. Pavyzdžiui, santykis 16:9 galėtų būti 1600 pikselių pločio ir 900 pikselių aukščio. Arba tai gali būti 1920 x 1080, 1280 x 720 ar kiti pločio ir aukščio deriniai, kuriuos galima apskaičiuoti kaip lygius 16:9. Internete ir kai kuriuose nuotraukų redagavimo įrankiuose galite rasti vaizdo formato skaičiuotuvus, kurie padės nustatyti vaizdų proporcijas.
Daugeliu atvejų šiuolaikinėse puslapio dalyse esantys vaizdai geriausiai veikia įvairiuose maketuose ir įrenginiuose, kai jų vaizdo formatas yra 16:9 arba 4:3, atsižvelgiant į maketą.
Stulpelių maketai
Puslapyje gali būti išdėstytos sekcijos, kuriose yra skirtingų tipų stulpelių ir išdėstymų, pvz., viso pločio stulpeliai, vienas stulpelis, du stulpeliai, trys stulpeliai, trečdalis kairiojo ir trečdalio dešiniojo stulpelio. Bendra taisyklė, kad vaizdai, kurie turėtų užpildyti stulpelio plotį, yra bent tokio pat pločio, kaip stulpelis, į kurį jie įdėti. Pvz., vaizdų puslapio dalies vaizdas viename stulpelyje turi būti bent 1204 pikselių pločio.
Toliau pateikiamos kiekvieno stulpelio maketo pločio gairės:
| Maketas | Plotis pikseliais |
|---|---|
| Viso pločio stulpelis | 1920 |
| Vieną stulpelį | 1204 |
| Du stulpeliai | 586 stulpelyje |
| Trys stulpeliai | 380 stulpelyje |
| Trečdalis kairiojo stulpelio | 380 kairiajam stulpeliui; 792 – dešinysis stulpelis |
| Trečdalis dešiniojo stulpelio | 792 – kairysis stulpelis; 380 – dešinysis stulpelis |
Dėl interaktyvaus puslapių pobūdžio viso pločio stulpeliuose esantys vaizdai visada bus rodomi visame ekrano plotyje, o aukštis bus automatiškai nustatomas atsižvelgiant į ekrano dydį.
Vaizdų, esančių kituose stulpelių maketuose, aukštis priklausys nuo jūsų vaizdo formato. Toliau pateiktos 16:9 ir 4:3 vaizdo formato aukščio ir pločio rekomendacijos (suapvalintos iki artimiausio pikselio). Tai naudinga norint išlaikyti vaizdų plotį ir aukštį, kuris derėtų mobiliesiems įrenginiams, pvz.:
| VAIZDO FORMATAS IŠDĖSTYMAS |
16 x 9 Plotis x aukštis pikseliais |
4 x 3 Plotis x aukštis pikseliais |
|---|---|---|
| Vieną stulpelį | 1204 x 677 | 1204 x 903 |
| Du stulpeliai | 586 x 330 | 586 x 439 |
| Trys stulpeliai | 380 x 214 | 380 x 285 |
| Trečdalis kairiojo stulpelio | 380 x 446 kairiajam stulpeliui; 792 x 446 dešiniajam stulpeliui | 380 x 594 kairiajam stulpeliui; 792 x 594 dešiniajam stulpeliui |
| Trečdalis dešiniojo stulpelio | 792 x 446 kairiajam stulpeliui; 380 x 446 dešiniajam stulpeliui | 792 x 594 kairiajam stulpeliui; 380 x 594 dešiniajam stulpeliui |
Puslapio dalių maketai
Naudojamų puslapio dalių maketai taip pat paveiks vaizdų mastelį. Šiuose pavyzdžiuose parodytos skirtingos puslapio dalys ir kai kurios parinktys bei vaizdo formatai, kuriuos galima naudoti.
| "Hero" puslapio dalis | Toliau nurodyti plytelių ir sluoksnių maketų vaizdo formatai:
|
| Highlighted content web part | 16:9 yra karuselės, filmavimo juostos ir tinklelio maketų vaizdo formatas. Štai 16:9 vaizdo formato pavyzdys. Pirmame vaizde rodomas maketas Filmstrip, o antrame – tinklelio maketas: 
|
| Vaizdų puslapio dalis | Vaizdai bus išplėsti iki sekcijos, kurioje yra puslapio dalis, pločio. Toliau pateikiamas vaizdų puslapio dalyje esančio vaizdo, kuriame naudojamas 16:9 vaizdo formatas, pavyzdys. 
Taip pat turite galimybę keisti vaizdo formatą arba laisvai apkarpyti ranka naudodami vaizdo redagavimo įrankį arba naudoti dydžio keitimo rankenėles, kad padidintumėte arba sumažintumėte vaizdą. 
|
| Vaizdų galerijos puslapio dalis | Šie vaizdo formatai gali būti naudojami įvairiuose maketuose:
|
| Naujienų puslapio dalis | Atsižvelgiant į maketą, vaizdai naujienų puslapio dalyje gali būti 4:3, 16:9 arba 21:9. Štai vaizdų viršutiniame aukšte ir karuselės makete pavyzdys: 
|
| Puslapio pavadinimo sritis | Vaizdai geriausiai atrodo, kai jie yra gulsčios arba 16:9 arba didesnio vaizdo formato ir kai jie yra bent 1 MB dydžio. Taip pat būtinai nustatykite akcentavimo tašką, kad matytumėte svarbiausią paveikslėlio dalį, ypač kai paveikslėlis naudojamas miniatiūrose, naujienų maketuose ir ieškos rezultatuose. Pavyzdys (originalus paveikslėlis 16:9) su garsiakalbyje nustatytu židinio tašku: 
|
| Puslapio miniatiūra | Puslapių miniatiūros rodomos tokiose vietose, kaip ieškos rezultatai, pažymėto turinio rezultatai, naujienų įrašai ir kt. Pagal numatytuosius nustatymus miniatiūros gaunamos iš puslapio pavadinimo srities arba iš puslapio dalies, kuri yra pirma tvarka puslapyje (pvz., puslapio maketo viršuje kairėje). Galite perrašyti numatytuosius parametrus ir keisti puslapio miniatiūrą. Kai tai darysite, geriausia naudoti vaizdą, kurio vaizdo formatas yra 16:9. Pavyzdys (originalus vaizdas 16:9): 
|
| Sparčiųjų saitų puslapio dalis | Sparčiųjų saitų puslapio dalis turi šešis skirtingus maketus. Čia yra iš anksto nustatyti vaizdo formatai:
|
Patarimas
Kai įtraukiate vaizdą į puslapio pavadinimo sritį arba "Hero" puslapio dalį, taip pat geriausia židinio tašką nustatyti toje vaizdo srityje, kurią norite visada rodyti. Norėdami sužinoti daugiau apie šių dviejų scenarijų pagrindinio taško nustatymą, žr. " Hero" puslapio dalies naudojimas ir Modernių puslapių kūrimas ir naudojimas "SharePoint" svetainėje.
Svetainės antraštės vaizdo rekomendacijos
Be puslapių, galbūt norėsite pridėti pasirinktinius logotipus ar vaizdus išplėstiniame makete. Čia yra rekomendacijos dėl šių elementų dydžio.
| Elementas | Aprašas | Rekomendacija Plotis x aukštis pikseliais |
|---|---|---|
| Svetainės logotipas | Didesnis logotipas, kuris gali būti ne kvadratinis ir skaidrus, priklausomai nuo įkelto dizaino. | 192 x 64 Formatas: PNG, JPEG, SVG (SVG neleidžiamas su grupe susijusiose svetainėse) |
| Svetainės logotipo miniatiūra | Kvadratinė logotipo miniatiūra, naudojama, jei svetainės logotipas neįkeliamas arba tose vietose, kur būtinas kvadrato formatas. Šis elementas yra būtinas. |
64 x 64 Formatas: PNG, JPEG, SVG (SVG neleidžiamas su grupe susijusiose svetainėse) |
| Išplėstinis maketas svetainės logotipas | Išplėstinis antraštės maketas turi išplėstą svetainės logotipo plotį. | 300 x 64 Formatas: JPEG, PNG, SVG |
| Išplėstinio maketo fono paveikslėlis | Naujas fono vaizdas, kurį galima naudoti su išplėstine antrašte. | 2560 x 164 Formatas: JPEG, PNG |