Storlek på instruktionsbara bilder: 13 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

Har du problem med att få bilder i rätt storlek? Är dina bilder alltför stora och överflödar ramen som den ovan? Detta instruerbara försök att sammanfatta vad jag har lärt mig att hantera detta problem.

Jag har fått höra av instruerbar personal att alla uppladdade bilder kopieras till olika bildförhållanden. Dessa pooler av bilder dras sedan från och storlek olika beroende på vilken enhet du tittar på instruerbara från. Det finns inget sätt att ange i den vanliga redaktören vilken storlek och förhållande som ska visas.

De föreslog sedan att "Ett annat alternativ som kan fungera är om du laddar upp bilder som har ett mer traditionellt bildförhållande. Allt från 16: 9 till 4: 3 ska visas mycket snyggt."

Lägg märke till att de säger att detta "kanske" fungerar. Här är vad jag har hittat i mina kampar för att få mina bilder att visas anständigt. (Observera att jag använder bilder från min "Rubiks kub gjort enkelt" instruerbara, därav alla dessa kubbilder!)

Bilden ovan är originalstorleken (600x195) som inte ligger i det intervallet av traditionella bildförhållanden. Som du kan se visar Instructables den här bilden förstorad alldeles för stor med vänster och höger sida avskuren. Låt oss se vad vi kan göra för att få denna bild att visas korrekt.

Steg 1: Låt oss prova bildförhållandet 16: 9

Så låt oss prova bildförhållandet 16: 9 (bredd: höjd). Jag behåller den ursprungliga bredden på 600 pixlar, 16: 9 betyder att höjden måste vara 338 pixlar så vi gör en dukstorlek på 600x338 och släpper den 600x195 bilden in i den.

Så låt oss se hur denna 600x338 (16: 9 bildförhållande) bild ser ut. Så intressant, när jag släppte in den här bilden och förhandsvisade den, passade den perfekt - vänster och höger kant klipptes inte av! Jag tog en skärmdump av den bara för bevis, se den i nästa bild.

Men när jag ser detta i min webbläsare (Chrome) är det jag ser i bilden ovan att höger och vänster sida igen huggs av! Så från detta experiment verkar det som att det inte löser våra problem att ändra storlek till 16: 9 bildförhållande!

Som en sidnotering är 16: 9 det "nya" vanliga bildförhållandet som kallas "widescreen" medan 4: 3 är den gamla skolans "helskärm" som var vanligt på TV -dagarna. Ja, du tusenåriga har förmodligen ingen aning om vad jag pratar om.

Steg 2: 16: 9 Bild Nyuppladdat som visat i förhandsgranskning

Den här bilden är skärmdumpen som visar att vår 16: 9 -bild ser perfekt ut i förhandsgranskningen. Framgång eller hur? Tja, inte så snabbt - se vad som händer när vi faktiskt ser den här sidan i vår webbläsare (Chrome)! Vänster och höger kant är avskurna igen! Gå bara tillbaka för att låta föregående bild och se själv.

Lärdom - lita inte på förhandsgranskningen! Det som ser bra ut i förhandsgranskningen återges annorlunda vid faktisk visning med en webbläsare!

Dessutom, ja, det finns mycket vitt utrymme under min bild. Det beror på att jag tappade en 600x195 bild till en 600x338 duk och lade den överst, så det finns allt det tomma vita utrymmet längst ner. Vad kan vi göra åt det? Tja … vi ska försöka ta itu med det i en senare bild.

Så låt oss fortsätta att se hur vi kan få denna bild att visas i sin helhet.

Steg 3: 16: 9 Visas med L & R -sidor avskurna

Bara för ordens skull, om din webbläsare av någon anledning visar dessa 16: 9 -bilder perfekt, är det här vad jag pratar om. Här är en skärmdump av hur jag ser min 16: 9 -bild i steg 1 som visas efter att "ha lagt sig" efter den första förhandsgranskningen - märk att vänster och höger är avskurna.

