Dimensjonering av instruerbare bilder: 13 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:24

Har du problemer med å få bildene i riktig størrelse? Har bildene dine en for stor størrelse og overløper rammen som den ovenfor? Denne instruerbare forsøk på å oppsummere det jeg har lært for å løse dette problemet.

Jeg har blitt fortalt av Instructable Staff at alle opplastede bilder dupliseres i forskjellige størrelsesforhold. Disse bildene blir deretter trukket fra og dimensjonert forskjellig avhengig av hvilken enhet du ser instruerbare fra. Det er ingen måte å spesifisere i den vanlige redaktøren hvilken størrelse og forhold som skal vises.

De foreslo deretter at "Et annet alternativ som kan fungere er hvis du laster opp bilder som er et mer tradisjonelt sideforhold. Alt fra 16: 9 til 4: 3 skal vises veldig pent."

Legg merke til at de sier at dette "kan" fungere. Her er hva jeg har funnet i kampene mine for å få bildene mine til å vises anstendig. (Legg merke til at jeg bruker bilder fra min "Rubiks kube gjort enkelt" instruerbare, derav alle kube -bildene!)

Bildet ovenfor er originalstørrelsen (600x195), som ikke er i det området med tradisjonelle størrelsesforhold. Som du kan se, viser Instructables dette bildet forstørret altfor stort med venstre og høyre side avskåret. La oss se hva vi kan gjøre for å få dette bildet til å vises riktig.

Trinn 1: La oss prøve størrelsesforholdet 16: 9

Så la oss prøve størrelsesforholdet 16: 9 (bredde: høyde). Jeg beholder den opprinnelige bredden på 600 piksler, 16: 9 betyr at høyden må være 338 piksler, så vi lager et lerret på 600 x 338 og slipper det 600 x 195 bildet inn i det.

Så la oss se hvordan dette 600x338 (16: 9 -størrelsesforholdet) bildet ser ut. Så interessant, da jeg droppet dette bildet og forhåndsviste det, passet det perfekt - venstre og høyre kant ble ikke kuttet av! Jeg tok et skjermbilde av det bare for bevis, se det i neste lysbilde.

Men når jeg ser dette i nettleseren min (Chrome), er det jeg ser på bildet ovenfor, at høyre og venstre side igjen er hugget av! Så fra dette eksperimentet ser det ut til at det å løse størrelsen på 16: 9 ikke vil løse problemene våre!

Som et sidebemerkning er 16: 9 det "nye" vanlige størrelsesforholdet kjent som "widescreen", mens 4: 3 er "fullskjerm" på gamle skolen som var vanlig tilbake på TV -dagene. Ja, du tusenårige har sannsynligvis ikke peiling på hva jeg snakker om.

Trinn 2: 16: 9 Bilde Nyopplastet som sett i forhåndsvisningen

Dette bildet er skjermbildet som viser at 16: 9 -bildet vårt ser perfekt ut i forhåndsvisningen. Suksess ikke sant? Vel, ikke så fort - se hva som skjer når vi faktisk ser denne siden i nettleseren vår (Chrome)! Venstre og høyre kant er avkortet igjen! Bare gå tilbake for å la forrige lysbilde og se selv.

Leksjon lært - ikke stol på forhåndsvisningen! Det som ser bra ut i forhåndsvisningen, gjengis annerledes i faktisk visning med en nettleser!

Også, ja, det er mye hvitt mellomrom under bildet mitt. Det er fordi jeg droppet et 600x195 bilde inn i et 600x338 lerret og la det på toppen, så det er alt det tomme hvite rommet nederst. Hva kan vi gjøre med det? Vel … vi prøver å ta opp det i et senere lysbilde.

Så la oss fortsette å se hvordan vi kan få dette bildet til å vises i sin helhet.

Trinn 3: 16: 9 vist med L & R -sider avskåret

Bare for ordens skyld, i tilfelle nettleseren din viser disse 16: 9 -bildene perfekt av en eller annen grunn, er dette det jeg snakker om. Her er et skjermbilde av hvordan jeg ser 16: 9 -bildet mitt i trinn 1 som vises etter "innfelling" etter den første forhåndsvisningen - legg merke til at venstre og høyre er avskåret.

