Određivanje veličine slika koje se mogu uputiti: 13 koraka

2025 Autor: John Day | [email protected]. Zadnja izmjena: 2025-01-13 06:57

Imate li problema s pravilnom veličinom slika? Da li su vaše slike prevelike i prelijevaju okvir poput gornjeg? Ovi instruktivni pokušaji sažimaju ono što sam naučio o rješavanju ovog problema.

Osoblje za instrukcije mi je reklo da se sve otpremljene slike dupliraju u različite razmere. Ova zbirka slika tada se izvlači i razlikuje u veličini, ovisno o tome s kojeg uređaja gledate upute. Ne postoji način da u redovnom uređivaču navedete veličinu i omjer za prikaz.

Zatim su predložili da "Druga opcija koja bi mogla funkcionirati je ako postavite slike tradicionalnijeg omjera. Sve od 16: 9 do 4: 3 bi se trebalo prikazati vrlo lijepo."

Primijetite da kažu da bi ovo "moglo" uspjeti. Evo šta sam otkrio u svojim borbama da moje slike budu pristojno prikazane. (Imajte na umu da koristim slike sa moje instrukcije "Rubikova kocka je olakšana", otuda sve te slike kocke!)

Gornja slika je izvorne veličine (600x195) koja nije u tom rasponu tradicionalnih omjera širine i visine slike. Kao što vidite, Instructables prikazuje ovu sliku uvećanu sa prevelikom lijevom i desnom stranom. Pogledajmo šta možemo učiniti da se ova slika pravilno prikaže.

Korak 1: Pokušajmo omjer širine i visine 16: 9

Pokušajmo omjer slike 16: 9 (širina: visina). Zadržat ću izvornu širinu od 600 piksela, 16: 9 znači da visina mora biti 338 piksela pa ćemo napraviti platno veličine 600x338 i ubaciti tu sliku 600x195.

Pa da vidimo kako izgleda ova slika 600x338 (omjer širine i visine 16: 9). Zanimljivo, kad sam ubacio ovu sliku i pregledao je, savršeno se uklopila - lijevi i desni rub nisu bili odsječeni! Napravio sam snimak ekrana samo za dokaz, pogledajte ga na sljedećem slajdu.

Ali, kad ovo pogledam u svom pregledniku (Chrome), ono što vidim na gornjoj slici je da su desna i lijeva strana ponovno odsječene! Dakle, iz ovog eksperimenta izgleda da promjena veličine na omjer 16: 9 neće riješiti naše probleme!

Kao napomenu, 16: 9 je "novi" zajednički omjer širine i visine poznat kao "široki ekran", dok je 4: 3 stari školski "cijeli ekran" koji je bio uobičajen u doba televizijske emisije. Da, ti milenijalci vjerovatno nemaju pojma o čemu pričam.

Korak 2: 16: 9 Svježe otpremljena slika prikazana u pregledu

Ova slika je snimak ekrana koji pokazuje da naša slika u omjeru 16: 9 izgleda savršeno u pregledu. Uspeh zar ne? Pa, ne tako brzo - pogledajte što se događa kada zaista pregledamo ovu stranicu u svom pregledniku (Chrome)! Lijevi i desni rub ponovo su skraćeni! Samo se vratite da pustite prethodni slajd i uvjerite se sami.

Naučena lekcija - ne vjerujte pregledu! Ono što izgleda dobro u pregledu postaje drugačije prikazano pri stvarnom gledanju pomoću preglednika!

Takođe, da, ispod moje slike ima puno bijelog prostora. To je zato što sam sliku 600x195 spustio u platno 600x338 i stavio je na vrh, tako da na dnu ima sav taj prazan bijeli prostor. Šta možemo učiniti po tom pitanju? Pa … pokušat ćemo to riješiti u kasnijem slajdu.

Pa nastavimo vidjeti kako možemo ovu sliku prikazati u cijelosti.

Korak 3: 16: 9 Prikazano sa odsječenim stranama L&R

Samo za zapisnik, u slučaju da iz bilo kojeg razloga vaš preglednik savršeno prikazuje ove slike 16: 9, o tome govorim. Evo snimke zaslona kako vidim svoju sliku u omjeru 16: 9 u 1. koraku prikazanu nakon "namještanja" nakon početnog pregleda - primjetite da su lijeva i desna odsječene.

