Dimensionering af instruerbare billeder: 13 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:29

Har du problemer med at få billederne i korrekt størrelse? Er dine billedstørrelser alt for store og overfylder rammen som den ovenfor? Dette instruerbare forsøg på at opsummere, hvad jeg har lært at løse dette problem.

Jeg har fået at vide af instruerbare medarbejdere, at alle uploadede billeder kopieres til forskellige billedformater. Disse puljer af billeder trækkes derefter fra og størres forskelligt afhængigt af hvilken enhed du ser instruerbare fra. Der er ikke en måde at angive i den almindelige editor, hvilken størrelse og forhold der skal vises.

De foreslog derefter, at "En anden mulighed, der kan fungere, er, hvis du uploader billeder, der er et mere traditionelt billedformat. Alt fra 16: 9 til 4: 3 skal vises meget flot."

Bemærk, at de siger, at dette "måske" virker. Her er hvad jeg har fundet i mine kampe for at få mine billeder til at blive vist ordentligt. (Bemærk, jeg bruger billeder fra min "Rubiks terning gjort let" instruerbar, derfor alle disse terningebilleder!)

Ovenstående billede er dets originale størrelse (600x195), som ikke er i det område af traditionelle formatforhold. Som du kan se, viser Instructables dette billede forstørret alt for stort med venstre og højre side afskåret. Lad os se, hvad vi kan gøre for at få dette billede vist korrekt.

Trin 1: Lad os prøve størrelsesforholdet 16: 9

Så lad os prøve billedformatet 16: 9 (bredde: højde). Jeg beholder den originale bredde på 600 pixels, 16: 9 betyder, at højden skal være 338 pixels, så vi laver en lærredstørrelse på 600x338 og taber det 600x195 billede ind i det.

Så lad os se, hvordan dette 600x338 (16: 9 formatforhold) billede ser ud. Så interessant, da jeg tabte dette billede ind og fik et eksempel på det, passede det perfekt - venstre og højre kant blev ikke afskåret! Jeg tog et skærmbillede af det bare for bevis, se det i det næste dias.

Men når jeg ser dette i min browser (Chrome), er det, jeg ser i billedet ovenfor, at højre og venstre side igen er hugget af! Så fra dette eksperiment ser det ud til, at ændring af størrelsen til et 16: 9 -format ikke vil løse vores problemer!

Som en sidebemærkning er 16: 9 det "nye" almindelige billedformat kendt som "widescreen", hvorimod 4: 3 er den gamle skole "fuld skærm", der var almindelig tilbage i tv -dagene på tube. Ja, du tusindårige har sikkert ikke en anelse om, hvad jeg taler om.

Trin 2: 16: 9 Billede Nyligt uploadet som set i eksempelvisning

Dette billede er skærmoptagelsen, der viser, at vores 16: 9 -billede ser perfekt ud i eksempelvisningen. Succes ikke? Nå, ikke så hurtigt - se hvad der sker, når vi faktisk ser denne side i vores browser (Chrome)! Venstre og højre kant er afkortet igen! Bare gå tilbage for at lade forrige dias og se selv.

Lektion lært - stol ikke på forhåndsvisningen! Det, der ser fint ud i forhåndsvisningen, gengives anderledes ved faktisk visning med en browser!

Også, ja, der er meget hvidt mellemrum under mit billede. Det er fordi jeg tabte et 600x195 billede i et 600x338 lærred og lagde det øverst, så der er alt det blanke hvide mellemrum nederst. Hvad kan vi gøre ved det? Nå … vi vil prøve at løse det i et senere dias.

Så lad os fortsætte med at se, hvordan vi kan få dette billede vist i sin helhed.

Trin 3: 16: 9 vist med L & R -sider afskåret

Bare for ordens skyld, hvis din browser uanset årsagen viser disse 16: 9 -billeder perfekt, er det det, jeg taler om. Her er et skærmbillede af, hvordan jeg ser mit 16: 9 -billede i trin 1, der vises efter "indfældning" efter den første forhåndsvisning - bemærk, at venstre og højre er afskåret.