Hvis du ser trinn 1 -bildet mitt vises perfekt, vel, flott. Gi meg beskjed! Men det er slik jeg ser det. Ja, det er mye bedre enn det originale bildet fra tittelsiden, men det er fortsatt avskåret. Så for meg, til tross for rådene fra Instructables -personalet, reduserer ikke størrelsesforholdet 16: 9 det helt. La oss gå videre til 4: 3 -sideforhold.

Trinn 4: La oss prøve 4: 3 -størrelsesforhold

Så la oss prøve 4: 3 -størrelsesforholdet. Jeg beholder den opprinnelige bredden på 600 piksler, 4: 3 betyr at høyden må være 450 piksler, så vi lager et lerret på 600x450 og slipper det 600x195 bildet inn i det.

Hvordan ser dette bildet på 600x450 (4: 3 -format) ut?

Igjen, når jeg først slipper det inn, ser bildet flott ut (bortsett fra alt det hvite rommet nederst). Venstre og høyre vises fint. Når du ser på det i en nettleser, ser det ut til at høyre og venstre ser ut til å fortsette å bli vist fint.

Som tidligere nevnt, er alt det tomme hvite rommet under bildet fordi jeg droppet bildet mitt på 600 x 195 i et lerret på 600 x 450 og bare plasserte det øverst.

Lært leksjon - 4: 3 -sideforhold ser ut til å være nødvendig, slik at høyre og venstre side ikke blir kuttet av. Dessverre betyr dette at det vil være mye hvitt mellomrom for bilder som er korte og brede, fordi du må slippe disse bildene til et lerret på 4: 3. Ja, du kan sentrere bildet ditt slik at det er like hvitt mellomrom på topp og bunn, men uansett vil det være mye hvitt mellomrom over eller under bildet ditt, men så vidt jeg vet er dette kompromisset må lage Instructables slik at bildene vises intakte.

Trinn 5: 4: 3 Med bildet sentrert

Her er det samme bildet på 600 x 195 falt ned i et lerret på 600 x 450, men sentrert slik at det er like hvitt mellomrom på toppen og bunnen. Ser litt bedre ut, teksten virker ikke så langt atskilt fra bildet.

Trinn 6: 4: 3 Med bildet nederst

Og til slutt, her er det samme bildet som falt inn og flyttet til bunnen. Nå er det massevis av tomt hvitt mellomrom på toppen av bildet. Bildet er nå skilt fra tittellinjen, men det er nærmere teksten. Så dette er dine kompromisser og erfaringer:

• 4: 3 ser ut til å være størrelsesforholdet du må bruke for at bildene skal vises i sin helhet i Instructables.
• ikke stol på forhåndsvisningen - den kan vise bildet ditt perfekt, men deler kan bli avkortet i selve nettleseren

Trinn 7: Hva er minimumsbredden?

La oss nå se hva minimumsbredden skal være. Bildet som vises er størrelse 382x206, nær 2: 1, det virker veldig stort ikke sant? Tydeligvis har Instructables forstørret bildet slik at det får en viss bredde, sannsynligvis 640 piksler, jeg er ikke sikker.

Men den passer fordi den er mer "firkantet" - det vil si at den ikke er for bred for høyden. Oh vent, jeg ble lurt av den forhåndsvisningen igjen! Det passer faktisk ikke - R & L -sidene er avkortet igjen.

Egentlig er dette rart, det er ikke bare forhåndsvisningen som har rotet til. Jeg så faktisk på det i nettleseren, og først ble det gjengitt ordentlig (det vil si at R & L -kantene ikke ble kuttet av). Men hvis du ser på det gjennom nettleseren igjen, gjengis bildet nå med størrelsen på FoU -kantene avkortet. Merkelig.

Så la oss prøve å gjøre bildet mindre. Vi krymper bildet til 200x108, og beholder det samme 2: 1 -størrelsesforholdet.

Trinn 8: Krymper bildet, men behold størrelsesforholdet

Så jeg endrer størrelsen på bildet til 200x108, og beholder det samme 2: 1 -størrelsesforholdet.