Ako vidite da je moja slika 1. koraka prikazana savršeno, pa, odlično. Javite mi! Ali ovako ja to vidim. Da, mnogo je bolja od originalne slike s naslovne stranice, ali je i dalje odsječena. Pa za mene, uprkos savjetima osoblja Instructables, omjer širine i visine 16: 9 to baš i ne smanjuje. Prijeđimo na omjer širine i visine 4: 3.

Korak 4: Pokušajmo s omjerom 4: 3

Pokušajmo omjer slike 4: 3. Zadržat ću originalnu širinu od 600 piksela, 4: 3 znači da visina mora biti 450 piksela, pa ćemo napraviti platno veličine 600x450 i ubaciti tu sliku 600x195.

Kako izgleda ova slika 600x450 (omjer širine i visine 4: 3)?

Opet, kad je prvi put ubacim, slika izgleda odlično (osim cijelog bijelog prostora pri dnu). Lijevo i desno prikazane su dobro. Gledajući u pregledniku, čini se da se desno i lijevo i dalje dobro prikazuju.

Kao što je ranije napomenuto, sav taj prazan bijeli prostor ispod slike je zato što sam svoju sliku veličine 600x195 spustio u platno veličine 600x450 i stavio je na vrh.

Naučena lekcija - čini se da je potreban omjer širine i visine 4: 3 kako se desna i lijeva strana ne bi odsjekle. Nažalost, to znači da će biti mnogo bijelog prostora za kratke i široke slike, jer ćete te slike morati ispustiti u platno veličine 4: 3. Da, mogli biste centrirati svoju sliku tako da postoji jednak bijeli prostor na vrhu i na dnu, ali bez obzira na to, bit će puno bijelog prostora iznad ili ispod vaše slike, ali koliko ja znam, ovo je kompromis koji ćete morate unijeti u Instructables tako da se vaše slike prikazuju netaknute.

Korak 5: 4: 3 sa slikom u centru

Ovdje je ista slika 600x195 ispuštena na platno 600x450, ali centrirana tako da na vrhu i dnu ima jednak prazan bijeli prostor. Izgleda malo bolje, tekst ne izgleda toliko odvojeno od slike.

Korak 6: 4: 3 sa slikom pri dnu

I na kraju, evo iste slike koja je pala i pomaknuta na dno. Sada postoji tona praznog bijelog prostora na vrhu slike. Slika je sada zaista odvojena od naslovne trake, ali je bliža tekstu. Ovo su vaši kompromisi i naučene lekcije:

• Čini se da je 4: 3 omjer širine i visine koji morate koristiti da bi se slike u potpunosti prikazale u Instructables.
• ne vjerujte pregledu - mogao bi savršeno prikazati vašu sliku, ali dijelovi mogu biti skraćeni u stvarnom pregledniku

Korak 7: Kolika je minimalna širina?

Pogledajmo sada koja bi minimalna širina trebala biti. Prikazana slika je veličine 382x206, blizu 2: 1, čini se zaista ogromnom, zar ne? Očigledno je da je Instructables uvećao sliku kako bi odgovarala određenoj širini, vjerovatno 640 piksela, nisam siguran.

Ali pristaje jer je više "kvadratnog oblika" - tj. Nije preširok za svoju visinu. Oh čekaj, opet me prevario taj pregled! Zapravo se ne uklapa - R&L strane su opet krnje.

Zapravo, ovo je čudno, nije samo pregled zabrljan. Zapravo sam ga pogledao u pregledniku i isprva se pravilno prikazao (tj. Rubovi istraživanja i razvoja nisu bili odsječeni). Ali gledajući to ponovo kroz pretraživač, sada se slika prikazuje promijenjene veličine sa skraćenim rubovima R&L. Nepar.

Pa pokušajmo smanjiti sliku. Smanjit ćemo sliku na 200x108, zadržavajući isti omjer slike 2: 1.

Korak 8: Smanjivanje slike, ali zadržavanje omjera slike

Tako sam promijenio veličinu slike na 200x108, zadržavajući isti omjer slike 2: 1.

