Kuvasuhdelaskuri

Mikä on kuvasuhdelaskuri?

Kuvasuhdelaskuri määrittää suorakaiteen muotoisen muodon leveyden ja korkeuden välisen suhteen. Kuvasuhteet ilmaistaan muodossa leveys:korkeus (kuten 16:9 tai 4:3) ja ne ovat välttämättömiä videotuotannossa, valokuvauksessa, responsiivisessa web-suunnittelussa ja painoasettelussa. Tämä työkalu laskee kuvasuhteen pikselimitoista tai skaalaa mitat halutun suhteen mukaisiksi.

Kuvasuhteiden ymmärtäminen estää sisältöä näyttämästä venytetyltä tai rajatuoilta eri näytöillä. 16:9-video näyttää täydelliseltä laajakuva-TV:ssä mutta saa mustat palkit (letterboxing) 4:3-näytöllä. Suunnittelijat ja kehittäjät käyttävät kuvasuhteita luodakseen responsiivisia asetteluja, jotka säilyttävät mittasuhteet eri näyttöko'oilla.

Työkalun käyttöohje

Syötä leveys ja korkeus pikseleinä kuvasuhteen laskemiseksi. Vaihtoehtoisesti syötä tavoitesuhde ja yksi mitta toisen laskemiseksi. Työkalu supistaa suhteet yksinkertaisimpaan muotoonsa (1920x1080 muuttuu muotoon 16:9) ja näyttää yleiset esiasetukset pikakäyttöä varten.

Puuttuvan mitan laskeminen

Kuvasuhde ilmaisee leveyden ja korkeuden välisen suhteellisen yhteyden — riippumatta absoluuttisesta koosta. Suhde 16:9 tarkoittaa, että jokaista 16 leveysyksikköä kohden on 9 korkeusyksikköä. Koska suhde on koosta riippumaton, 160×90-esikatselukuva ja 3840×2160-4K-näyttö jakavat täsmälleen saman kuvasuhteen.

Mittasuhteiden säilyttämiseksi skaalatessa käytä näitä kahta kaavaa. Uuden korkeuden löytämiseksi uudesta leveydestä: uusi korkeus = uusi leveys × (alkuperäinen korkeus ÷ alkuperäinen leveys). Uuden leveyden löytämiseksi uudesta korkeudesta: uusi leveys = uusi korkeus × (alkuperäinen leveys ÷ alkuperäinen korkeus). Molemmat kaavat yksinkertaisesti soveltavat alkuperäistä suhdetta kertoimena.

Käytännön esimerkki: 1920×1080:n skaalaaminen

Aloitetaan Full HD -kehyksestä 1920×1080 pikseliä. Ensin yksinkertaistetaan suhde löytämällä 1920:n ja 1080:n suurin yhteinen tekijä (SYT). Euklidista algoritmia käyttäen: SYT(1920, 1080) = SYT(1080, 840) = SYT(840, 240) = SYT(240, 120) = 120. Jakamalla molemmat mitat 120:llä saadaan 16:9 — tuttu laajakuvasuhde.

Oletetaan nyt, että sinun täytyy skaalata kyseinen video 1280 pikselin leveyteen pienempää näyttöä varten. Sovella kaavaa: uusi korkeus = 1280 × (1080 ÷ 1920) = 1280 × 0,5625 = 720. Skaalattu kehys on 1280×720 — tunnetaan myös nimellä 720p HD — ja on yhä täsmälleen 16:9.

Pyöristysvaroitus: pikselimittojen on oltava kokonaislukuja. Pyöristä aina lähimpään kokonaislukuun. Videoenkoodauksessa pyöristä alaspäin lähimpään parilliseen lukuun välttääksesi koodekkivirheitä kromaottantoalinnoksessa (esim. YUV 4:2:0 vaatii parilliset mitat).

Yleiset kuvasuhteet ja niiden käyttökohteet

