Dimensionarea imaginilor instructabile: 13 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:45

Aveți probleme pentru a obține dimensiunea corectă a imaginilor? Dimensiunea imaginilor dvs. este prea mare și depășește cadrul ca cel de mai sus? Această încercare instructivă de a rezuma ceea ce am învățat pentru a rezolva această problemă.

Personalul Instructable mi-a spus că toate imaginile încărcate sunt duplicate în diferite raporturi de aspect. Aceste grupuri de imagini sunt apoi extrase și dimensionate diferit, în funcție de dispozitivul pe care îl vizualizați. Nu există o modalitate de a specifica în editorul obișnuit ce dimensiune și raport să afișați.

Apoi au sugerat că „O altă opțiune care poate funcționa este dacă încărcați imagini cu un raport de aspect mai tradițional. Orice de la 16: 9 la 4: 3 ar trebui să se afișeze foarte frumos”.

Observați că ei spun că acest „poate” funcționează. Iată ce am găsit în luptele mele pentru ca imaginile mele să fie afișate decent. (Rețineți că folosesc imagini din „Cubul meu Rubik ușor” instructabile, de unde toate aceste imagini cub!)

Imaginea de mai sus are dimensiunea sa originală (600x195), care nu se află în acea gamă de raporturi de aspect tradiționale. După cum puteți vedea, Instructables afișează această imagine mărită prea mult, cu laturile stânga și dreapta tăiate. Să vedem ce putem face pentru ca această imagine să fie afișată corect.

Pasul 1: Să încercăm raportul de aspect 16: 9

Deci, să încercăm raportul de aspect 16: 9 (lățime: înălțime). Voi păstra lățimea inițială de 600 pixeli, 16: 9 înseamnă că înălțimea trebuie să fie de 338 pixeli, așa că vom face o dimensiune a pânzei de 600x338 și vom arunca acea imagine 600x195 în ea.

Deci, să vedem cum arată această imagine de 600x338 (raport de aspect 16: 9). Atât de interesant, când am scăpat această imagine și am previzualizat-o, s-a potrivit perfect - marginile din stânga și din dreapta nu au fost tăiate! Am luat o captură de ecran a acestuia doar ca dovadă, o văd în diapozitivul următor.

Dar, când văd acest lucru în browserul meu (Chrome), ceea ce văd în imaginea de mai sus, este că laturile din dreapta și din stânga sunt din nou tăiate! Deci, din acest experiment, se pare că redimensionarea la un raport de aspect 16: 9 nu ne va rezolva problemele!

Ca o notă laterală, 16: 9 este „noul” raport de aspect comun, cunoscut sub numele de „ecran lat”, în timp ce 4: 3 este „ecranul complet” al vechii școli, care era obișnuit în zilele de televiziune cu tuburi. Da, probabil că nu ai nici o idee despre ce vorbesc.

Pasul 2: 16: 9 Imagine încărcată recent ca vizualizată în previzualizare

Această imagine este captura de ecran, arătând că imaginea noastră 16: 9 arată perfect în previzualizare. Succesul nu? Ei bine, nu atât de repede - vedeți ce se întâmplă când vizualizăm de fapt această pagină în browserul nostru (Chrome)! Marginile stânga și dreapta sunt trunchiate din nou! Întoarce-te înapoi pentru a lăsa diapozitivul anterior și vezi singur.

Lecția învățată - nu aveți încredere în Preview! Ceea ce arată bine în Previzualizare este redat diferit în vizualizarea reală cu un browser!

De asemenea, da, există mult spațiu alb sub imaginea mea. Asta pentru că am scăpat o imagine de 600x195 într-o pânză de 600x338 și am pus-o în partea de sus, deci există tot spațiul alb în partea de jos. Ce putem face în legătură cu asta? Ei bine … vom încerca să abordăm acest lucru într-un slide ulterior.

Deci, să continuăm să vedem cum putem face ca această imagine să fie afișată în întregime.

Pasul 3: 16: 9 Afișat cu laturile L&R tăiate

Doar pentru înregistrare, în cazul în care, din orice motiv, browserul dvs. afișează perfect aceste imagini 16: 9, despre asta vorbesc. Iată o captură de ecran a modului în care văd imaginea mea 16: 9 la Pasul 1 afișată după „stabilirea” după previzualizarea inițială - observați că stânga și dreapta sunt tăiate.