Hvis du ser mit trin 1 -billede blive vist perfekt, godt, godt. Lad mig vide! Men sådan ser jeg det. Ja, det er meget bedre end det originale billede fra titelsiden, men det er stadig afskåret. Så for mig, på trods af rådene fra Instructables -personalet, skærer billedformatet 16: 9 det ikke helt. Lad os gå videre til 4: 3 billedformat.

Trin 4: Lad os prøve 4: 3 -billedformat

Så lad os prøve billedformatet 4: 3. Jeg beholder den originale bredde på 600 pixels, 4: 3 betyder, at højden skal være 450 pixels, så vi laver en lærredstørrelse på 600x450 og taber det 600x195 billede ind i det.

Hvordan ser dette 600x450 (4: 3 formatforhold) billede ud?

Igen, når jeg først dropper det, ser billedet godt ud (undtagen alt det hvide mellemrum i bunden). Venstre og højre vises fint. Når man ser på det i en browser, ser det ud til, at højre og venstre fortsat vises fint.

Som tidligere bemærket er alt det blanke hvide rum under billedet, fordi jeg tabte mit 600x195 billede i et 600x450 lærred og bare placerede det øverst.

Lært lektion - 4: 3 billedformat ser ud til at være påkrævet, så højre og venstre side ikke skæres af. Desværre betyder det, at der vil være meget hvidt mellemrum til billeder, der er korte og brede, fordi du skal slippe disse billeder til et lærred på 4: 3. Ja, du kan centrere dit billede, så der er lige hvidt mellemrum på toppen og bunden, men uanset vil der være meget hvidt mellemrum over eller under dit billede, men så vidt jeg ved, er dette det kompromis, du vil skal lave i Instructables, så dine billeder vises intakte.

Trin 5: 4: 3 Med billede centreret

Her er det samme 600x195 billede faldet i et 600x450 lærred, men centreret, så der er lige tomt hvidt mellemrum på toppen og bunden. Ser lidt bedre ud, teksten virker ikke så langt adskilt fra billedet.

Trin 6: 4: 3 Med billede nederst

Og endelig er det samme billede faldet ind og flyttet til bunden. Nu er der masser af tomt hvidt mellemrum oven på billedet. Billedet er nu virkelig adskilt fra titellinjen, men det er tættere på teksten. Så disse er dine kompromiser og erfaringer:

• 4: 3 ser ud til at være det billedformat, du skal bruge for at billeder kan vises i deres helhed i Instructables.
• stol ikke på forhåndsvisningen - det viser muligvis dit billede perfekt, men dele kan blive afkortet i den faktiske browser

Trin 7: Hvad er minimumsbredden?

Lad os nu se, hvad minimumsbredden skal være. Billedet vist er størrelse 382x206, tæt på 2: 1, det virker virkelig stort ikke? Det er klart, at Instructables har forstørret billedet for at få det til at passe til en bestemt bredde, sandsynligvis 640 pixels, er jeg ikke sikker på.

Men den passer, fordi den er mere "firkantet" - dvs. den er ikke for bred til sin højde. Åh vent, jeg blev narret af den forhåndsvisning igen! Det passer faktisk ikke - R & L -siderne afkortes igen.

Faktisk er dette underligt, det er ikke kun forhåndsvisningen, der er rodet op. Jeg kiggede faktisk på det i browseren, og først blev det gengivet ordentligt (dvs. R & L -kanterne blev ikke afskåret). Men når man ser på det via browseren igen, bliver billedet nu ændret med størrelsen på R & L -kanterne afkortet. Ulige.

Så lad os prøve at gøre billedet mindre. Vi krymper billedet til 200x108, og beholder det samme 2: 1 billedformat.

Trin 8: Skrumpning af billedet, men bevarelse af billedformatet

Så jeg ændrer størrelsen på billedet til 200x108, og beholder det samme 2: 1 billedformat.