Opet se čini da se u početku uklapa (s rezolucijom (kvalitetom slike) koja se znatno pogoršala)! bolja rezolucija. Opet, Instructables proširuje sliku kako bi odgovarala određenoj širini pa je ovo razlog zašto ova manja (200x108) slika izgleda tako užasno, mnogo gore od originalnih 382x206.

Kažem "vjerojatno" jer zaista nemam pojma kako Instructables prikazuje ove slike u vašem pregledniku. Iz bilo kojeg razloga, ako osvježim predmemoriju i pregledam ovaj Instructable, čini se da moje slike ne ostaju dosljedne pa zaista ne znam što Instructables radi osim što može biti nedosljedno. Stoga je cilj ovog Instructablea - shvatiti kako veličine slika tako da se prikazuju barem donekle dosljedno!

Korak 9: Dokažite da se slike isprva pravilno renderiraju

Evo šta sam prvo vidio odmah nakon postavljanja slike - odgovara! (Imajte na umu da sam gornji snimak ekrana morao uklopiti u sliku veličine 1600x1200 (tj. Omjer 4: 3) da bi Instructables prikazao cijeli snimak ekrana!)

Ali naravno da znate kad pogledate tu sliku koja sada klizi unatrag, više nije prikladna. Pogledajmo koja minimalna širina mora biti kako bi se uklopila.

Korak 10: Isprobavanje 382x287 (omjer 4: 3)

Zadržao sam širinu 382 i spustio originalnu sliku 382x206 u platno 382x287 kako bih imao omjer širine i visine 4: 3 jer smo ranije otkrili da Instructable -u treba slika koja odgovara omjeru 4: 3 kako bi se prikazala u cijelosti.

Tako da sada ispod ima puno praznog bijelog prostora. Odgovara bez ičega odsječenog, ali opet je prošireno kako bi ispunilo određenu širinu, tako da slika nije oštra. Pokušajmo otkriti koja je to savršena širina po Instructable -u.

Korak 11: Proširenje slike sa 300x206 na 600x206 kako biste provjerili prikazuje li se bolje

Ispustio sam originalnu sliku 382x206 (2: 1) u platno 600x206 (3: 1) samo da vidim hoće li se proširenjem na 600 piksela Instructables prikazati cijela slika. Opet, isprva jeste, ali kao što vidite sada ne.

Ovo je zaista čudna stvar - svaki put, kad prvi put ubacite sliku, čini se da će Instructables ispravno prikazati tu sliku, bez obzira na veličinu ili omjer slike. Ovaj put sam se čak i odjavio s Instructablesa i zatvorio tu karticu, a zatim ponovno posjetio ovaj Instructable "svjež" da kažem da provjerim je li slika i dalje pravilno prikazana. Obično je to dovoljno da omogući Instructable -u da učini svoje i počne mijenjati veličinu slika koje nisu u omjeru 4: 3 te ih prikazati odsječenim s lijeve i desne strane.

Na moje iznenađenje, prvih par puta kada sam ponovo pregledao ovu "svježu" instrukciju, ova slika je ostala prikazana u cijelosti, ali nažalost, nakon što sam otišao odraditi nešto drugo i došao otprilike sat vremena kasnije, ova slika se počela prikazivati uvećano sa L&R stranicama koje su ponovo skraćene baš kako vidite gore.

Zašto ili kako se to događa? Nemam pojma. Nemam pojma zašto bi čekanje određenog vremenskog perioda nakon postavljanja slike učinilo da Instructables to drugačije prikaže, ali to čini. Kao dokaz, pokazat ću snimku ekrana gornje slike koja se savršeno prikazuje u prvom oh, 10-15 minuta nakon što sam je postavila na sljedeći slajd.

Korak 12: Dokažite da se slike ispravno prikazuju nakon početka postavljanja

Evo snimke ekrana koja prikazuje sliku veličine 600x206 koja se prikazuje u cijelosti odmah nakon učitavanja. Ovo je snimak ekrana prethodnog slajda. Vratite se na prethodni slajd i videćete koliko je slika sada uspravljena!