Om du ser min steg 1 -bild visas perfekt, ja, bra. Låt mig veta! Men det är så här jag ser det. Ja, det är mycket bättre än originalbilden från titelsidan, men det är fortfarande avskuret. Så för mig, trots råd från instruktörspersonal, minskar inte bildförhållandet 16: 9 det riktigt. Låt oss gå vidare till bildförhållandet 4: 3.

Steg 4: Låt oss prova bildförhållandet 4: 3

Så låt oss prova bildförhållandet 4: 3. Jag behåller den ursprungliga bredden på 600 pixlar, 4: 3 betyder att höjden måste vara 450 pixlar så vi gör en dukstorlek på 600x450 och släpper den 600x195 bilden in i den.

Hur ser denna 600x450 (4: 3 bildförhållande) bild ut?

Återigen, när jag först släpper in den, ser bilden bra ut (förutom allt det vita utrymmet längst ner). Vänster och höger visas fint. Om du tittar på den i en webbläsare verkar det som att höger och vänster fortsätter att visas fint.

Som tidigare nämnts beror allt det tomma vita utrymmet under bilden på att jag tappade min 600x195 bild till en 600x450 duk och bara placerade den högst upp.

Lärdom - 4: 3 bildförhållande verkar krävas så att höger och vänster sida inte skärs av. Tyvärr betyder det att det blir mycket vitt utrymme för bilder som är korta och breda, eftersom du måste släppa dessa bilder till en 4: 3 -stor duk. Ja, du kan centrera din bild så att det finns lika vitt utrymme på toppen och botten, men oavsett kommer det att finnas mycket vitt utrymme ovanför eller under din bild, men så vitt jag vet är detta kompromissen måste göra i instruktioner så att dina bilder visas intakta.

Steg 5: 4: 3 Med bildcentrerad

Här är samma 600x195 bild tappad i en 600x450 duk men centrerad så att det finns lika tomt vitt utrymme på toppen och botten. Ser lite bättre ut, texten verkar inte så långt åtskild från bilden.

Steg 6: 4: 3 Med bilden längst ner

Och slutligen, här är samma bild tappade in och flyttade till botten. Nu finns det massor av tomt vitt utrymme ovanpå bilden. Bilden är nu verkligen åtskild från titelfältet, men det är närmare texten. Så det här är dina kompromisser och lärdomar:

• 4: 3 verkar vara det bildförhållande du behöver använda för att bilder ska visas i sin helhet i Instructables.
• lita inte på förhandsgranskningen - den kan visa din bild perfekt, men delar kan trunkeras i själva webbläsaren

Steg 7: Vad är minsta bredd?

Låt oss nu se vad minsta bredd ska vara. Bilden som visas är storlek 382x206, nära 2: 1, det verkar verkligen enormt? Uppenbarligen har Instructables förstorat bilden så att den passar en viss bredd, förmodligen 640 pixlar, jag är inte säker.

Men den passar eftersom den är mer "fyrkantig" - det vill säga att den inte är för bred för sin höjd. Åh vänta, jag blev lurad av den förhandsgranskningen igen! Det passar faktiskt inte - R & L -sidorna avkortas igen.

Egentligen är det här udda, det är inte bara förhandsgranskningen som trasslat till. Jag tittade faktiskt på den i webbläsaren och först gjordes den ordentligt (dvs R & L -kanterna klipptes inte av). Men när jag tittar på den via webbläsaren igen, gör bilden nu storleksändringar med R & L -kanterna avkortade. Udda.

Så låt oss försöka göra bilden mindre. Vi krymper bilden till 200x108, med samma bildförhållande 2: 1.

Steg 8: Minskar bilden men behåller bildförhållandet

Så jag ändrar storleken på den bilden till 200x108, med samma bildförhållande 2: 1.