• 16:9 — HD- ja 4K-videon hallitseva standardi. Käytössä YouTubessa, Netflixissä, Twitchissä, moderneissa televisioissa ja useimmissa pöytäkonemonitoreissa. Edustavat resoluutiot: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD).
• 4:3 — Vanha standardi CRT-televisioille ja varhaisille tietokoneennäytöille. Käytetään yhä esityksissä, joissain iPad-malleissa ja vanhoissa elokuvaformaateissa. 1920×1080-laajakuvavideon näyttäminen 4:3-kuvaruudulla tuottaa vaakasuoria mustia palkkeja (letterboxing).
• 1:1 — Neliöformaatti. Välttämätön Instagram-syötteen julkaisuille, profiilikuville, sovellusten kuvakkeille ja albumikuvituksille. Helppo rajata mistä tahansa leveämmästä formaatista menettämättä kohdetta.
• 9:16 — 16:9:n pystysuora vastakohta. Älypuhelinnäyttöjen natiivi formaatti pystytilassa. Käytössä Instagram Storiesissa, TikTokissa, YouTube Shortsissa ja Snapchatissa.
• 21:9 — Ultraleveä elokuva- ja monitoriformaatti. Yleinen elokuvafilmeissä (usein näytetty muodossa 2,35:1 tai 2,39:1) ja ultraleveissä pelimonitoreissa. 16:9-sisältö saa pystysuoria mustia palkkeja (pillarboxing) 21:9-näytöllä.
• 3:2 — Klassinen 35mm-filmin suhde, siirretty useimpiin digitaalisiin järjestelmä- ja peilittömiin kameroihin. 15×10 cm:n tuloste on 3:2. Tyypillisiä resoluutioita ovat 6000×4000 (24 MP) ja 7952×5304 (42 MP).

Yleiset kuvasuhteet

• 16:9 — laajakuvastandardi HD/4K-videolle, nykyaikaisille näytöille, YouTubelle ja suoratoistopalveluille.
• 4:3 — perinteinen TV ja tietokonenäyttö, iPad, esitysdiat.
• 21:9 — ultralaajakuvanäytöt ja elokuvamainen sisältö.
• 1:1 — neliöformaatti, Instagram-julkaisut, profiilikuvat.
• 9:16 — pystyvideo mobiilisisältöön (Stories, TikTok, Shorts).

Letterboxing ja pillarboxing: mitä tapahtuu, kun suhteet eivät täsmää

Kun sisällön kuvasuhde ei vastaa säilön kuvasuhdetta, näytön on kompensoitava. Letterboxing lisää vaakasuorat mustat palkit ylä- ja alaosaan — tätä näet, kun katsot 2,39:1-elokuvateatterielokuvaa 16:9-televisiosta. Pillarboxing lisää pystysuorat mustat palkit vasemmalle ja oikealle — tätä näet, kun 4:3-lähetys näytetään 16:9-laajakuvaruudulla. Kun molemmat palkkirivit ilmestyvät (sisältö on pienempi kuin säilö molemmissa suunnissa), ilmiötä kutsutaan windowboxingiksi.

Vaihtoehto palkittamiselle on rajaaminen tai venyttäminen. Rajaaminen täyttää säilön, mutta leikkaa osan kuvasta pois. Venyttäminen täyttää säilön, mutta vääristää kuvaa — kasvot ja ympyrät muuttuvat soikeiksi. Kumpikaan ei ole ihanteellinen, minkä vuoksi oikean lähtösuhteen valitseminen alusta lähtien välttää jälkituotannon hankaluudet.

Yleisiä virheitä, joita kannattaa välttää