Nu ser det ud til at passe først (med opløsningen (billedkvaliteten) stærkt forringet!) Men selvfølgelig kigger du sikkert på det, og det passer slet ikke, og ligner nøjagtigt det originale billede undtagen originalen har bedre opløsning. Igen udvider Instructables billedet for at få det til at passe ind i en bestemt bredde, så dette mindre (200x108) billede ser så forfærdeligt ud, meget værre end det originale 382x206.

Jeg siger "sandsynligvis", fordi jeg virkelig ikke aner, hvordan Instructables viser disse billeder i din browser. Af en eller anden grund, hvis jeg opdaterer min cache og gennemgår denne instruks, synes mine billedstørrelser ikke at være konsistente, så jeg ved virkelig ikke, hvad Instructables gør, bortset fra at det kan være inkonsekvent. Således er formålet med denne Instructable - at finde ud af at størrelsen på billeder, så de vises i det mindste noget konsekvent!

Trin 9: Bevis for, at billeder gengives korrekt i starten

Her er hvad jeg så først umiddelbart efter upload af billedet - det passer! (Bemærk, at jeg skulle passe ovenstående skærmbillede ind i et 1600x1200 billede (dvs. 4: 3 -forhold) for at få Instructables til at vise hele skærmbilledet!)

Men du ved selvfølgelig, at når du ser på det billede, et par glider tilbage nu, passer det ikke længere. Lad os se, hvad den mindste bredde skal være for at få den til at passe.

Trin 10: Prøv 382x287 (4: 3 -forhold)

Jeg beholdt 382 -bredden og tabte det originale 382x206 -billede i et 382x287 -lærred for at gøre det til et 4: 3 -formatforhold, fordi vi tidligere har opdaget, at Instructable har brug for et billede, der passer til det 4: 3 -forhold for at vise det i sin helhed.

Så nu er der meget tomt hvidt rum nedenunder. Det passer med intet hugget af, men igen er det blevet udvidet til at fylde en vis bredde, så billedet ikke er skarpt. Lad os prøve at finde ud af, hvad denne perfekte instruerbare bredde er.

Trin 11: Udvidelse af billedet fra 300x206 til 600x206 for at se, om det viser sig bedre

Jeg tabte det originale 382x206 (2: 1) billede i et 600x206 (3: 1) lærred bare for at se, om udvidelse til 600 pixels ville få Instructables til at vise hele billedet. Igen, det gjorde det først, men som du kan se, gør det det ikke nu.

Dette er den virkelig mærkelige ting - hver gang, når du først slipper et billede ind, ser det ud til, at Instructables vil vise billedet korrekt, uanset størrelsen eller billedformatet på billedet. Denne gang loggede jeg endda ud af Instructables og lukkede denne fane og besøgte så denne Instructable "frisk" så at sige for at kontrollere, om billedet stadig vises korrekt. Normalt er dette nok til at give Instructable mulighed for at gøre sit og begynde at ændre størrelsen på de billeder, der ikke er i et 4: 3 -format og vise dem med venstre og højre side afskåret.

Til min overraskelse forblev de første par gange jeg genbesøgte denne instruktive "friske" dette billede vist i sin helhed, men ak, efter at jeg gik væk for at gøre noget andet og kom forbi måske en time eller deromkring, begyndte dette billede at blive vist forstørret med L & R -siderne afkortet igen ligesom du ser det ovenfor.

Hvorfor eller hvordan sker dette? Jeg aner det ikke. Jeg aner ikke, hvorfor en ventetid efter upload af et billede ville få Instructables til at gengive det anderledes, men det gør det. Som bevis viser jeg min skærmbillede af ovenstående billede perfekt i de første åh, 10-15 minutter efter jeg havde uploadet det i det næste dias.

Trin 12: Bevis for, at billederne vises korrekt i første omgang efter upload

Her er en skærmoptagelse, der viser, at 600x206 -billedet vises i sin helhed umiddelbart efter upload. Dette er en skærmoptagelse af det forrige dias. Gå tilbage til det forrige dias, og du kan se, hvor spændt billedet er nu!