Dacă vedeți imaginea mea din Pasul 1 afișată perfect, bine, minunat. Să-mi dai de veste! Dar așa o văd. Da, este mult mai bine decât imaginea originală din pagina de titlu, dar este totuși tăiată. Deci, pentru mine, în ciuda sfaturilor personalului Instructables, raportul de aspect 16: 9 nu prea îl reduce. Să trecem la raportul de aspect 4: 3.

Pasul 4: Să încercăm raportul de aspect 4: 3

Deci, să încercăm raportul de aspect 4: 3. Voi păstra lățimea inițială de 600 pixeli, 4: 3 înseamnă că înălțimea trebuie să fie de 450 pixeli, așa că vom face o dimensiune a pânzei de 600x450 și vom arunca acea imagine 600x195 în ea.

Cum arată această imagine 600x450 (raport de aspect 4: 3)?

Din nou, când îl introduc, imaginea arată grozav (cu excepția întregului spațiu alb din partea de jos). Stânga și dreapta sunt afișate bine. Privind-o într-un browser, se pare că Dreapta și Stânga par să continue să fie afișate bine.

După cum sa menționat anterior, tot spațiul alb de sub imagine se datorează faptului că am scăpat imaginea mea de 600x195 într-o pânză de 600x450 și tocmai am plasat-o în partea de sus.

Lecția învățată - raportul de aspect 4: 3 pare a fi necesar, astfel încât părțile din dreapta și din stânga să nu fie tăiate. Din păcate, acest lucru înseamnă că va exista mult spațiu alb pentru imaginile scurte și largi, deoarece va trebui să aruncați aceste imagini într-o pânză de dimensiuni 4: 3. Da, ai putea să-ți centrezi imaginea astfel încât să existe un spațiu alb egal în partea de sus și de jos, dar indiferent că va fi mult spațiu alb deasupra sau dedesubtul imaginii tale, dar din câte știu eu, acesta este compromisul pe care îl vei face trebuie să creați în Instructables astfel încât imaginile dvs. să fie intacte.

Pasul 5: 4: 3 Cu imaginea centrată

Iată aceeași imagine de 600x195 aruncată într-o pânză de 600x450, dar centrată astfel încât să existe un spațiu alb egal în partea de sus și de jos. Arată puțin mai bine, textul nu pare la fel de îndepărtat de imagine.

Pasul 6: 4: 3 Cu imaginea în partea de jos

Și, în sfârșit, iată aceeași imagine căzută și mutată în partea de jos. Acum este o tonă de spațiu alb în partea de sus a imaginii. Imaginea este acum într-adevăr separată de bara de titlu, dar este mai aproape de text. Deci, acestea sunt compromisurile și lecțiile învățate:

• 4: 3 pare a fi raportul de aspect pe care trebuie să îl utilizați pentru ca imaginile să fie afișate în întregime în Instructables.
• nu aveți încredere în previzualizare - s-ar putea să vă arate imaginea perfect, dar părțile ar putea fi tăiate în browserul real

Pasul 7: Care este lățimea minimă?

Acum să vedem care ar trebui să fie lățimea minimă. Imaginea afișată are dimensiunea 382x206, aproape de 2: 1, pare cu adevărat imensă, nu-i așa? Evident, Instructables a mărit imaginea pentru a se potrivi cu o lățime stabilită, probabil 640 pixeli, nu sunt sigur.

Dar se potrivește pentru că este mai „pătrat” - adică nu este prea larg pentru înălțimea sa. Oh, așteaptă, am fost păcălit din nou de Preview! De fapt nu se potrivește - părțile R&L sunt din nou tăiate.

De fapt, acest lucru este ciudat, nu numai că previzualizarea este deranjată. De fapt, l-am privit în browser și la început s-a redat corect (adică, marginile R&L nu au fost tăiate). Dar privind-o din nou prin browser, acum imaginea se redimensionează cu marginile R&L tăiate. Ciudat.

Deci, să încercăm să micșorăm imaginea. Vom micșora imaginea la 200x108, păstrând același raport de aspect 2: 1.

Pasul 8: Micșorarea imaginii, dar păstrarea raportului de aspect

Așa că redimensionez acea imagine la 200x108, păstrând același raport de aspect 2: 1.