Nå ser det ut til at det først passet (med oppløsningen (bildekvaliteten) forverret kraftig!), Men selvfølgelig ser du sannsynligvis på det, og det passer ikke i det hele tatt, og ser akkurat ut som det opprinnelige bildet, bortsett fra at originalen har bedre oppløsning. Igjen, Instructables utvider bildet slik at det får en viss bredde, så derfor ser dette mindre (200x108) bildet så fryktelig ut, mye verre enn det opprinnelige 382x206.

Jeg sier "sannsynligvis" fordi jeg egentlig ikke aner hvordan Instructables viser disse bildene i nettleseren din. Uansett grunn, hvis jeg oppdaterer cachen min og gjennomgår denne instruksjonsboken, ser det ikke ut til at bildestørrelsene mine er konsekvente, så jeg vet ikke hva Instructables gjør, bortsett fra at det kan være inkonsekvent. Dermed er formålet med denne instruksjonsboken - å finne ut hvordan du skal formatere bilder slik at de vises minst konsekvent!

Trinn 9: Bevis på at bildene gjengis riktig først

Her er det jeg så først umiddelbart etter at jeg lastet opp bildet - det passer! (Vær oppmerksom på at jeg måtte passe skjermbildet ovenfor inn i et bilde på 1600x1200 (dvs. 4: 3 -forhold) for å få Instructables til å vise hele skjermbildet!)

Men selvfølgelig vet du at når du ser på det bildet et par glir tilbake nå, passer det ikke lenger. La oss se hva minimumsbredden må være for å få den til å passe.

Trinn 10: Prøver 382x287 (4: 3 -forhold)

Jeg beholdt 382 -bredden og droppet det opprinnelige 382x206 -bildet til et 382x287 -lerret for å gjøre det til et 4: 3 -størrelsesforhold fordi vi tidligere har oppdaget at Instructable trenger et bilde for å passe til det 4: 3 -forholdet for å vise det i sin helhet.

Så nå er det mye tomt hvitt mellomrom under. Det passer med ingenting som er hakket av, men igjen er det utvidet til å fylle en viss bredde, så bildet er ikke skarpt. La oss prøve å finne ut hva denne perfekte instruerbare bredden er.

Trinn 11: Utvid bildet fra 300x206 til 600x206 for å se om det vises bedre

Jeg droppet det originale 382x206 (2: 1) bildet til et 600x206 (3: 1) lerret bare for å se om utvidelse til 600 piksler ville få Instructables til å vise hele bildet. Igjen, det gjorde det først, men som du kan se, gjør det det ikke nå.

Dette er virkelig merkelig - hver gang, når du først legger inn et bilde, ser det ut til at Instructables vil vise bildet riktig, uansett størrelse eller størrelsesforhold på bildet. Denne gangen logget jeg til og med ut av Instructables og lukket den fanen, og så besøkte denne Instructable "frisk" så å si for å bekrefte om bildet fremdeles vises riktig. Vanligvis er dette nok til at Instructable kan gjøre sitt og begynne å endre størrelsen på bildene som ikke er i et 4: 3 -format og vise dem med venstre og høyre side avskåret.

Til min overraskelse forble jeg de første par gangene jeg besøkte denne Instructable "fresh" dette bildet i sin helhet, men akk, etter at jeg gikk bort for å gjøre noe annet og kom kanskje en time eller så senere, begynte dette bildet å vises forstørret med L & R -sidene avkortet igjen akkurat som du ser det ovenfor.

Hvorfor eller hvordan skjer dette? Jeg aner ikke. Jeg aner ikke hvorfor det å vente en periode etter opplasting av et bilde ville få Instructables til å gjengi det annerledes, men det gjør det. Som bevis vil jeg vise skjermbildet av bildet ovenfor som vises perfekt i det første oh, 10-15 minutter etter at jeg hadde lastet det opp i neste lysbilde.

Trinn 12: Bevis på at bildene vises riktig først etter opplasting

Her er et skjermbilde som viser at 600x206 bildet vises i sin helhet umiddelbart etter opplasting. Dette er et skjermbilde av det forrige lysbildet. Gå tilbake til forrige lysbilde, og du kan se hvor godt bildet er nå!