Nu verkar det passa igen först (med upplösningen (bildkvaliteten) försämrades kraftigt!) Men självklart tittar du förmodligen på det och det passar inte alls och ser exakt ut som originalbilden förutom att originalet har bättre upplösning. Återigen expanderar Instructables bilden så att den passar en viss bredd så det är därför denna mindre (200x108) bild ser så hemsk ut, mycket värre än den ursprungliga 382x206.

Jag säger "förmodligen" eftersom jag verkligen inte har en aning om hur Instructables visar dessa bilder i din webbläsare. Av vilken anledning som helst, om jag uppdaterar min cache och granskar denna instruerbara, verkar mina bildstorlekar inte vara konsekventa så jag vet verkligen inte vad Instructables gör förutom att det kan vara inkonsekvent. Således är målet med denna instruerbara - att ta reda på hur man storlekar bilder så att de visas åtminstone något konsekvent!

Steg 9: Bevis på att bilderna görs korrekt först

Här är vad jag såg först omedelbart efter att jag laddat upp bilden - det passar! (Observera att jag var tvungen att passa in ovanstående skärmdump i en bild på 1600x1200 (dvs. 4: 3 -förhållande) för att få Instructables att visa hela skärmdumpen!)

Men självklart vet du när du tittar på den bilden ett par glider tillbaka nu, det passar inte längre. Låt oss se vad minsta bredd måste vara för att den ska passa.

Steg 10: Försöker 382x287 (4: 3 -förhållande)

Jag behöll 382 -bredden och tappade den ursprungliga 382x206 -bilden i en 382x287 -duk för att göra det till ett 4: 3 -bildförhållande eftersom vi tidigare har upptäckt att Instructable behöver en bild för att passa det 4: 3 -förhållandet för att visa den i sin helhet.

Så nu finns det mycket tomt vitt utrymme under. Det passar med ingenting hugget av, men igen har det utökats för att fylla en viss bredd, så bilden är inte skarp. Låt oss försöka hitta vad denna perfekta instruerbara bredd är.

Steg 11: Bredda bilden från 300x206 till 600x206 för att se om den visas bättre

Jag tappade den ursprungliga 382x206 (2: 1) bilden till en 600x206 (3: 1) duk bara för att se om en utvidgning till 600 pixlar skulle få Instructables att visa hela bilden. Återigen, först gjorde det det, men som du kan se gör det inte det nu.

Detta är det riktigt udda - varje gång, när du först släpper in en bild, verkar det som om Instructables kommer att visa bilden korrekt, oavsett bildens storlek eller bildförhållande. Den här gången loggade jag till och med ut från Instructables och stängde den fliken och besökte sedan denna Instructable "färska" så att säga för att verifiera om bilden fortfarande visas korrekt. Vanligtvis är detta tillräckligt för att tillåta Instructable att göra sitt och börja ändra storlek på bilderna som inte är i bildförhållandet 4: 3 och visa dem med vänster och höger sida avskurna.

Till min förvåning förblev de första gångerna jag besökte den här instruerbara "färska" bilden i sin helhet, men tyvärr, efter att jag gick iväg för att göra något annat och kom kanske någon timme senare så började denna bild visas förstorad med L & R -sidorna avkortade igen precis som du ser det ovan.

Varför eller hur händer detta? Jag har ingen aning. Jag har ingen aning om varför vänta en tid efter att ha laddat upp en bild skulle få Instructables att göra den annorlunda, men det gör det. Som bevis visar jag min skärmbild av ovanstående bild som visas perfekt under de första åh, 10-15 minuter efter att jag hade laddat upp den i nästa bild.

Steg 12: Bevis på att bilder visas korrekt initialt efter uppladdning

Här är en skärmdump som visar den 600x206 bilden som visas i sin helhet direkt efter uppladdning. Detta är en skärmdump av föregående bild. Gå tillbaka till föregående bild och du kan se hur uppslukad bilden är nu!