Acum, din nou, pare să se potrivească la început (cu rezoluția (calitatea imaginii) foarte deteriorată!), Dar, desigur, probabil că te uiți la ea și nu se potrivește deloc și arată exact ca imaginea originală, cu excepția originalului rezoluție mai bună. Din nou, Instructables extinde imaginea pentru a se potrivi cu o lățime stabilită, așa că de aceea această imagine mai mică (200x108) arată atât de oribilă, mult mai rău decât originalul 382x206.

Spun „probabil” pentru că nu am nicio idee despre modul în care Instructables afișează aceste imagini în browserul dvs. Indiferent de motiv, dacă îmi reîmprospătez memoria cache și revizuiesc acest Instructable, dimensiunile imaginilor mele nu par să rămână consecvente, așa că chiar nu știu ce face Instructables, cu excepția faptului că poate fi inconsecventă. Astfel, obiectivul acestui instructabil - să vă dați seama cum să măsurați imaginile astfel încât să fie afișate cel puțin oarecum consecvent!

Pasul 9: Dovada că imaginile sunt redate corect la început

Iată ce am văzut la început imediat după încărcarea imaginii - se potrivește! (Rețineți că a trebuit să încadrez captura de ecran de mai sus într-o imagine de 1600x1200 (de exemplu, raportul 4: 3) pentru ca instructabilele să afișeze întreaga captură de ecran!)

Dar, bineînțeles, știi când te uiți la acea imagine, un cuplu alunecă înapoi acum, nu mai este potrivit. Să vedem care trebuie să fie lățimea minimă pentru a o potrivi.

Pasul 10: Încercați 382x287 (raport 4: 3)

Am păstrat lățimea 382 și am aruncat imaginea originală 382x206 într-o pânză 382x287 pentru a face un raport de aspect 4: 3, deoarece am descoperit anterior că Instructable are nevoie de o imagine care să se potrivească acel raport 4: 3 pentru ao afișa în întregime.

Deci, acum există o mulțime de spațiu alb dedesubt. Se potrivește cu nimic tăiat, dar din nou a fost extins pentru a umple o anumită lățime stabilită, astfel încât imaginea nu este clară. Să încercăm să găsim care este această lățime perfectă de instruire.

Pasul 11: Lărgirea imaginii de la 300x206 la 600x206 pentru a vedea dacă se afișează mai bine

Am aruncat imaginea originală 382x206 (2: 1) într-o pânză de 600x206 (3: 1) doar pentru a vedea dacă lărgirea ei la 600 pixeli va face ca Instructables să afișeze întreaga imagine. Din nou, la început a făcut-o, dar, după cum puteți vedea, nu acum.

Acesta este un lucru cu adevărat ciudat - de fiecare dată, când introduceți o imagine pentru prima dată, se pare că Instructables va afișa acea imagine corect, indiferent de dimensiunea sau raportul de aspect al acelei imagini. De data aceasta chiar m-am deconectat de la Instructables și am închis acea filă și apoi am revizuit acest „fresh” instructabil, ca să spun așa, pentru a verifica dacă imaginea este încă afișată corect. De obicei, acest lucru este suficient pentru a permite Instructable să își facă treaba și să înceapă să redimensioneze imaginile care nu au un raport de aspect 4: 3 și să le afișeze cu laturile stânga și dreapta tăiate.

Spre surprinderea mea, de câteva ori am revizuit această imagine „proaspătă” instructabilă a rămas afișată în întregime, dar din păcate, după ce m-am îndepărtat pentru a face altceva și am venit poate cu aproximativ o oră mai târziu, această imagine a început să fie afișată mărită cu laturile L&R trunchiate din nou exact așa cum o vedeți mai sus.

De ce sau cum se întâmplă acest lucru? N-am idee. Nu am idee de ce așteptarea unei perioade de timp după încărcarea unei imagini ar face ca Instructables să o redea diferit, dar da. Drept dovadă, voi arăta captura de ecran a imaginii de mai sus care se afișează perfect în prima oh, 10-15 minute după ce am încărcat-o în diapozitivul următor.

Pasul 12: Dovadă că imaginile se afișează corect inițial după încărcare

Iată o captură de ecran care arată acea imagine 600x206 afișată în întregime imediat după încărcare. Aceasta este o captură de ecran a diapozitivului anterior. Reveniți la diapozitivul anterior și puteți vedea cât de ridicată este imaginea acum!

