Kuvakoot verkkosivuille, sähköpostiin ja someen
Viitetaulukko pikselimitoista ja kuvasuhteista verkkosivuille, linkkien esikatseluihin, sähköpostiin ja kaikkiin suuriin somepalveluihin.
Jos lähetät palvelimelle väärän kokoisen kuvan, tuloksena on joko sumea kuva, rajattu kohde tai hitaasti latautuva sivu. Tähän viitteeseen on koottu mitat, jotka toimivat vuonna 2026, sekä perustelut, jotta voit tehdä järkeviä päätöksiä, kun jokin palvelu muuttaa sääntöjään.
Kaksi periaatetta
Sovita kuva näyttökokoon ja huomioi tarkat näytöt. Useimmissa puhelimissa ja kannettavissa on nykyään näyttö, jossa on kaksi tai kolme fyysistä pikseliä jokaista CSS-pikseliä kohden. Kuvan, joka näytetään 600 CSS-pikselin levyisenä, pitäisi olla 1 200 pikseliä leveä, jotta se näyttää terävältä. Yli 2× suurempi koko vain kasvattaa tiedostoa ilman näkyvää hyötyä.
Hae kuvasuhde kohdalleen ennen pikselimäärää. Palvelut rajaavat kuvan automaattisesti haluamaansa kuvasuhteeseen, ja automaattinen rajaus leikkaa päitä ja logoja. Rajaa kuva itse oikeaan suhteeseen rajaustyökalulla ja muuta sitten koko koonmuutostyökalulla.
Verkkosivujen kuvat
| Käyttö | Leveys | Suhde | Tavoitekoko |
|---|---|---|---|
| Koko leveyden pääkuva | 1 920 px (2 560 hyvin suurille näytöille) | 16:9 tai 21:9 | Alle 300 KB WebP-muodossa |
| Sisältö- tai blogikuva | 1 200-1 600 px | 3:2 tai 16:9 | Alle 150 KB |
| Kortin tai ruudukon pikkukuva | 600-800 px | Sama koko ruudukossa | Alle 60 KB |
| Tuotekuva | 1 200-2 000 px | 1:1 tai 4:5 | Alle 200 KB, suurempi zoomausta varten |
| Logo (bittikartta) | 2× näyttökoko | Kuten suunniteltu | PNG tai SVG |
| Open Graph / linkin esikatselu | 1 200 × 630 px | 1,91:1 | Alle 300 KB, JPG tai PNG |
| Favicon | 16, 32, 48 ja 64 px yhdessä .ico-tiedostossa | 1:1 | Pienen pieni |
| Apple touch icon | 180 × 180 px | 1:1 | PNG |
Sähköposti
Sähköpostiohjelmat näyttävät viestin kiinteällä leveydellä, tavallisesti 600-640 pikseliä viestin rungolle. Tee kuvista 1 200 px leveitä (2× retina-näytöille) ja pidä koko viesti alle noin 1 MB:n. Raskaammat viestit Gmail katkaisee, ja ne avautuvat hitaasti mobiilissa. Käytä JPG- tai PNG-muotoa, sillä WebP-tuki sähköpostiohjelmissa on yhä epäjohdonmukaista. GIF sopii yksinkertaiseen animaatioon.
Some
| Palvelu | Sijainti | Koko | Suhde |
|---|---|---|---|
| Syöte, pystykuva (paras näkyvyys) | 1 080 × 1 350 | 4:5 | |
| Syöte, neliö | 1 080 × 1 080 | 1:1 | |
| Stories / Reels-kansikuva | 1 080 × 1 920 | 9:16 | |
| Profiilikuva | 320 × 320 (näytetään ympyränä) | 1:1 | |
| Syötteen kuva | 1 200 × 630 tai 1 080 × 1 350 | 1,91:1 tai 4:5 | |
| Sivun kansikuva | 1 640 × 856 | Näkyy 820 × 312 tietokoneella | |
| Julkaisun kuva | 1 200 × 627 | 1,91:1 | |
| Yrityksen banneri | 1 128 × 191 | noin 5,9:1 | |
| X (Twitter) | Julkaisun kuva | 1 600 × 900 | 16:9 |
| X (Twitter) | Yläkuva | 1 500 × 500 | 3:1 |
| YouTube | Pikkukuva | 1 280 × 720 | 16:9, alle 2 MB |
| YouTube | Kanavan banneri | 2 560 × 1 440 (turva-alue 1 546 × 423) | 16:9 |
| TikTok | Videon kansikuva | 1 080 × 1 920 | 9:16 |
| Pin | 1 000 × 1 500 | 2:3 | |
| WhatsApp / Telegram | Profiilikuva | 640 × 640 | 1:1 |
Jokainen somepalvelu pakkaa palvelimelle lähetetyt kuvat uudelleen, yleensä JPG-muotoon noin laadulla 75-80. Lähetä kuva korkealla laadulla (JPG 90 tai PNG) täsmälleen yllä olevissa mitoissa ja anna palvelun tehdä lopullinen pakkaus kerran sen sijaan, että pinoat oman pakkauksesi heidän pakkauksensa päälle. Jos haluat nähdä julkaisun ennen sen julkaisemista, käytä somejulkaisun esikatselua.
Tulostus, täydellisyyden vuoksi
Tulostuksessa mitataan pikseleitä tuumaa kohden, ei pikselien kokonaismäärää. Standardi on 300 ppi: 6 × 4 tuuman valokuva tarvitsee 1 800 × 1 200 px, A4-sivu 2 480 × 3 508 px ja A3-juliste 3 508 × 4 961 px. Kaikki alle 150 ppi:n näyttää tulosteessa selvästi pehmeältä. Toimita JPG laadulla 95 tai häviöttömässä muodossa.
Nopea työnkulku
- Rajaa kuva siihen suhteeseen, jota kohde vaatii.
- Muuta koko taulukon leveyteen, mutta älä koskaan yli 2× näyttökokoon.
- Tallenna WebP-muodossa verkkosivuille, JPG-muodossa sähköpostiin ja someen ja PNG-muodossa läpinäkyvään grafiikkaan.
- Tarkista tiedostokoko. Jos se ylittää tavoitteen, laske laatua muutamalla pisteellä mittojen pienentämisen sijaan.
Kaikki neljä vaihetta voi tehdä tällä sivustolla lähettämättä kuvaa minnekään.