Modernūs puslapiai ir puslapio dalys yra skirtos visiškai prisitaikyti visuose įrenginiuose, o tai reiškia, kad vaizdų, naudojamų žiniatinklio dalyse, mastelis bus kitoks, atsižvelgiant į tai, kur jie rodomi, kuris maketas naudojamas ir įrenginys, kuriame jis peržiūrimas. Pvz., modernūs puslapiai yra sukurti taip, kad puikiai atrodytų mobiliuosiuose įrenginiuose, o Automatinis vaizdų mastelio keitimas padeda sukurti patrauklią patirtį.
Kokio dydžio vaizdas veikia geriausiai?
Dėl adaptyvų puslapio dizaino nėra konkretaus aukščio arba pločio pikseliais, kurie užtikrins, kad vaizdas išlaikys konkrečią formą visuose įrenginiuose ir maketuose. Vaizdų dydis ir apkarpomi automatiškai, kad būtų rodomas geriausias galimas įvairių įrenginių ir maketų rezultatas. Tačiau yra kelios gairės, kurios gali padėti užtikrinti, kad jūsų puslapiuose puikiai atrodytų jūsų vaizdai.
Geriausių puslapio vaizdo dydžių radimas priklauso nuo šių faktorių:
-
Kraštinių santykis: vaizdų aukščio ir pločio ryšys
-
Stulpelių maketas: puslapio stulpelių tipas ir skaičius
-
Puslapio dalių maketas: maketo, kurį pasirenkate žiniatinklio dalyje, kurioje naudojamas vaizdas, maketas
Kraštinių santykis
Kraštinių santykis yra santykis tarp vaizdų pločio ir aukščio. Paprastai jis išreiškiamas dviem skaičiais, pvz., 3:2, 4:3 arba 16:9. Plotis visada yra pirmasis skaičius. Pvz., 16:9 gali būti 1600 pikselių pločio 900 pikseliais aukščio. Arba tai gali būti 1920 x 1080, 1280 x 720 arba kitų pločio/aukščio derinių, kuriuos galima apskaičiuoti pagal lygią 16:9. Galite rasti vaizdo formato skaičiuoklių internete ir kai kuriuos nuotraukų redagavimo įrankius, kad būtų lengviau nustatyti vaizdų proporcijas.
Daugeliu atvejų vaizdų šiuolaikinės puslapio dalys geriausiai veikia tarp maketų ir įrenginių, kai jų kraštinių santykis yra 16:9 arba 4:3, atsižvelgiant į maketą.
Stulpelių maketai
Puslapis gali būti išdėstytas sekcijose, kuriose yra skirtingi stulpelių tipai ir maketai, pvz., visos pločio stulpeliai, vienas stulpelis, du stulpeliai, trys stulpeliai, vienas trečdalis kairės ir trečdalis dešiniojo stulpelių. Paprastai vaizdų, kurie turėtų būti įrašyti stulpelio plotyje, taisyklė yra ta, kad jos yra bent tokios plačios kaip stulpelis, į kurį jos yra dedamos. Pvz., vaizdas vaizdo puslapio dalyje viename stulpelyje turi būti bent 1204 pikselių pločio. Toliau pateiktos kiekvienos stulpelių maketų pločio gairės:
|
Maketas |
Plotis pikseliais |
|
Visos pločio stulpelis |
1920 |
|
Vienas stulpelis |
1204 |
|
Du stulpeliai |
586 per stulpelį |
|
Trys stulpeliai |
380 per stulpelį |
|
Trečdalis kairiojo stulpelio |
380, skirta kairiam stulpeliui; "792", skirta dešiniam stulpeliui |
|
Trečdalis dešiniojo stulpelio |
792, skirta kairiam stulpeliui; "380", skirta dešiniam stulpeliui |
Atsižvelgiant į tai, kad yra reaguojanti puslapių prigimtis, vaizdų, esančių visame pločio stulpeliuose, rodymas visame ekrane visą plotį bus rodomas automatiškai, atsižvelgiant į ekrano dydį.
Vaizdų, esančių kituose stulpelių maketuose, Aukštis priklausys nuo jūsų vaizdo proporcijos. Čia yra "16:9" ir "4:3" kraštinių santykis (suapvalinama aukštyn/žemyn iki artimiausio pikselio). Tai patogu, jei norite, pvz., išsaugoti vaizdus pločio ir aukščio, kad svarstyklės yra tinkamos mobiliesiems įrenginiams.
|
KRAŠTINIŲ SANTYKIS MAKETAS |
16 x 9 Plotis x aukštis pikseliais |
4 x 3 Plotis x aukštis pikseliais |
|---|---|---|
|
Vienas stulpelis |
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, skirtas kairiam stulpeliui; 792 x 446, skirtas dešiniam stulpeliui |
380 x 594, skirtas kairiam stulpeliui; 792 x 594, skirtas dešiniam stulpeliui |
|
Trečdalis dešiniojo stulpelio |
792 x 446, skirtas kairiam stulpeliui; 380 x 446, skirtas dešiniam stulpeliui |
792 x 594, skirtas kairiam stulpeliui; 380 x 594, skirtas dešiniam stulpeliui |
Puslapio dalių maketai
Jūsų naudojamų žiniatinklio dalių maketai taip pat turės įtakos jūsų vaizdų skale. Toliau pateiktuose pavyzdžiuose rodomos skirtingos puslapio dalys ir jų maketai viename stulpelyje ir jų proporcijos.
Apsvarstykite šį vaizdą, kurio 16:9 kraštinių santykis yra:
Toliau pateikiami šio vaizdo pavyzdžiai, rodomi vieno stulpelio puslapio makete skirtingose puslapio dalyse ir maketuose.
|
Toliau nurodyti plytelių ir sluoksnių maketų proporcijos:
Toliau pateikiamas paveikslėlis, rodomas sluoksnių maketo (viršutinis) ir išklotinių maketas (apačioje)
|
|
|
16:9 yra karuselės, "Filmstrip" ir kortelių maketų vaizdo santykis. Toliau pateikiamas paveikslėlis, rodomas "Filmstrip" maketo (viršuje) ir kortelių maketo (apačioje).
|
|
|
Vaizdai bus Išskleisti iki sekcijos, kurioje yra puslapio dalis, pločio. Jūs turite galimybę pakeisti vaizdo formatą arba laisvai naudoti apkarpymą naudodami vaizdo įrankių juostą arba naudoti dydžio keitimo rankenėles, kad vaizdas būtų didesnis ar mažesnis. Toliau pateikiamas pavyzdys, rodantis vaizdo apkarpytas žymes (mėlynos linijos) "4:3"
|
|
|
Toliau nurodyti proporcijos naudojami skirtingiems maketams:
Toliau pateikiamas pavyzdys, kaip vaizdas rodomas išklotinių dalių makete (viršuje) ir plytų makete (apačioje)
|
|
|
Atsižvelgiant į maketą, vaizdų naujienų puslapio dalyje gali būti "4:3", "16:9" arba "21:9". Štai vaizdų pavyzdys viršutinėje ir karuseliniame makete.
|
|
|
Vaizdai atrodo geriausiai, kai jie yra gulsčiai arba 16:9 arba didesni vaizdo formatu ir kai jie yra bent 1 MB dydžio. Be to, įsitikinkite, kad židinio taškas leidžia laikyti svarbiausią paveikslėlio dalį rodinyje, ypač kai paveikslėlis naudojamas miniatiūrų, naujienų maketų ir ieškos rezultatuose. Pavyzdys (originalus vaizdas 16:9) su kalbėtojo ryšių punktu.
|
|
|
Puslapio miniatiūros rodomos tokiose vietose kaip ieškos rezultatai, paryškinti turinio rezultatai, naujienų pranešimai ir kt. Pagal numatytuosius "miniatiūrą" miniatiūra gaunama iš puslapio pavadinimo srities arba iš puslapio dalies, kuri yra pirmame puslapyje (pvz., puslapio maketo viršutinė kairioji dalis). Galite nepaisyti numatytojo ir keisti puslapio miniatiūrą. Kai tai padarysite, geriausia naudoti vaizdą su 16:9 kraštinių santykiu. Pavyzdys (originalus vaizdas 16:9)
|
|
|
Greitosios nuorodos puslapio dalyje yra šeši skirtingi maketai. Toliau pateikiami Rekomenduojami kraštinių koeficientai:
Toliau pateikiamas paveikslėlis, rodomas kompaktiškame makete (viršus) ir "Filmstrip" maketas (apačioje)
|
Patarimai:
-
Kai įtraukiate atvaizdą į puslapio pavadinimo sritį arba herojaus puslapio dalį, taip pat geriausia nustatyti židinio vietą vaizdo, kurį norite visada Rodyti, srityje. Jei norite sužinoti daugiau apie šių dviejų scenarijų ryšių taško nustatymą, žiūrėkite vaizdo židinio taško keitimas herojaus puslapio dalyje ir Tinkinkite puslapio pavadinimo sritį.
-
Svetainės antraštės vaizdų rekomendacijos
Be puslapių, galbūt norėsite įtraukti pasirinktinių logotipų arba vaizdų išplėstiniame makete. Čia pateikiamos šių elementų dydžio rekomendacijos.
|
Elementas |
Aprašas |
Rekomendacija Plotis x aukštis pikseliais |
|---|---|---|
|
Svetainės logotipas |
Didesnis logotipas, kuris gali būti ne kvadratas ir skaidrus atsižvelgiant į nusiųstą dizainą |
192 x 64 Formatas: PNG, JPEG, SVG (SVG neleidžiama naudoti prie grupės prijungtų svetainių) |
|
Svetainės logotipo miniatiūra |
Kvadrato formos logotipo miniatiūra, naudojama, jei nėra svetainės logotipo ar vietos, kurioje yra reikiamas kvadrato formatas Šis elementas būtinas. |
64 x 64 Formatas: PNG, JPEG, SVG (SVG neleidžiama naudoti prie grupės prijungtų svetainių) |
|
Išplėstinis maketo svetainės logotipas |
Išplėstinio antraštės maketas turi išplėstinio svetainės logotipo plotį. |
300 x 64p Formatas: JPEG, PNG, SVG |
|
Išplėstinio maketo fono vaizdas |
Naujas fono vaizdas, kurį galima naudoti išplėstine antrašte. |
2560 x 164 Formatas: JPEG, PNG |