• Suhteen huomioimatta jättäminen kokoa muutettaessa: uuden leveyden kirjoittaminen ilman korkeuden päivittämistä tuottaa vääristynyttä, venynyttä sisältöä. Lukitse aina kuvasuhde ennen koon muuttamista.
• Molempien mittojen itsenäinen pyöristäminen: leveyden ylöspäin ja korkeuden alaspäin pyöristäminen (tai päinvastoin) aiheuttaa pienen suhteen ajelehtimisen, joka kumuloituu useammissa kokoa muutettaessa. Pyöristä yksi mitta, sitten laske toinen pyöristetystä arvosta.
• Näyttösuhteen sekoittaminen tallennussuhteeseen: anamorfinen video (yleinen lähetyksessä ja Blu-raylla) tallentaa pikselit yhdessä suhteessa, mutta signaloi soittimelle näyttäminen toisessa suhteessa. Tarkista aina Sample Aspect Ratio (SAR) -metatiedot, ei pelkästään kehyksen mitat.
• Oletus, että 16:9 on universaali: mobiililähtöinen suunnittelu vaatii usein 9:16-resursseja. Sosiaaliset alustat voivat automaattisesti rajata kokoon 4:5 tai 1,91:1. Vie useita rajauksia yhden suhteen varaan luottamisen sijaan.

Kuvasuhteet web-suunnittelussa

CSS:ssä aspect-ratio-ominaisuus säilyttää responsiivisten elementtien mittasuhteet. Ennen tätä ominaisuutta kehittäjät käyttivät padding-bottom-kiertotapaa (padding-bottom: 56.25% kuvasuhteelle 16:9). Moderni CSS tekee siitä yksinkertaista: aseta aspect-ratio: 16 / 9 mille tahansa elementille. Tämä on ratkaisevan tärkeää videoiden upottamisessa, kuvagallerioiden luomisessa ja korttiasettelujen suunnittelussa, jotka näyttävät johdonmukaisilta eri laitteilla.

Usein kysytyt kysymykset

Mikä kuvasuhde on 1920x1080?

1920x1080 (Full HD) kuvasuhde on 16:9, joka on laajakuvaformaatin standardi. Muita yleisiä 16:9-resoluutioita ovat 2560x1440 (QHD), 3840x2160 (4K UHD) ja 1280x720 (HD). 16:9-suhde tuli teräväpiirtosisällön standardiksi, koska se tarjoaa laajemman näkökentän kuin 4:3 ja on käytännöllinen useimpiin sisältötyyppeihin.

Miten säilytän kuvasuhteen koon muuttamisessa?

Lukitse kuvasuhde muokkaustyökalussasi (yleensä ketjulinkki-kuvake leveys- ja korkeuskenttien välissä). Kun muutat yhtä mittaa, toinen mukautuu suhteessa. Matemaattisesti: uusi korkeus = uusi leveys / (alkuperäinen leveys / alkuperäinen korkeus). Esimerkiksi 1920x1080-kuvan koon muuttamiseksi 1280 leveäksi: 1280 / (1920/1080) = 720.

Mikä on SYT ja miksi sillä on merkitystä?

Suurin yhteinen tekijä (SYT) on suurin luku, jolla molemmat leveys ja korkeus voidaan jakaa ilman jakojäännöstä. Jakamalla molemmat mitat SYT:llä suhde pelkistyy yksinkertaisimpaan muotoonsa. Esimerkiksi SYT(1280, 720) = 80; 1280 ÷ 80 = 16 ja 720 ÷ 80 = 9, antaen 16:9. Ilman yksinkertaistamista näkisit 1280:720 tutun 16:9-tunnisteen sijaan.

Onko 4:3 todella sama kuin 1,33:1?

Kyllä. Kuvasuhteet voidaan ilmaista leveys:korkeus kokonaisluvuilla (4:3) tai desimaalilukuna (1,33:1, jossa 4 ÷ 3 ≈ 1,333). Elokuva- ja elokuvateatteri käyttävät perinteisesti desimaaliformaattia — 1,85:1 (litteä laajakuva) ja 2,39:1 (anamorfinen) — kun taas video ja web-suunnittelu suosivat kaksoispistejä kokonaislukulukujen kanssa. Tämä laskin näyttää molemmat: yksinkertaistetun suhteen (16:9) ja desimaaliekvivalentin (1,7778).