Norādāmo attēlu izmēru noteikšana: 13 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:57

Vai jums ir problēmas ar attēlu pareizu izmēru? Vai jūsu attēli ir pārāk lieli un pārpilda rāmi tāpat kā iepriekš? Šis pamācošais mēģinājums apkopot to, ko esmu iemācījies, lai risinātu šo problēmu.

Instructable Staff ir teicis, ka visi augšupielādētie attēli tiek dublēti dažādās malu attiecībās. Pēc tam šie attēlu kopumi tiek izvilkti un izmērīti atšķirīgi atkarībā no ierīces, no kuras skatāt norādījumus. Parastajā redaktorā nav iespējams norādīt, kādu izmēru un attiecību parādīt.

Pēc tam viņi ieteica: "Vēl viena iespēja, kas var darboties, ir augšupielādēt attēlus, kuriem ir tradicionālāka malu attiecība. Jebkuram attēlam no 16: 9 līdz 4: 3 vajadzētu parādīties ļoti labi."

Ņemiet vērā, ka viņi saka, ka tas "var" darboties. Lūk, ko esmu atradis savās cīņās, lai attēlus parādītu pienācīgi. (Ņemiet vērā, ka es izmantoju attēlus no sava "Rubika kuba padarīts vienkāršs" pamācības, tātad visi šie kuba attēli!)

Iepriekš redzamais attēls ir tā sākotnējais izmērs (600x195), kas neatbilst tradicionālo malu attiecību diapazonam. Kā redzat, Instructables parāda šo attēlu pārāk palielinātu, nogriežot kreiso un labo pusi. Apskatīsim, ko mēs varam darīt, lai šis attēls tiktu parādīts pareizi.

1. darbība. Mēģināsim malu attiecību 16: 9

Tāpēc izmēģināsim 16: 9 (platums: augstums) malu attiecību. Es paturēšu sākotnējo platumu 600 pikseļi, 16: 9 nozīmē, ka augstumam jābūt 338 pikseļiem, tāpēc mēs izveidosim audekla izmēru 600x338 un nometīsim tajā 600x195 attēlu.

Tātad, redzēsim, kā izskatās šis 600x338 (malu attiecība 16: 9) attēls. Tik interesanti, ka, iemetot šo attēlu un priekšskatot to, tas lieliski iederējās - kreisā un labā mala nebija nogriezta! Es paņēmu ekrānuzņēmumu tikai pierādīšanai, skatiet to nākamajā slaidā.

Bet, skatoties to savā pārlūkprogrammā (Chrome), es redzu iepriekš redzamajā attēlā, ka labā un kreisā puse atkal tiek nogriezta! Tātad no šī eksperimenta šķiet, ka izmēru maiņa līdz 16: 9 malu attiecību neatrisinās mūsu problēmas!

Kā piezīmi 16: 9 ir "jaunā" kopējā malu attiecība, kas pazīstama kā "platekrāna", turpretī 4: 3 ir vecās skolas "pilnekrāna režīms", kas bija izplatīts televīzijas laikos. Jā, tev, tūkstošgadīgajiem, droši vien nav ne jausmas, par ko es runāju.

2. darbība: 16: 9 attēls, kas tikko augšupielādēts, kā redzams priekšskatījumā

Šis attēls ir ekrānuzņēmums, kas parāda, ka mūsu 16: 9 attēls priekšskatījumā izskatās perfekti. Panākumi, vai ne? Nu, ne tik ātri - redziet, kas notiek, kad mēs faktiski skatām šo lapu savā pārlūkprogrammā (Chrome)! Kreisā un labā mala atkal tiek saīsināta! Vienkārši atgriezieties, lai ļautu iepriekšējam slīdēt, un pārliecinieties paši.

Mācība - neuzticieties priekšskatījumam! Tas, kas priekšskatījumā izskatās labi, faktiskajā skatīšanā ar pārlūkprogrammu tiek atveidots atšķirīgi!

Turklāt jā, zem mana attēla ir daudz brīvas vietas. Tas ir tāpēc, ka es nometa 600x195 izmēra attēlu 600x338 audeklā un ievietoju to augšpusē, tāpēc apakšā ir viss tukšais baltais laukums. Ko mēs varam darīt lietas labā? Nu … mēs mēģināsim to risināt vēlākā slaidā.

Tātad, turpināsim redzēt, kā mēs varam panākt šī attēla parādīšanu kopumā.

3. darbība: 16: 9 tiek parādīts ar nogrieztām L&R pusēm

Tikai zināšanai, ja kāda iemesla dēļ jūsu pārlūkprogramma parāda šos 16: 9 attēlus perfekti, par to es runāju. Šeit ir redzams ekrānuzņēmums, kā es redzu savu 16: 9 attēlu 1. darbībā, kas tiek parādīts pēc "iekārtošanās" pēc sākotnējā priekšskatījuma - ievērojiet, ka kreisās un labās puses ir nogrieztas.

