# Reddit-bannerin koko: yhteisön kansi 1920 × 384

[Canonical HTML page](https://gradiently.design/fi/guide/reddit-banner-size)

Subredditin banneri on pitkä ja ohut kaista, joka rajautuu eri tavalla eri näytöillä. Suunnittele se tekstuuriksi, jonka keskellä on yksi ajatus. Silloin se toimii kaikkialla.

## The short version

- Yhteisön Reddit-bannerin koko on 1920×384 pikseliä, 5:1-kaista subredditin yläreunassa.
- Reddit rajaa bannerin eri tavalla tietokoneella ja mobiilisovelluksessa, joten vasen ja oikea reuna voivat kadota puhelimella.
- Yhteisön kuvake on monissa asetteluissa bannerin vasemman alakulman lähellä. Jätä sinne pelkkää taustaa.
- Parhaat subreddit-bannerit ovat enimmäkseen tekstuuria tai väriä. Mahdolliset sanat ja tärkeä kuva pysyvät keskellä.
- Reddit-julkaisujen 1080×1080-neliökuva näkyy luotettavasti sekä tietokoneen että puhelimen syötteessä.

Yhteisön **Reddit-bannerin koko** on 1920×384 pikseliä, 5:1-kaista subredditin yläreunassa. Puhelimella Reddit näyttää siitä matalamman ja kapeamman rajauksen. Yhteisön kuvake on monissa asetteluissa vasemman alakulman päällä tai juuri alla. Käsittele siis banneria väri- tai tekstuurikaistana, pidä sanat ja tärkeä kuva keskikolmanneksessa ja jätä reunat sekä vasen alakulma taustaksi.

## Reddit-yhteisön bannerin mitat

| Kuva | Koko | Suhde |
| --- | --- | --- |
| Yhteisön banneri | 1920×384 px | 5:1 |
| Julkaisukuva | 1080×1080 px | 1:1 |
| Julkaisukuva, pysty | 1080×1350 px | 4:5 |

Banneri asetetaan Mod Tools -työkaluissa yhteisön ulkoasusta. Julkaisukuvat voivat olla muunkin muotoisia, mutta nämä näkyvät syötteissä siististi.

- Reddit-banneri 5:1: 1920 × 384
- LinkedIn-banneri 4:1: 1584 × 396
- X-otsake 3:1: 1500 × 500

Reddit-banneri kahden muun otsakkeen rinnalla samalla leveydellä. Suhteessa 5:1 se on ohuin, joten korkeussuunnassa on hyvin vähän tilaa.

Lataa tasaiset värit, kuvitukset ja tekstit PNG:nä, valokuvat laadukkaana JPEG:nä. Tee täsmälleen koko 1920×384, jotta Reddit ei venytä kuvaa. Suurella näytöllä näkyvä ohut kaista myös korostaa liukuvärin porrastumista. Hieman rakeisuutta ehkäisee sitä, kuten [liukuvärin porrastuminen](https://gradiently.design/fi/guide/gradient-banding) selittää.

## Reddit-bannerin rajautuminen puhelimella

Tietokoneen selaimessa banneri näkyy leveänä. Puhelimen Reddit-sovelluksessa suhde on toinen, joten vasen ja oikea reuna yleensä leikkautuvat ja kaista voi skaalautua. Mod Toolsin nykyversiosta riippuen voit ehkä ladata erillisen mobiilibannerin. Jos lataat vain yhden, suunnittele se kestämään mobiilirajaus.

| Alue | Vaakasuuntainen väli, px | Mitä sijoittaa |
| --- | --- | --- |
| Vasen reuna | 0-480 | Pelkkää taustaa: rajautuu puhelimella, lähellä kuvaketta |
| Keskusta | 480-1440 | Nimi, iskulause, tärkeä kuva |
| Oikea reuna | 1440-1920 | Pelkkää taustaa: rajautuu puhelimella |

Työkartta yhdelle tietokoneella ja puhelimella toimivalle bannerille. Tarkista subreddit molemmilla lataamisen jälkeen, sillä Redditin asettelut muuttuvat.

Reddit-yhteisön banneri koossa 1920 × 384, r/BalconyGardens ja iskulause keskellä pehmeää liukuväriä

Nimi ja iskulause keskikolmanneksessa. Tausta kantaa kaistan loput osat.

## Ideoita subreddit-banneriin

Yhteisöä arvioidaan sen jäsenten perusteella, mutta harkittu banneri kertoo, että paikasta pidetään huolta. Se vaikuttaa hausta saapuvan liittymispäätökseen. Se myös auttaa vakikävijää tunnistamaan yhteisön ruuhkaisessa syötteessä. Useimmat hyvät bannerit kuuluvat näihin tyyppeihin:

- **Pelkkä tekstuuri.** Liukuväri, kuvio tai materiaali yhteisön väreissä. Se ei kilpaile nimen kanssa eikä vanhene.
- **Leveä rajaus aiheesta.** Kaupungin siluetti kaupunkiyhteisölle, metsänpohja keräily-yhteisölle tai näppäimistön lähikuva mekaanisten näppäimistöjen yhteisölle, keskitettynä.
- **Nimi ja iskulause.** Vain jos iskulause lisää jotakin, kuten yhteisön tarkoituksen tai ohjenuoran.
- **Kausiversiot.** Eri väri vuotuiseen tapahtumaan tai haasteeseen, vaihdetaan takaisin jälkeenpäin.

- Metsä, valaistu keskusta: `linear-gradient(90deg, #052e16 0%, #166534 50%, #052e16 100%)`
- Violetti, valaistu keskusta: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #1e1b4b 100%)`
- Aprikoosi, lämmin keskusta: `linear-gradient(90deg, #fff7ed 0%, #fed7aa 50%, #fff7ed 100%)`
- Syvä meri, valaistu keskusta: `linear-gradient(90deg, #0f172a 0%, #0e7490 50%, #0f172a 100%)`

Symmetriset banneripohjat ovat kirkkaimmillaan keskellä. Redditin rajauksesta riippumatta kaistan ydin säilyy.

Symmetrinen banneri on yksinkertainen keino arvaamattomaan rajaukseen. Kun molemmat reunat ovat tummat ja keskusta valaistu, kumman tahansa sivun leikkaus säilyttää tasapainon. Tärkeän sisällön keskittämisen ajatus kuuluu myös yleiseen [bannerisuunnitteluun](https://gradiently.design/fi/guide/banner-design).

### Vältä

- Koko leveydelle ulottuvaa tekstiä
- Logoa vasemmassa alakulmassa kuvakkeen alla
- Korkean kuvan litistämistä kaistaksi
- Pieniä yksityiskohtia, jotka muuttuvat skaalattaessa kohinaksi
- Vieressä olevan subreddit-nimen toistamista kuvassa

### Tee näin

- Mahdolliset sanat keskikolmannekseen
- Rauhallinen tausta reunoille
- Kaistaa varten valittu leveä rajaus
- Vahvat muodot ja pehmeät värit
- Merkitystä lisäävä iskulause

Tarkista banneri myös Redditin molemmissa teemoissa. Moni selaa tummassa tilassa, jossa ympäröivä sivu on lähes musta. Toiset käyttävät valkoista vaaleaa tilaa. Kova valkoinen reuna voi näyttää liimatulta suorakulmiolta tummalla sivulla, ja hyvin tumma banneri raskaalta vaalealla. Keskisävyt tai neutraaliin häipyvät reunat sopivat molempiin. [Tumman tilan suunnittelu](https://gradiently.design/fi/guide/dark-mode-design) käsittelee laajempaa periaatetta.

## Reddit-julkaisun kuvakoko

1080×1080-neliö on varma valinta julkaisukuviin: se näkyy kokonaan tietokoneen korttinäkymässä ja mobiilisyötteessä. Pystykuva 1080×1350 täyttää enemmän puhelimen näyttöä. Hyvin korkeat kuvat lyhenevät syötteessä ennen avaamista, ja hyvin leveät kutistuvat kaistaksi. Reddit on tekstipainotteinen, joten kirjoita tärkeät sanat julkaisun otsikkoon. Kuvan tehtävä on näyttää, ei toistaa.

Redditin neliökuva, joka ilmoittaa puutarhayhteisön keväisestä siemenvaihdosta

Neliömäinen ilmoituskuva ylläpitäjän kiinnitettyyn julkaisuun.

Redditin pystykuva yhteisön säännöistä subredditin väreissä

Pystysääntökortti samalla ilmeellä kuin banneri.

Ylläpitäjien ilmoitukset, sääntökortit ja tapahtumajulkaisut näyttävät virallisemmilta bannerin väreissä. Gradientlyssä suunnittelet 1920×384-bannerin ja 1080×1080-julkaisut yhdestä Markista, jolloin subreddit saa yhtenäisen ilmeen. Prossa kaikki kokomuutokset syntyvät yhdellä vaiheella, ja jokainen koko renderöityy omaan muotoonsa rajautumisen sijaan. Lisää ilmeen sovittamisesta löydät oppaista [yhtenäinen brändi somessa](https://gradiently.design/fi/guide/brand-consistency-across-platforms) ja [somekuvien koot](https://gradiently.design/fi/guide/social-media-image-sizes).

## FAQ

### Minkä kokoinen Reddit-yhteisön banneri on?

1920×384 pikseliä, 5:1-kaista.

### Miksi subreddit-bannerini leikkautuu puhelimella?

Reddit-sovellus näyttää sen eri suhteessa kuin tietokone, mikä yleensä leikkaa sivuja. Pidä sanat ja tärkeät kuvat keskikolmanneksessa.

### Minkä kokoisia Reddit-julkaisujen kuvien pitäisi olla?

1080×1080-neliö näkyy luotettavasti tietokoneella ja puhelimella. Myös 1080×1350-pystykuva toimii ja täyttää enemmän puhelimen näyttöä.

### Mistä vaihdan subreddit-bannerin?

Mod Toolsista yhteisön ulkoasuasetuksista. Sinun on oltava ylläpitäjä, jolla on oikeus muokata yhteisön ilmettä.