Rețineți că captura ecranului meu avea de fapt dimensiunea de 1563x766, dar așa cum am aflat din experimentele mele la începutul acestui instructabil, știam că nu se potrivește cu acel raport de aspect 4: 3 (1563x766 este aproximativ 4: 2), așa că dacă aș face tocmai am încărcat acea captură de ecran în dimensiunea sa originală Instructable ar trunchia marginile. Așa că am scăpat acea imagine într-o pânză 4: 3, deci de aceea există o mulțime de spațiu alb sub captura de ecran.

Rețineți că captura de ecran a fost făcută și înainte de a schimba titlul pasului 11 și a terminat de tastat tot acest text, în caz că vă întrebați despre asta!

Lecție învățată - vizualizarea imaginii încărcate într-un browser imediat după încărcare nu va arăta neapărat cum va fi afișată în viitor. Indiferent de motiv, aproape orice dimensiune și / sau imagine a raportului de aspect pare să se afișeze frumos imediat după încărcare și chiar și pentru aproximativ 10-15 minute după încărcare și chiar și după ce vă deconectați de la Instructables și o vizualizați proaspăt dintr-o nouă sesiune de browser etc..

Dar așteptați aproximativ o oră sau mai mult și lucrurile se schimbă! Imaginea dvs., dacă nu se potrivește cu raportul de aspect 4: 3, va fi ajustată (de obicei mărită) de Instructable, astfel încât marginile să fie trunchiate.

Pasul 13: Linia de fund - Ce am învățat

Deci linia de jos - ce am învățat?

1. Pentru a afișa o imagine în întregime, păstrarea unui raport de aspect 4: 3 (lățime: înălțime) este o necesitate!

2. Utilizați imagini originale de dimensiuni mari, cu cea mai mare rezoluție posibilă și aruncați-le într-o pânză cu raport de 4: 3. Dacă sunt prea mari, Instructables îl va reduce și veți avea imagini clare și frumoase.

3. Dacă imaginea dvs. este prea mică (cu mult mai puțin de 600 de lățimi) Instructable vă va extinde imaginea și o va face cu o lățime de cel puțin 600 de pixeli, făcând-o astfel mai puțin clară. Spun „ish” pentru că nu știu cu exactitate ce lățime folosește Instructable, dar pare aproape de 600. Este probabil 640, care era o lățime obișnuită în vremurile vechi de monitorizare a tubului școlar.

600x450 și 640x480 sunt raporturi de aspect 4: 3. Toate monitoarele tubulare „full screen” din vechea școală aveau 640x480 (lățime x înălțime).

4. Ce trebuie să faceți dacă imaginea originală nu are o lățime de cel puțin 600 de pixeli? Tot ce puteți face este să o lăsați într-o pânză care să se potrivească cu raportul 4: 3 care afișează imaginea dvs. aproape de dimensiunea sa originală. Dacă imaginea originală este mică, vor exista o mulțime de spațiu alb, deci încercați să vă centrați imaginea sau puneți spațiul alb deasupra sau sub imaginea dvs. și faceți-o să arate cât mai bine.

Din câte știu eu, acesta este compromisul pe care va trebui să îl faceți în Instructables, astfel încât imaginile dvs. să fie intacte.

De exemplu, imaginea de mai sus este o dimensiune a pânzei de 600x450, cu o imagine de 382x206 aruncată în ea și centrată, astfel încât să avem un spațiu alb egal, deasupra și dedesubt. Imaginea se afișează aproximativ în dimensiunea originală, cred că Instructables ar putea să o extindă la 640x480 (extindere neglijabilă), deci cam asta este cel mai bun lucru pe care îl putem face cu acea imagine originală.

5. NU aveți încredere în previzualizare sau în modul în care arată imaginea dvs. în primele câteva ore după ce le-ați încărcat în Instructable! Indiferent de motiv, dimensiunile imaginilor nu par să rămână coerente până la câteva ore după ce le-ați încărcat.

De fiecare dată, când introduceți o imagine pentru prima dată, se pare că Instructables va afișa acea imagine corect, indiferent de dimensiunea sau raportul de aspect al acelei imagini. Poate chiar să rămână afișat corect pentru o anumită perioadă de timp după aceea, dar NU FIȚI FOOLED pentru că, în cele din urmă, le va redimensiona și vă va da probleme dacă nu respectați regula 4: 3!

Sper că acest lucru vă va ajuta și vă rog, dacă găsiți o cale mai bună sau aveți alte indicii, anunțați-mă!