Ja redzat, ka mans 1. darbības attēls tiek parādīts perfekti, labi. Ļaujiet man zināt! Bet tā es to redzu. Jā, tas ir daudz labāk nekā titullapas sākotnējais attēls, taču tas joprojām ir nogriezts. Tātad, manuprāt, neskatoties uz Instructables darbinieku ieteikumiem, malu attiecība 16: 9 to nemazina. Pāriesim pie 4: 3 malu attiecības.

4. darbība. Mēģināsim proporciju 4: 3

Tāpēc izmēģināsim 4: 3 malu attiecību. Es paturēšu sākotnējo platumu 600 pikseļi, 4: 3 nozīmē, ka augstumam jābūt 450 pikseļiem, tāpēc mēs izveidosim audekla izmēru 600x450 un nometīsim tajā 600x195 attēlu.

Kā izskatās šis 600x450 (malu attiecība 4: 3) attēls?

Atkal, kad es to pirmo reizi ielaidu, attēls izskatās lieliski (izņemot visu balto vietu apakšā). Pa labi un pa kreisi tiek parādīti labi. Aplūkojot to pārlūkprogrammā, šķiet, ka labās un kreisās puses joprojām tiek rādītas labi.

Kā jau iepriekš minēts, tukšā baltā telpa zem attēla ir tāpēc, ka es nometa savu 600x195 izmēra attēlu 600x450 audeklā un vienkārši novietoju to augšpusē.

Gūtā pieredze - šķiet, ka ir nepieciešama 4: 3 malu attiecība, lai labā un kreisā puse netiktu nogriezta. Diemžēl tas nozīmē, ka īsiem un platiem attēliem būs daudz brīvas vietas, jo šie attēli būs jāieliek 4: 3 izmēra audeklā. Jā, jūs varētu centrēt savu attēlu tā, lai augšpusē un apakšā būtu vienāds balts laukums, bet neatkarīgi no tā, virs attēla vai zem tā būs daudz baltas vietas, bet, cik man zināms, tas ir kompromiss jāievada Instructables, lai jūsu attēli būtu neskarti.

5. darbība: 4: 3 ar attēla centru

Lūk, tas pats 600x195 izmēra attēls, kas ievietots 600x450 audeklā, bet centrēts tā, lai augšpusē un apakšā būtu vienāds tukšs balts laukums. Izskatās nedaudz labāk, teksts nešķiet tik tālu no attēla.

6. darbība: 4: 3 ar attēlu apakšā

Un visbeidzot, tas pats attēls nokrita un pārcēlās uz leju. Tagad attēla augšpusē ir daudz tukšas baltas vietas. Attēls tagad patiešām ir atdalīts no virsrakstjoslas, bet tas ir tuvāk tekstam. Tātad šie ir jūsu kompromisi un mācības:

• Šķiet, ka 4: 3 ir tā malu attiecība, kas jāizmanto, lai attēli tiktu parādīti pilnībā Instructables.
• neuzticieties priekšskatījumam - tas var parādīt jūsu attēlu perfekti, bet daļas var tikt saīsinātas faktiskajā pārlūkprogrammā

7. solis: kāds ir minimālais platums?

Tagad redzēsim, kādam jābūt minimālajam platumam. Parādītais attēls ir 382x206 izmērs, tuvu 2: 1, šķiet patiešām milzīgs, vai ne? Acīmredzot Instructables ir palielinājis attēlu, lai tas atbilstu noteiktam platumam, iespējams, 640 pikseļiem, es neesmu pārliecināts.

Bet tas der, jo ir vairāk “kvadrātveida” - t.i., nav pārāk plats savam augumam. Ak, pagaidi, es atkal to priekšskatījumu apmānīju! Tas faktiski neder - R&L puses atkal tiek saīsinātas.

Patiesībā tas ir dīvaini, sajaukts ir ne tikai priekšskatījums. Es faktiski paskatījos uz to pārlūkprogrammā un sākumā tas tika atveidots pareizi (t.i., R&L malas nebija nogrieztas). Bet, vēlreiz aplūkojot to pārlūkprogrammā, tagad attēla izmērs tiek mainīts, un R&L malas ir saīsinātas. Nepāra.

Tāpēc mēģināsim samazināt attēlu. Mēs samazināsim attēlu līdz 200x108, saglabājot to pašu 2: 1 malu attiecību.

8. solis: samaziniet attēlu, bet saglabājiet malu attiecību

Tāpēc es mainu šī attēla izmērus līdz 200x108, saglabājot to pašu 2: 1 malu attiecību.

