Moodsad lehed ja veebiosad on kujundatud nii, et need oleksid kõigis seadmetes täielikult tundlikud, mis tähendab, et veebiosades kasutatavad pildid mastaabitakse olenevalt sellest, kus need on kuvatud, millist paigutust kasutatakse, ja seadet, kus neid vaadatakse. Näiteks on moodsad lehed loodud nii, et need näevad mobiilsideseadmetes head välja, ja piltide automaatne mastaapimine aitab luua atraktiivse kogemuse.
Mis pildi suurused kõige paremini toimivad?
Tundlike lehtede kujunduse tõttu pole pikslites kindlat kõrgust ega laiust, mis tagab, et pilt säilitab teatud kujundit kõigis seadmetes ja paigutustes. Pildid suurendatakse ja kärbitakse automaatselt, et kuvada parim võimalik tulem mitmesuguste seadmete ja paigutuste vahel. Siiski on mõned juhised, mis aitavad teil kindlaks teha, kas pildid on lehtedel suurepärased.
Lehe parima suurusega Piltide leidmine sõltub järgmistest teguritest.
-
Kuvasuhe: piltide kõrguse ja laiuse vaheline seos
-
Veeru paigutus: teie lehel olevate veergude tüüp ja arv
-
Veebiosa paigutus: teie valitud paigutus selle veebiosa jaoks, kus pilti kasutatakse
Proportsioonid
Proportsioonid on piltide laiuse ja kõrguse vaheline seos. Seda väljendatakse tavaliselt kahe arvuna (nt 3:2, 4:3 või 16:9). Laius on alati esimene arv. Näitena võib 16:9 suhe olla 1600 pikslit laiuses, mille kõrgus on 900 pikslit. Võimalik, et see võib olla 1920 x 1080, 1280 x 720 või mõni muu laiuse/kõrgusega kombinatsioon, mida saab arvutada võrdseteks 16:9. Saate otsida kuvasuhte kalkulaatoreid veebis ja mõnes foto redigeerimise tööriistas, mis aitavad teil kindlaks teha piltide kuvasuhet.
Enamikel juhtudel töötab kaasaegsete veebiosade pildid kõige paremini paigutuste ja seadmete vahel, kui neil on olenevalt paigutusest kas 16:9 või 4:3 proportsioonid.
Veergude paigutused
Lehte saab lisada jaotistesse, mis sisaldavad eri tüüpi veerge ja paigutusi (nt terve laiusega veerud, üks veerg, kaks veergu, kolm veergu, üks kolmandik vasakule ja üks kolmandik parematest veergudest). Veeru laiuse täitmiseks oodatud piltide üldreegel on see, et need peavad olema vähemalt sama lai kui veerg, milles need on paigutatud. Näiteks ühe veeru pildi veebiosa pilt peaks olema vähemalt 1204 pikslit lai. Järgnevalt on toodud iga veerupaigutuse laiuse juhised.
|
Paigutus |
Laius pikslites |
|
Veeru täielik laius |
1920 |
|
Üks veerg |
1204 |
|
Kaks veergu |
586 veeru kohta |
|
Kolm veergu |
380 veeru kohta |
|
Ühe kolmandiku vasakpoolne veerg |
380 vasakpoolse veeru jaoks; 792 parema veeru jaoks |
|
Ühe kolmandiku parempoolse veeru |
792 vasakpoolse veeru jaoks; 380 parema veeru jaoks |
Lehtede tundlike omaduste tõttu kuvatakse täieliku laiusega veergudes olevad pildid alati ekraani laiuse juures automaatselt, kui ekraani suurus põhineb automaatselt.
Muudesse veerupaigutusesse paigutatud piltide kõrgus sõltub teie proportsioonist. Siin on 16:9 ja 4:3 kuvasuhte kõrguse ja laiuse juhised (ümardatakse ülespoole/alla lähima pikslini). See on kasulik, kui soovite hoida oma pildid laiuse ja kõrguse juures, mis on näiteks mobiilsideseadmete jaoks sobiva suurusega.
|
KUVASUHE PAIGUTUS |
16 x 9 Laius x kõrgus pikslites |
4 x 3 Laius x kõrgus pikslites |
|---|---|---|
|
Üks veerg |
1204 x 677 |
1204 x 903 |
|
Kaks veergu |
586 x 330 |
586 x 439 |
|
Kolm veergu |
380 x 214 |
380 x 285 |
|
Ühe kolmandiku vasakpoolne veerg |
380 x 446 vasakpoolse veeru jaoks; 792 x 446 parema veeru jaoks |
380 x 594 vasakpoolse veeru jaoks; 792 x 594 parema veeru jaoks |
|
Ühe kolmandiku parempoolse veeru |
792 x 446 vasakpoolse veeru jaoks; 380 x 446 parema veeru jaoks |
792 x 594 vasakpoolse veeru jaoks; 380 x 594 parema veeru jaoks |
Veebiosa paigutused
Teie kasutatavate veebiosade paigutused mõjutavad ka piltide skaalat. Järgmistes näidetes on ära toodud erinevad veebiosad ja nende paigutused ühes veerus ning iga kasutatav proportsioon.
Arvestage selle pildiga, mis sisaldab 16:9 algset kuvasuhet:
Järgnevalt on toodud näited selle pildi kohta, mis on kuvatud ühes veerupaigutuse paigutuses eri veebiosades ja paigutustes.
|
Paanide ja kihtide paigutuste järgmised proportsioonid on järgmised.
Siin on näide pildist, mis on kuvatud paigutustes paigutus (ülemine) ja paanil paigutus (all).
|
|
|
16:9 on Karusselli, Filmiriba ja kaartide paigutuste proportsioon. Siin on näide pildist, mis kuvatakse Filmiriba paigutuses (ülal) ja kaartide paigutuses (all).
|
|
|
Pildid laiendatakse veebiosa sisaldava jaotise laiusele. Teil on võimalus muuta kuvasuhet või vaba kärpimist pildi tööriistaribal või kasutada piltide suurust, et muuta pilt suuremaks või väiksemaks. Siin on näide piltide kärpimise märkidest (sinised jooned) aadressil 4:3
|
|
|
Eri paigutustes kasutatakse järgmisi proportsioone.
Siin on näide pildist, mis on kujutatud paanil paigutus (ülemine) ja telliste paigutus (all).
|
|
|
Olenevalt paigutusest võivad uudiste veebiosas olevad pildid olla 4:3, 16:9 või 21:9. Siin on näide piltidest, mis on kujutatud ülemises loos ja Karusselli paigutuses.
|
|
|
Pildid on kõige paremad, kui need on horisontaalpaigutusega või 16:9 või suuremad ning kui need on vähemalt 1 MB suurused. Veenduge ka, et määrate teabekeskuse vaates pildi kõige olulisemat osa hoidma, eriti siis, kui pilti kasutatakse pisipiltidena, uudiste paigutustes ja otsingutulemustes. Näide (Algne pilt 16:9), kus on määratud teabekeskuse Kõlar.
|
|
|
Lehekülje pisipildid kuvatakse sellistes kohtades nagu otsingutulemused, esiletõstetud sisu tulemid, uudiste postitused ja muud. Vaikimisi pärineb pisipilt lehekülje pealkirjast või veebiosast, mis asub lehe esimeses järjestuses (nt leheküljendi ülemises vasakus nurgas). Saate alistada vaike-ja muuta lehe pisipilti. Kui seda teete, on soovitatav kasutada 16:9 kuvasuhtega pilti. Näide (Algne pilt 16:9)
|
|
|
Kiirlingid veebiosa on kuus erinevat paigutust. Soovitatavad on proportsioonid.
Siin on näide pildist, mis on kuvatud kompaktses paigutuses (üleval) ja Filmiriba paigutuses (all).
|
Näpunäited:
-
Kui lisate pildi lehe tiitliriba või kangelase veebiossa, on soovitatav määrata ka selle pildi alal paiknev teabekeskus, mida soovite alati kuvada. Lisateavet nende kahe stsenaariumi teabekeskuse määramise kohta leiate teemast kangelase veebiosa pildi keskpunkti muutmine ja lehe tiitliala kohandamine.
-
Saidi päise pildi soovitused
Lisaks lehtedele võite soovi korral lisada laiendatud paigutusse kohandatud logosid või pilte. Siin on nende elementide kohta soovitusi.
|
Element |
Kirjeldus |
Soovitus Laius x kõrgus pikslites |
|---|---|---|
|
Saidi logo |
Suurem logo, mis võib olla mitte-kandiline ja läbipaistev, olenevalt üleslaaditud kujundusest |
192 x 64 Vorming: PNG, JPEG, SVG (SVG pole rühmaga ühendatud saitidel lubatud) |
|
Saidi logo pisipilt |
Ruudukujulise logo pisipilt, mida kasutatakse siis, kui saidi logo ei laadita üles või kohtadesse, mida on vaja Square-vormingus See element on nõutav. |
64 x 64 Vorming: PNG, JPEG, SVG (SVG pole rühmaga ühendatud saitidel lubatud) |
|
Laiendatud paigutuse saidi logo |
Laiendatud päise paigutusel on laiendatud saidi logo laius. |
300 x 64p Vorming: JPEG, PNG, SVG |
|
Laiendatud paigutuse Taustapilt |
Uus Taustapilt, mida saab kasutada laiendatud päises. |
2560 x 164 Vorming: JPEG, PNG |
