# Kuvasuhteet selitettynä: 1:1, 4:5, 9:16, 16:9 ja muut

[Canonical HTML page](https://gradiently.design/fi/guide/aspect-ratios-explained)

Pikselikoot vaihtelevat alustoittain, mutta muotoja on vain muutama. Kun opit ne ja niitä yhdistävän laskutavan, et enää koskaan litistä suunnitelmaasi.

## The short version

- Kuvasuhde ilmaisee kuvan leveyden ja korkeuden suhteen muodossa leveys:korkeus.
- Saat minkä tahansa koon kuvasuhteen jakamalla molemmat luvut niiden suurimmalla yhteisellä tekijällä. Näin 1920×1080 muuttuu suhteeksi 16:9.
- Saat uuden koon samalla kuvasuhteella kertomalla uuden leveyden suhteen korkeusluvulla ja jakamalla tuloksen sen leveysluvulla.
- Sosiaalisen median tärkeimmät kuvasuhteet ovat 1:1, 4:5, 9:16, 16:9 ja 1,91:1.
- Kuvasuhteen muuttaminen edellyttää aina rajaamista, tilan lisäämistä tai uudelleentaittoa. Venyttäminen vääristää kuvaa.

**Kuvasuhde** kertoo kuvan muodon: sen leveyden suhteessa korkeuteen kahtena lukuna, esimerkiksi 16:9. Video koossa 1920×1080 ja pikkukuva koossa 1280×720 ovat erikokoisia mutta molemmat suhteessa 16:9, joten ne skaalautuvat toisikseen ilman rajausta. Useimmat ”väärän koon” suunnitteluongelmat johtuvat oikeastaan väärästä muodosta.

## Yleiset kuvasuhteet ja niiden käyttökohteet

- 1:1 neliö: 1080 × 1080
- 4:5 pystykuva: 1080 × 1350
- 2:3 Pin-julkaisu: 1000 × 1500
- 9:16 pystymuoto: 1080 × 1920
- 4:3 klassinen: 1600 × 1200
- 16:9 laajakuva: 1920 × 1080
- 1,91:1 linkkikortti: 1200 × 630
- 3:1 otsake: 1500 × 500

Kahdeksan muotoa kattaa lähes kaiken suunnittelun. Piirretty mittakaavaan neliöstä kapeaan otsakkeeseen.

| Suhde | Muoto | Tyypillinen koko | Käyttökohde |
| --- | --- | --- | --- |
| 1:1 | Neliö | 1080×1080 | Instagram-neliö, Facebook- ja LinkedIn-julkaisut, soittolistakannet |
| 4:5 | Pystykuva | 1080×1350 | Instagramin, Threadsin, Facebookin ja X:n pystyjulkaisut |
| 3:4 | Pystykuva | 1080×1440 | Instagramin julkaisurajaus profiiliruudukossa |
| 2:3 | Korkea pystykuva | 1000×1500 | Pinterestin Pin-julkaisut |
| 9:16 | Pystymuoto | 1080×1920 | Tarinat, Reels, TikTok, Shorts, WhatsApp-tila |
| 4:3 | Klassinen vaakakuva | 1600×1200 | Vanhat diat, Dribbble-julkaisut, Google Business -julkaisut koossa 1200×900 |
| 16:9 | Laajakuva | 1920×1080 | YouTube-pikkukuvat, diat, verkkosivujen pääkuvat, X- ja Bluesky-julkaisut |
| 1,91:1 | Leveä kortti | 1200×630 | Linkkiesikatselut ja Open Graph -kuvat |
| 3:1 ja 4:1 | Banneri | 1500×500, 1584×396 | X-otsakkeet, LinkedIn-bannerit |

Yksi suhde, monta alustaa. Kun kaksi formaattia jakaa kuvasuhteen, sama suunnitelma palvelee molempia skaalattuna.

Kaikkien alustojen tarkat pikselikoot löytyvät artikkelista [sosiaalisen median kuvakoot](https://gradiently.design/fi/guide/social-media-image-sizes). Huomaa, kuinka vähän muotoja on. Kun hallitset suhteet 1:1, 4:5, 9:16 ja 16:9, voit kattaa suurimman osan brändin somenäkyvyydestä.

## Kuvasuhteen laskeminen

Jaa leveys ja korkeus suurimmalla luvulla, jolla molemmat jakautuvat tasan. Sitä kutsutaan suurimmaksi yhteiseksi tekijäksi. Jäljelle jää kuvasuhde supistetuimmassa muodossaan.

1. **Aloita koosta** Esimerkiksi 1080×1350, Instagramin pystyjulkaisu.
2. **Etsi suurin yhteinen tekijä** Suurin luku, jolla sekä 1080 että 1350 jakautuvat tasan, on 270.
3. **Jaa molemmat luvut** 1080 ÷ 270 = 4 ja 1350 ÷ 270 = 5. Kuvasuhde on 4:5.
4. **Tai käytä desimaalilukua** Jaa leveys korkeudella: 1080 ÷ 1350 = 0,8. Desimaalit auttavat hankalissa muodoissa, kuten 1200×630, jonka suhde on noin 1,91 eli 1,91:1.

Jos et halua laskea käsin, nämä muutamat JavaScript-rivit tekevät saman selaimen konsolissa.

```js
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720
```

Eukleideen algoritmi löytää tekijän, sitten skaalataan yksinkertaisesti. Liitä koodi minkä tahansa selaimen konsoliin.

## Koon muuttaminen muotoa muuttamatta

Skaalaa kuva kuvasuhde säilyttäen tällä kaavalla: **uusi korkeus = uusi leveys × suhteen korkeusluku ÷ suhteen leveysluku**. Jos 16:9-kuvan leveys on 1280 pikseliä, lasku on 1280 × 9 ÷ 16 = 720. Jos 4:5-kuvan leveys on 1600 pikseliä, lasku on 1600 × 5 ÷ 4 = 2000.

Toiseen suuntaan laskeminen on yhtä helppoa: uusi leveys = uusi korkeus × suhteen leveysluku ÷ suhteen korkeusluku. Jos 9:16-videon pitää olla 1280 pikseliä korkea, leveys on 1280 × 9 ÷ 16 = 720. Jos saat desimaaliluvun, pyöristä lähimpään kokonaispikseliin. Eroa ei näe.

## Mitä tapahtuu, kun kuvasuhde muuttuu

Skaalaus säilyttää muodon, kuvasuhteen muuttaminen ei. Sinulla on kolme toimivaa vaihtoehtoa: rajaa osa kuvasta pois, lisää tilaa sen ympärille tai järjestä suunnitelma uudelleen uuteen muotoon. Neljäs vaihtoehto, venyttäminen, vääristää jokaisen kirjaimen ja ympyrän. Ihmiset huomaavat sen heti.

### Rajaa tai venytä

- Nopeaa, mutta otsikko leikkautuu usein
- Venyttäminen litistää kirjaimet
- Logot päätyvät väärään paikkaan
- Taustat menettävät kirkkaan kohtansa
- Jokainen formaatti näyttää hieman väärältä

### Taita uudelleen

- Sanat rivittyvät muodon mukaan
- Kirjainten oikeat mittasuhteet säilyvät
- Logo asettuu kunkin formaatin sopivaan paikkaan
- Tausta piirtyy uudelleen kehystä varten
- Jokainen versio näyttää käyttökohteeseensa suunnitellulta

Keramiikkastudion 4:5-pystyjulkaisu kertoo kevään kurssien ilmoittautumisen alkaneen

Syötteen 4:5-versio: pinotut sanat sekä tilaa ylhäällä ja alhaalla.

Sama keramiikkastudion ilmoitus taitettuna 16:9-laajakuvaksi

Sama suunnitelma verkkosivun 16:9-pääkuvana: teksti leviää leveämmälle ja tausta piirtyy uudelleen kehystä varten.

Näin Gradientlyn koon muuttaminen toimii Prolla: valitse tarvitsemasi koot, niin jokainen kopio taitetaan uudelleen muotoonsa. Taustan Mark piirtyy joka kuvasuhteeseen tuoreeltaan yhden kuvan rajaamisen sijaan. [Yksi ilme, kaikki koot](https://gradiently.design/fi/guide/one-look-every-size) käy toiminnon läpi.

## Minkä kuvasuhteen valitsen julkaisuun

Kun alusta hyväksyy useita muotoja, valitse puhelimen näytöltä eniten tilaa vievä. Instagramissa se on 4:5, joka on neliötä korkeampi ja kestää parhaiten profiiliruudukon rajauksen. [Instagram-julkaisun koko](https://gradiently.design/fi/guide/instagram-post-size) kertoo miksi. Pinterestissä 2:3-Pin on vakio. Pidempiäkin on, mutta ne voivat leikkautua syötteessä, kuten [Pinterestin Pin-koko](https://gradiently.design/fi/guide/pinterest-pin-size) selittää.

Televisiossa tai kannettavalla katsottavaan sisältöön 16:9 on varma valinta. Siksi [YouTube-pikkukuvat](https://gradiently.design/fi/guide/youtube-thumbnail-size) ja diat käyttävät sitä. Puhelimen koko näytöllä katsottavaan sisältöön vain 9:16 täyttää näytön. Jos epäröit, suunnittele ensin pysty- ja laajakuvaversiot. Neliö ja 4:5 mahtuvat luontevasti niiden väliin.

## Kuvasuhde CSS:ssä

Verkossa CSS:n `aspect-ratio`-ominaisuus pitää laatikon muodossaan kaikilla leveyksillä. Se estää asettelua hyppimästä kuvien ja videoiden latautuessa. Kaikki nykyiset selaimet tukevat sitä. Katso [MDN:n aspect-ratio-ohje](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}
```

Kirjoita suhde vinoviivalla. Käytä kuvissa sen kanssa object-fit: cover -asetusta, jotta ne rajautuvat vääristymisen sijaan.

Kuvasuhteet ovat tärkeitä myös painossa ja videossa, joilla on omat käytäntönsä. Videoformaatit löytyvät artikkelista [sosiaalisen median videokoot](https://gradiently.design/fi/guide/social-video-sizes). Pikselimäärän ja fyysisen koon yhteyden selittää [DPI ja PPI](https://gradiently.design/fi/guide/dpi-vs-ppi).

## FAQ

### Mikä on kuvasuhde?

Se ilmaisee kuvan muodon leveyden ja korkeuden suhteena, kuten 16:9 tai 4:5. Saman kuvasuhteen kuvat skaalautuvat toisikseen ilman rajausta.

### Miten lasken kuvasuhteen?

Jaa leveys ja korkeus niiden suurimmalla yhteisellä tekijällä. Koossa 1920×1080 tekijä on 120, joten kuvasuhde on 16:9.

### Mikä on koon 1080×1350 kuvasuhde?

4:5, pystymuoto, jota käytetään Instagramin, Threadsin, Facebookin ja X:n pystyjulkaisuissa.

### Mikä ero on suhteilla 16:9 ja 9:16?

Ne ovat sama muoto kyljelleen käännettynä. 16:9 on vaakamuoto YouTubessa ja dioissa. 9:16 on pystymuoto tarinoissa, Reelseissä ja TikTokissa.

### Miten muutan kuvasuhdetta venyttämättä?

Rajaa kuvaa, lisää tilaa sen ympärille tai taita suunnitelma uudelleen uuteen muotoon. Uudelleenjärjestely tuottaa parhaan tuloksen tekstiä sisältävissä suunnitelmissa.