Vær oppmerksom på at skjermbildet mitt faktisk var 1563x766, men som jeg lærte av mine eksperimenter i begynnelsen av denne instruksjonsboken, visste jeg siden det ikke passet til det 4: 3 -størrelsesforholdet (1563x766 er omtrent 4: 2), så hvis jeg hadde lastet nettopp opp skjermdumpen i sin opprinnelige størrelse Instructable ville avkorte kantene. Så jeg droppet bildet til et 4: 3 -lerret, så det er derfor mye tomt hvitt mellomrom under skjermbildet mitt.

Vær oppmerksom på at skjermdumpen også ble tatt før jeg endret tittelen på trinn 11 og skrev inn all denne teksten i tilfelle du lurer på det!

Erfaring - visning av det opplastede bildet ditt i en nettleser umiddelbart etter at du har lastet det opp, viser ikke nødvendigvis hvordan det vil vises i fremtiden. Uansett grunn ser det ut til at nesten alle størrelser og/eller størrelsesforhold viser seg pent umiddelbart etter opplasting, og til og med i ca 10-15 minutter etter opplasting og til og med etter at du har logget deg ut av instrukser og ser det friskt fra en ny nettlesersession osv..

Men vent omtrent en time eller mer, og ting endrer seg! Bildet ditt, hvis det ikke passer til sideforholdet 4: 3, vil bli justert (vanligvis forstørret) med Instructable slik at kantene blir avkortet.

Trinn 13: Bottom line - Hva jeg lærte

Så konklusjonen - hva lærte jeg?

1. For å vise et bilde i sin helhet, er det et must å ha et sideforhold på 4: 3 (bredde: høyde)!

2. Bruk originale bilder som er store med den høyeste oppløsningen du kan, og slipp dem ned i et lerret på 4: 3 -forhold. Hvis den er for stor, vil Instructables gjøre den større, og du får flotte skarpe bilder.

3. Hvis bildet ditt er for lite (mye mindre enn 600 piksler bredt) vil Instructable utvide bildet ditt og gjøre det minst 600ish piksler bredt og dermed gjøre det mindre skarpt. Jeg sier "ish" fordi jeg egentlig ikke vet nøyaktig hvilken bredde Instructable bruker, men det ser ut til å være nærmere 600. Det er sannsynligvis 640, som var en vanlig bredde tilbake i gamle skolers rørmonitordager.

600x450 og 640x480 er 4: 3 -sideforhold. Alle "full screen" rørmonitorer på old school var 640x480 (bredde x høyde).

4. Hva skal jeg gjøre hvis det opprinnelige bildet ikke er minst 600 piksler bredt? Omtrent alt du kan gjøre er å slippe det ned i et lerret som passer 4: 3 -forholdet som viser bildet ditt i nærheten av originalstørrelsen. Hvis det originale bildet ditt er lite, vil det være mye tomt hvitt mellomrom, så prøv å sentrere bildet eller legg det hvite rommet enten over eller under bildet ditt og få det til å se best mulig ut.

Så vidt jeg vet er dette kompromisset du må inngå i Instructables slik at bildene dine vises intakte.

Som et eksempel er bildet ovenfor en 600x450 lerretstørrelse med et 382x206 bilde falt ned i det og sentrert slik at vi har like tomt hvitt mellomrom over og under. Bildet vises omtrent i sin opprinnelige størrelse, jeg tror Instructables kan utvide det til 640x480 (ubetydelig ekspansjon), så det er omtrent det beste vi kan gjøre med det originale bildet.

5. Ikke stol på forhåndsvisningen eller stol på hvordan bildet ditt ser ut de første timene etter at du har lastet dem opp til Instructable! Uansett grunn ser det ikke ut til at bildestørrelsene forblir konsistente før et par timer etter at du har lastet dem opp.

Hver gang, når du først slipper et bilde inn, ser det ut til at Instructables vil vise bildet riktig, uansett størrelse eller størrelsesforhold på bildet. Det kan til og med fortsette å vises riktig i en periode etterpå, men IKKE BLI LÅTT fordi det til slutt vil endre størrelsen på dem og gi deg problemer med mindre du følger denne 4: 3 -regelen!

Håper dette hjelper og vær så snill, gi meg beskjed hvis du finner en bedre måte eller har andre tips.