Tagad atkal šķiet, ka tas sākotnēji der (ar izšķirtspēju (attēla kvalitāte) ir ievērojami pasliktinājusies!), Bet, protams, jūs, iespējams, skatāties uz to un tas vispār neder, un izskatās tieši tāpat kā oriģinālais attēls, izņemot oriģinālu labāka izšķirtspēja. Atkal Instructables paplašina attēlu, lai tas atbilstu noteiktam platumam, tāpēc šis mazākais (200x108) attēls izskatās tik briesmīgs, daudz sliktāks nekā sākotnējais 382x206.

Es saku "iespējams", jo man tiešām nav ne jausmas, kā Instructables attēlo šos attēlus jūsu pārlūkprogrammā. Kādu iemeslu dēļ, ja es atsvaidzinu kešatmiņu un pārskatīšu šo Instructable, šķiet, ka manu attēlu izmēri nemainās, tāpēc es tiešām nezinu, ko Instructables dara, izņemot to, ka tas var būt pretrunīgi. Tādējādi šīs pamācības mērķis ir izdomāt, kā izmērīt attēlus, lai tie tiktu parādīti vismaz konsekventi!

9. solis: pierādījums tam, ka attēli sākotnēji tiek attēloti pareizi

Lūk, ko es redzēju sākumā uzreiz pēc attēla augšupielādes - tas der! (Ņemiet vērā, ka man bija jāiekļauj iepriekš redzamais ekrānuzņēmums 1600x1200 attēlā (t.i., attiecība 4: 3), lai Instructables parādītu visu ekrānuzņēmumu!)

Bet, protams, jūs zināt, ka, paskatoties uz šo attēlu, pāris tagad slīd atpakaļ, tas vairs nav piemērots. Apskatīsim, kādam jābūt minimālajam platumam, lai tas būtu piemērots.

10. darbība. Izmēģiniet 382x287 (attiecība 4: 3)

Es saglabāju 382 platumu un nokritu sākotnējo 382x206 attēlu 382x287 audeklā, lai tas kļūtu par 4: 3 malu attiecību, jo iepriekš esam atklājuši, ka Instructable ir nepieciešams attēls, lai tas atbilstu šai 4: 3 attiecībai, lai to parādītu pilnībā.

Tātad tagad zem tā ir daudz tukšas baltas vietas. Tas atbilst, ja nekas nav nogriezts, bet atkal tas ir paplašināts, lai aizpildītu noteiktu platumu, tāpēc attēls nav ass. Mēģināsim noskaidrot, kāds ir šis ideālais instrukcijas platums.

11. darbība: attēla paplašināšana no 300x206 līdz 600x206, lai redzētu, vai tas parādās labāk

Es nometu sākotnējo 382x206 (2: 1) attēlu 600x206 (3: 1) audeklā, lai redzētu, vai, paplašinot to līdz 600 pikseļiem, Instructables parādīs visu attēlu. Atkal, sākumā tas notika, bet, kā redzat, tagad nav.

Tas ir patiešām dīvaini - katru reizi, kad pirmo reizi iemetat attēlu, šķiet, ka Instructables šo attēlu parādīs pareizi neatkarīgi no attēla lieluma vai proporcijas. Šoreiz es pat izrakstījos no Instructables un aizvēru šo cilni un pēc tam vēlreiz apskatīju šo Instructable “svaigu”, lai pārbaudītu, vai attēls joprojām tiek parādīts pareizi. Parasti ar to pietiek, lai Instructable varētu darīt savu un sākt mainīt to attēlu izmērus, kuru malu attiecība nav 4: 3, un parādīt tos ar nogrieztu kreiso un labo pusi.

Man par pārsteigumu, pirmās pāris reizes, kad es atkārtoti apmeklēju šo pamācāmo “svaigo”, šis attēls palika redzams pilnībā, bet, diemžēl, pēc tam, kad aizgāju darīt kaut ko citu un atnācu, iespējams, apmēram stundu vēlāk, šis attēls sāka parādīties palielināts ar L&R pusēm, kas atkal saīsinātas, kā redzat iepriekš.

Kāpēc vai kā tas notiek? Man nav ne jausmas. Man nav ne jausmas, kāpēc, gaidot kādu laiku pēc attēla augšupielādes, Instructables to padarītu atšķirīgu, bet tas tā ir. Kā pierādījumu es parādīšu savu ekrānuzņēmumu, kurā iepriekš minētais attēls tiek parādīts perfekti pirmajā akā, 10-15 minūtes pēc tam, kad to augšupielādēju nākamajā slaidā.

12. darbība: pierādījums tam, ka attēli sākotnēji tiek parādīti pareizi pēc augšupielādes

Šeit ir ekrānuzņēmums, kurā redzams, ka 600x206 attēls tiek parādīts pilnībā uzreiz pēc augšupielādes. Šis ir iepriekšējā slaida ekrānuzņēmums. Atgriezieties iepriekšējā slaidā, un jūs varat redzēt, kā attēls tagad ir pacelts!

