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

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

Kaikkien alustojen tarkat pikselikoot löytyvät artikkelista sosiaalisen median kuvakoot. 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. 1

   Aloita koosta

   Esimerkiksi 1080×1350, Instagramin pystyjulkaisu.

2. 2

   Etsi suurin yhteinen tekijä

   Suurin luku, jolla sekä 1080 että 1350 jakautuvat tasan, on 270.

3. 3

   Jaa molemmat luvut

   1080 ÷ 270 = 4 ja 1350 ÷ 270 = 5. Kuvasuhde on 4:5.

4. 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.

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

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.

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 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 kertoo miksi. Pinterestissä 2:3-Pin on vakio. Pidempiäkin on, mutta ne voivat leikkautua syötteessä, kuten Pinterestin Pin-koko selittää.

Televisiossa tai kannettavalla katsottavaan sisältöön 16:9 on varma valinta. Siksi YouTube-pikkukuvat 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.

.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 */
}

Kuvasuhteet ovat tärkeitä myös painossa ja videossa, joilla on omat käytäntönsä. Videoformaatit löytyvät artikkelista sosiaalisen median videokoot. Pikselimäärän ja fyysisen koon yhteyden selittää DPI ja PPI.