Imajte na umu da je moj snimak ekrana zapravo bio veličine 1563x766, ali kako sam naučio iz mojih eksperimenata na početku ovog uputstva, znao sam jer ne odgovara omjeru širine i visine 4: 3 (1563x766 je otprilike 4: 2) pa ako bih upravo je postavio taj snimak ekrana u originalnoj veličini. Instructable će skratiti rubove. Pa sam tu sliku spustio u platno 4: 3 pa je zato ispod mog snimka ekrana puno praznog bijelog prostora.

Imajte na umu da je snimak ekrana snimljen i prije nego što sam promijenio naslov Koraka 11 i završio s upisivanjem cijelog ovog teksta u slučaju da se pitate o tome!

Naučena lekcija - pregled vaše učitane slike u pregledniku odmah nakon učitavanja neće nužno pokazati kako će se prikazivati u budućnosti. Iz bilo kojeg razloga, čini se da se slika gotovo bilo koje veličine i/ili omjera slike lijepo prikazuje odmah nakon učitavanja, pa čak i otprilike 10-15 minuta nakon postavljanja, pa čak i nakon što se odjavite s Instructables i pregledate je svježe iz nove sesije preglednika itd..

Ali pričekajte oko sat vremena ili više, i stvari će se promijeniti! Vaša slika, ako ne odgovara omjeru širine i visine 4: 3, bit će prilagođena (obično uvećana) pomoću instruktora tako da se rubovi odrežu.

Korak 13: Zaključak - ono što sam naučio

Zaključak - šta sam naučio?

1. Da biste sliku prikazali u cijelosti, potrebno je zadržati omjer širine i visine 4: 3 (širina: visina)!

2. Koristite originalne slike velike veličine s najvećom mogućom rezolucijom i ispustite ih u platno omjera 4: 3. Ako su prevelike, Instructables će smanjiti veličinu i imat ćete lijepe oštre slike.

3. Ako je vaša slika premala (široka manje od 600 piksela), Instructable će proširiti vašu sliku i učiniti je širokom najmanje 600 piksela, pa će biti manje oštra. Kažem "ish" jer ne znam tačno koju širinu koristi Instructable, ali čini se da je blizu 600. Vjerovatno je 640, što je bila uobičajena širina još u doba monitora starih školskih cijevi.

600x450 i 640x480 su omjeri 4: 3. Svi stari školski cevni monitori sa cijelim ekranom bili su 640x480 (širina x visina).

4. Šta učiniti ako vaša originalna slika nije široka najmanje 600 piksela? Otprilike sve što možete učiniti je spustiti je u platno koje odgovara omjeru 4: 3 i prikazuje vašu sliku blizu njezine izvorne veličine. Ako je vaša originalna slika mala, bit će puno praznog bijelog prostora, pa pokušajte centrirati sliku ili stavite bijeli prostor iznad ili ispod slike i učinite da izgleda najbolje što možete.

Koliko ja znam, ovo je kompromis koji ćete morati napraviti u Instructables -u tako da se vaše slike prikazuju netaknute.

Kao primjer, gornja slika je veličine platna 600x450 sa slikom 382x206 koja je ubačena u nju i centrirana tako da imamo jednak prazan bijeli prostor iznad i ispod. Slika se prikazuje otprilike u izvornoj veličini, mislim da je Instructables može proširiti na 640x480 (zanemarivo proširenje), pa je to najbolje što možemo učiniti s tom originalnom slikom.

5. NEMOJTE vjerovati pregledu ili vjerovati izgledu vaše slike prvih nekoliko sati nakon što ste ih učitali u Instructable! Iz bilo kojeg razloga izgleda da veličine slike ne ostaju dosljedne sve do nekoliko sati nakon što ste ih učitali.

Svaki put, kad prvi put ubacite sliku, čini se da će Instructables ispravno prikazati tu sliku, bez obzira na veličinu ili omjer slike. Možda će čak i ostati prikazivati ispravno neko vrijeme nakon toga, ali nemojte se zavaravati jer će im na kraju promijeniti veličinu i zadati vam probleme ako ne slijedite pravilo 4: 3!

Nadam se da će ovo pomoći i molim vas, ako pronađete bolji način ili imate neke druge savjete, javite mi!