Ņemiet vērā, ka mana ekrāna attēla izmērs faktiski bija 1563 x 766, bet, kā es uzzināju no saviem eksperimentiem šīs pamācības sākumā, es zināju, ka tas neatbilst 4: 3 malu attiecībai (1563 x 766 ir aptuveni 4: 2), tāpēc, ja es tikko augšupielādēja šo ekrānuzņēmumu sākotnējā izmērā Instructable saīsinātu malas. Tāpēc es nometu šo attēlu 4: 3 audeklā, tāpēc zem mana ekrānuzņēmuma ir daudz tukšas vietas.

Ņemiet vērā, ka ekrānuzņēmums tika uzņemts arī pirms es mainīju 11. darbības virsrakstu un pabeidzu rakstīt visu šo tekstu, ja jums rodas jautājums par to!

Gūtā pieredze - augšupielādētā attēla skatīšana pārlūkprogrammā tūlīt pēc augšupielādes ne vienmēr parāda, kā tas tiks parādīts nākotnē. Jebkura iemesla dēļ šķiet, ka gandrīz jebkura izmēra un/vai malu attiecības attēls tiek parādīts labi uzreiz pēc augšupielādes un pat apmēram 10–15 minūtes pēc augšupielādes un pat pēc tam, kad esat izrakstījies no Instructables un apskatīts svaigā veidā no jaunas pārlūkprogrammas sesijas utt..

Bet pagaidiet apmēram stundu vai ilgāk, un lietas mainās! Jūsu attēls, ja tas neatbilst 4: 3 malu attiecībai, tiks pielāgots (parasti palielināts), izmantojot Instructable, lai malas tiktu saīsinātas.

13. solis. Secinājums - tas, ko es iemācījos

Tātad būtība - ko es iemācījos?

1. Lai parādītu attēlu kopumā, ir obligāti jāievēro 4: 3 malu attiecība (platums: augstums)!

2. Izmantojiet lielus oriģinālus attēlus ar vislielāko izšķirtspēju un nometiet tos 4: 3 proporcijās. Ja tas ir pārāk liels, Instructables to samazina, un jums būs jauki asi attēli.

3. Ja jūsu attēls ir pārāk mazs (daudz mazāks par 600 pikseļiem), Instructable paplašinās jūsu attēlu un padarīs to vismaz 600 pikseļu platāku, tādējādi padarot to mazāk asu. Es saku “izcili”, jo es īsti precīzi nezinu, kādu platumu Instructable izmanto, bet šķiet, ka tas ir tuvu 600. Tas, iespējams, ir 640, kas bija izplatīts platums vecās skolas cauruļu monitoru laikos.

600x450 un 640x480 ir 4: 3 malu attiecības. Visi vecās skolas "pilnekrāna" cauruļu monitori bija 640x480 (platums x augstums).

4. Ko darīt, ja sākotnējais attēls nav vismaz 600 pikseļu plats? Viss, ko varat darīt, ir nomest to audeklā, kas atbilst 4: 3 proporcijai, kas parāda jūsu attēlu tuvu sākotnējam izmēram. Ja sākotnējais attēls ir mazs, būs daudz tukšas baltas vietas, tāpēc mēģiniet centrēt attēlu vai novietot balto vietu virs vai zem attēla un padarīt to pēc iespējas labāku.

Cik man zināms, tas ir kompromiss, kas jums būs jāizveido Instructables, lai jūsu attēli būtu neskarti.

Piemēram, iepriekš minētais attēls ir 600x450 audekla izmērs ar 382 x 206 attēlu, kas tajā ir ievietots un centrēts, tāpēc mums ir vienāds tukšs laukums virs un zem. Attēls tiek parādīts aptuveni sākotnējā izmērā, es domāju, ka Instructables to varētu paplašināt līdz 640x480 (nenozīmīga paplašināšana), tāpēc tas ir labākais, ko mēs varam darīt ar šo sākotnējo attēlu.

5. Neuzticieties priekšskatījumam vai tam, kā izskatās jūsu attēls pirmajās stundās pēc to augšupielādes Instructable! Kādu iemeslu dēļ šķiet, ka attēlu izmēri nemainās līdz pāris stundām pēc to augšupielādes.

Katru reizi, kad pirmo reizi iemetat attēlu, šķiet, ka Instructables šo attēlu parādīs pareizi neatkarīgi no attēla lieluma vai proporcijas. Pēc tam tas pat var palikt pareizi parādīts kādu laiku, taču NEPAZĪST, jo galu galā tas mainīs to izmērus un radīs problēmas, ja vien neievērojat šo 4: 3 noteikumu!

Ceru, ka tas palīdz, un lūdzu, ja atrodat labāku veidu vai jums ir citi ieteikumi, dariet man to zināmu!