Observera att min skärmdump faktiskt var stor 1563x766 men som jag lärde mig från mina experiment i början av denna instruerbara, visste jag eftersom det inte passade det 4: 3 bildförhållandet (1563x766 är ungefär 4: 2) så om jag skulle har precis laddat upp den skärmdumpen i sin ursprungliga storlek Instructable skulle avkorta kanterna. Så jag tappade den bilden i en 4: 3 -duk så det är därför det finns gott om tomt vitt utrymme under min skärmdump.

Observera att skärmdumpen också togs innan jag ändrade titeln på steg 11 och skrev in all denna text om du undrar över det!

Lärdom - att visa din uppladdade bild i en webbläsare omedelbart efter att du har laddat upp den visar inte nödvändigtvis hur den kommer att visas i framtiden. Av vilken anledning som helst verkar nästan vilken storlek och/eller bildformat som helst visas snyggt direkt efter uppladdning, och till och med i cirka 10-15 minuter efter uppladdning och även efter att du loggat ut från Instructables och ser den färsk från en ny webbläsarsession osv.

Men vänta ungefär en timme eller mer, och saker förändras! Din bild, om den inte passar bildförhållandet 4: 3, kommer att justeras (vanligtvis förstorad) med Instructable så att kanterna trunkeras.

Steg 13: Bottom line - Vad jag lärde mig

Så slutresultatet - vad lärde jag mig?

1. För att visa en bild i sin helhet måste du ha ett bildförhållande på 4: 3 (bredd: höjd)!

2. Använd originalbilder som är stora med den högsta upplösningen du kan och släpp dem i en 4: 3 -duk. Om den är för stor kommer Instructables att minska den och du får fina skarpa bilder.

3. Om din bild är för liten (mycket mindre än 600 pixlar bred) kommer Instructable att expandera din bild och göra den minst 600ish pixlar bred och göra den mindre skarp. Jag säger "ish" eftersom jag inte riktigt vet exakt vilken bredd Instructable använder men det verkar nära 600. Det är förmodligen 640, vilket var en vanlig bredd tillbaka i gamla skolans rörmonitordagar.

600x450 och 640x480 är bildförhållanden 4: 3. Alla "full screen" -rörmonitorer från gamla skolan var 640x480 (bredd x höjd).

4. Vad ska jag göra om originalbilden inte är minst 600 pixlar bred? Om allt du kan göra är att släppa den i en duk som passar 4: 3 -förhållandet som visar din bild nära sin ursprungliga storlek. Om din ursprungliga bild är liten kommer det att finnas gott om tomt vitt utrymme, så försök att centrera bilden eller placera det vita utrymmet antingen ovanför eller under din bild och få det att se ut så bra du kan.

Så vitt jag vet är detta den kompromiss du måste göra i Instructables så att dina bilder visas intakta.

Som ett exempel är bilden ovan en 600x450 dukstorlek med en 382x206 bild tappad i den och centrerad så att vi har lika tomt vitt utrymme ovanför och under. Bilden visas ungefär i sin ursprungliga storlek, jag tror att Instructables kan utöka den till 640x480 (försumbar expansion) så det är ungefär det bästa vi kan göra med den originalbilden.

5. Lita INTE på förhandsgranskningen eller lita inte på hur din bild ser ut de första timmarna efter att du laddat upp den till Instructable! Av någon anledning verkar bildstorlekarna inte vara konsekventa förrän ett par timmar efter att du har laddat upp dem.

Varje gång, när du först släpper in en bild, verkar det som om Instructables visar den bilden korrekt, oavsett bildens storlek eller bildförhållande. Det kan till och med fortsätta att visas korrekt under en viss tid efteråt, men LÅT INTE LÅSAS, eftersom det så småningom kommer att ändra storlek på dem och ge dig problem om du inte följer den 4: 3 -regeln!

Hoppas detta hjälper och snälla, om du hittar ett bättre sätt eller har andra tips, låt mig veta!