Bemærk, at min skærmoptagelse faktisk var størrelse 1563x766, men som jeg lærte af mine eksperimenter i begyndelsen af denne instruerbare, vidste jeg, da den ikke passede til det 4: 3 -billedformat (1563x766 er omtrent 4: 2), så hvis jeg havde lige uploadet det skærmbillede i sin originale størrelse Instructable ville afskære kanterne. Så jeg tabte dette billede i et 4: 3 lærred, så derfor er der masser af tomt hvidt rum under mit skærmbillede.

Bemærk, at skærmbillede også blev taget, før jeg ændrede titlen på trin 11 og skrev færdig med al denne tekst, hvis du undrer dig over det!

Erfaring - visning af dit uploadede billede i en browser umiddelbart efter at du har uploadet, viser ikke nødvendigvis, hvordan det vil blive vist i fremtiden. Af en eller anden grund synes næsten alle størrelser og/eller billedformater at blive vist pænt umiddelbart efter upload, og endda i cirka 10-15 minutter efter upload og selv efter at du har logget ud af Instructables og set det frisk fra en ny browsersession osv..

Men vent cirka en time eller mere, og tingene ændrer sig! Dit billede, hvis det ikke passer til billedformatet 4: 3, justeres (normalt forstørret) med Instructable, så kanterne afkortes.

Trin 13: Bundlinje - hvad jeg lærte

Så bundlinjen - hvad lærte jeg?

1. For at få vist et billede i sin helhed er det et must at have et 4: 3 -formatforhold (bredde: højde)!

2. Brug originale billeder, der er store med den højeste opløsning, du kan, og slip dem i et 4: 3 -lærred. Hvis det er for stort, vil Instructables størrelsen reducere det, og du får flotte skarpe billeder.

3. Hvis dit billede er for lille (meget mindre end 600 pixels bred) Instructable vil udvide dit billede og gøre det mindst 600ish pixels bredt og dermed gøre det mindre skarpt. Jeg siger "ish", fordi jeg ikke rigtig ved præcis, hvilken bredde Instructable bruger, men det virker tæt på 600. Det er sandsynligvis 640, hvilket var en almindelig bredde tilbage i de gamle skolers rørmonitordage.

600x450 og 640x480 er 4: 3 billedformater. Alle gamle "full screen" rørmonitorer var 640x480 (bredde x højde).

4. Hvad skal jeg gøre, hvis dit originale billede ikke er mindst 600 pixels bredt? Det eneste du kan gøre er at tabe det i et lærred, der passer til 4: 3 -forholdet, der viser dit billede tæt på dets originale størrelse. Hvis dit originale billede er lille, vil der være masser af tomt hvidt mellemrum, så prøv at centrere dit billede eller læg det hvide mellemrum enten over eller under dit billede og få det til at se bedst ud.

Så vidt jeg ved, er dette det kompromis, du skal indgå i Instructables, så dine billeder vises intakte.

Som et eksempel er billedet ovenfor en 600x450 lærredstørrelse med et 382x206 billede faldet i det og centreret, så vi har lige tomt hvidt rum over og under. Billedet vises nogenlunde i sin originale størrelse, jeg tror, at Instructables muligvis udvider det til 640x480 (ubetydelig ekspansion), så det er omtrent det bedste, vi kan gøre med det originale billede.

5. Stol IKKE på forhåndsvisningen, eller stol ikke på, hvordan dit billede ser ud i de første par timer efter at have uploadet dem til Instructable! Af en eller anden grund synes billedstørrelser ikke at være konsistente før et par timer efter, at du har uploadet dem.

Hver gang, når du først dropper et billede, ser det ud til, at Instructables vil vise billedet korrekt, uanset størrelsen eller billedformatet på billedet. Det kan endda blive vist korrekt i et stykke tid bagefter, men lad dig ikke narre, fordi det i sidste ende vil ændre størrelsen på dem og give dig problemer, medmindre du følger denne 4: 3 -regel!

Håber dette hjælper og tak, hvis du finder en bedre måde eller har andre tip, så lad mig det vide!