# PNG vai JPG: oikea kuvamuoto eri tilanteisiin

[Canonical HTML page](https://gradiently.design/fi/guide/png-vs-jpeg)

Toinen muoto säilyttää jokaisen pikselin, toinen karsii yksityiskohtia pitääkseen tiedoston pienenä. Kun tiedät, mitä katoaa, osaat valita oikein.

## The short version

- PNG on häviötön ja säilyttää jokaisen pikselin täsmälleen, kun taas häviöllinen JPG poistaa yksityiskohtia, joita silmä ei helposti huomaa.
- Käytä PNG:tä tekstille, logoille, kuvakaappauksille, tasaisille väreille ja kaikkeen, mikä tarvitsee läpinäkyvän taustan.
- Käytä JPG:tä valokuville, joissa pakkausta on vaikea huomata ja tiedosto on moninkertaisesti pienempi.
- JPG ei tue läpinäkyvyyttä, ja pehmeissä liukuväreissä sekä terävien kirjainten ympärillä se näyttää helposti ruutuja ja raitoja.
- Somealustat pakkaavat jokaisen latauksen uudelleen, joten puhdas PNG tai laadukas JPG antaa pakkaukselle vähemmän vaurioitettavaa.

Lyhyt vastaus kysymykseen **PNG vai JPG**: käytä PNG:tä kuviin, joissa on tekstiä, logoja, tasaisia värejä, teräviä reunoja tai läpinäkyvä tausta. Käytä JPG:tä valokuville. PNG on häviötön, joten jokainen viemäsi pikseli saapuu sellaisenaan. JPG on häviöllinen: se poistaa yksityiskohtia pienentääkseen tiedostoa, ja juuri nämä yksityiskohdat tekevät kirjaimista teräviä ja liukuväreistä pehmeitä. Valokuva peittää häviön hyvin. Otsikko liukuvärin päällä ei.

## PNG:n ja JPG:n ero

Molemmat muodot tallentavat pikseliruudukon, joten kumpikaan ei suurene pehmenemättä. Ero on siinä, miten ruudukko pakataan tiedostoon.

| Ominaisuus | PNG | JPG (JPEG) |
| --- | --- | --- |
| Pakkaus | Häviötön: mitään ei poisteta | Häviöllinen: yksityiskohtia poistetaan tilan säästämiseksi |
| Läpinäkyvyys | Kyllä, täysi alfakanava | Ei, läpinäkyvät alueet muuttuvat tasavärisiksi |
| Sopii parhaiten | Teksti, logot, kuvakaappaukset, tasaiset värit, liukuvärit | Valokuvat ja valokuvapainotteiset suunnitelmat |
| Tiedostokoko | Suurempi valokuville, pieni tasaiselle grafiikalle | Pieni valokuville, säädettävissä laadulla |
| Uudelleentallennus | Turvallinen, laatu ei heikkene | Jokainen tallennus hävittää hieman lisää |
| Väri | Enintään 16 bittiä kanavaa kohti, verkossa sRGB | 8 bittiä kanavaa kohti, verkossa sRGB |

JPG ja JPEG ovat sama muoto. Kolmikirjaiminen pääte on perua vanhoista tiedostojärjestelmistä.

JPG jakaa kuvan pieniin 8×8 pikselin ruutuihin ja yksinkertaistaa kunkin ruudun väriä ja hienoja yksityiskohtia. Runsaasti tekstuuria sisältävässä valokuvassa yksinkertaistus hukkuu kohinaan. Pehmeässä liukuvärissä tai kirjaimen reunassa se näkyy haaleina ruutuina, levinneinä kehämäisinä jälkinä ja porrastuneina värikaistoina.

## Milloin kannattaa käyttää PNG:tä

- **Tekstipainotteinen grafiikka**: sitaattikortit, ilmoitukset, karusellit, diat.
- **Logot ja kuvakkeet**, erityisesti [läpinäkyvällä taustalla](https://gradiently.design/fi/guide/transparent-background).
- **Kuvakaappaukset** käyttöliittymistä, joissa JPG sumentaa pienen tekstin.
- **Liukuvärit ja tasaiset värit**, joihin JPG-pakkaus tekee raitoja ja ruutuja.
- **Alkuperäistiedostot**, joita muokkaat uudelleen, jotta laatu ei heikkene jokaisessa tallennuksessa.

Pystysuuntainen somejulkaisu, jossa lukee Perjantaisin auki myöhään terävällä tekstillä pehmeän liukuvärin päällä

Liukuvärin päällä oleva tekstijulkaisu PNG:nä: terävät kirjaimet ilman raitoja.

Sama pystyjulkaisu näyttää JPEG-pakkausvirheiden paikat kirjainten ympärillä ja tummissa liukuvärialueissa

Voimakkaasti pakatussa JPG:ssä virheet näkyvät ensin tässä: kehämäisiä jälkiä kirjainten ympärillä ja portaita tummissa kulmissa.

## Milloin kannattaa käyttää JPG:tä

Käytä JPG:tä valokuville: tuotekuville, muotokuville, matkailulle ja ruoalle. Aidoissa valokuvissa on paljon rakeisuutta ja tekstuuria, jotka peittävät pakkauksen. Noin 80-85:n laatutasolla JPG näyttää yleensä samalta kuin alkuperäinen, mutta vie vain murto-osan tilasta. Suuri PNG-valokuva voi helposti olla moninkertaisesti raskaampi ilman näkyvää hyötyä.

JPG sopii myös suunnitelmiin, joissa on enimmäkseen valokuvaa ja vähän suurta tekstiä. Jos teksti on pientä tai ohutta tai pehmeän taivaan päällä, vie sen sijaan PNG tai kokeile molempia ja vertaa 100 %:n suurennuksella.

## PNG vai JPG sosiaaliseen mediaan

Instagram, Facebook, X ja LinkedIn pakkaavat kaiken lataamasi uudelleen, yleensä JPG:ksi. Se voi kuulostaa syyltä olla välittämättä, mutta pakkaus kertautuu. Jo pakattu JPG pakataan taas ja virheet lisääntyvät. Anna alustalle mahdollisimman puhdas tiedosto täsmälleen sen odottamassa koossa, jotta sitä ei tarvitse skaalata. Mitat löytyvät oppaasta [sosiaalisen median kuvakoot](https://gradiently.design/fi/guide/social-media-image-sizes).

- Instagram-julkaisu 1080×1350: 1080 × 1350
- Tarina 1080×1920: 1080 × 1920
- X-julkaisu 1600×900: 1600 × 900
- LinkedIn-julkaisu 1200×1200: 1200 × 1200

Vie kuvat täsmälleen näissä pikseliko’oissa. Jos alustan täytyy skaalata kuvaasi, se pakkaa sitä voimakkaammin.

| Julkaistava sisältö | Vie muodossa | Syy |
| --- | --- | --- |
| Sitaattikortti, ilmoitus, karusellidia | PNG | Teksti ja tasaiset värit kestävät uudelleenpakkausta paremmin |
| Liukuväri- tai materiaalitausta ja sanat | PNG | Ehkäisee raitoja tummissa ja hienovaraisissa sävyissä |
| Valokuva | JPG, laatu 85-90 | Näyttää samalta, huomattavasti pienempi |
| Logo profiilikuvaksi | PNG | Puhtaat reunat ja mahdollisuus käyttää läpinäkyvänä uudelleen |
| Open Graph -linkkikuva | PNG tai JPG | PNG tekstille, JPG valokuvalle; pidä koko alle muutaman sadan KB:n |

## PNG vai JPG logolle

PNG aina, kun tarvitset pikselitiedoston. Logo koostuu tasaisista muodoista ja terävistä reunoista, jotka PNG pakkaa hyvin ja JPG vaurioittaa. Logo tarvitsee lähes aina läpinäkyvän taustan, jotta se toimii valokuvien, värien ja tumman tilan päällä. Säilytä alkuperäinen mieluiten SVG:nä, joka pysyy terävänä kaikissa ko’oissa. [SVG vai PNG](https://gradiently.design/fi/guide/svg-vs-png) kertoo, milloin kumpaakin käytetään, ja [logojen koot](https://gradiently.design/fi/guide/logo-sizes) luettelee tarvittavat tiedostot.

## Miksi JPG-liukuväriin tulee raitoja

Pehmeät liukuvärit ovat vaikein koe mille tahansa muodolle. Tummassa siirtymässä lähes mustasta syvään violettiin on käytettävissä vain muutamia kymmeniä erillisiä väriarvoja. JPG-pakkaus yhdistää läheiset sävyt näkyviksi raidoiksi. Tämä on [liukuvärin raidoittumista](https://gradiently.design/fi/guide/gradient-banding), ja se on pahimmillaan tummilla, vähäkontrastisilla taustoilla.

Lähes mustasta syvään violettiin: `linear-gradient(180deg, #0b0a14 0%, #1a1233 45%, #2e1a5c 100%)`

Juuri tällainen hienovarainen tumma liukuväri raidoittuu JPG:nä. Vie se PNG:nä tai lisää vähän rakeisuutta ennen vientiä.

### Aiheuttaa raitoja

- JPG laatutasolla 60 tai alle
- JPG:n tallentaminen, muokkaaminen ja uusi tallennus
- Täysin puhdas digitaalinen liukuväri ilman tekstuuria
- Koko, jota alustan on pakko skaalata

### Ehkäisee raitoja

- PNG kaikkeen, jossa on liukuväri
- JPG-laatu 90 tai enemmän, jos JPG on välttämätön
- Kevyt rakeisuuskerros rikkoo väriporrastuksen
- Vienti alustan täsmällisessä pikselikoossa

Rakeisuus auttaa enemmän kuin mikään asetus, sillä se antaa pakkaajalle tekstuuria lähes samanvärisen tasaisen pinnan sijaan. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) näyttää sopivan määrän. Gradientlyn Markeissa on oma rakeisuutensa ja valonsa, juuri sellainen tekstuuri, joka auttaa liukuvärisuunnitelmaa kestämään alustan uudelleenpakkauksen.

## Entä WebP ja AVIF

Omalla verkkosivustollasi uudemmat muodot voittavat molemmat: WebP ja AVIF voivat olla häviöllisiä tai häviöttömiä, tukevat läpinäkyvyyttä ja ovat samalla laadulla pienempiä. Kaikki nykyiset selaimet tukevat WebP:tä. Säilytä PNG ja JPG alustalatauksia ja tiedostojen jakamista varten ja lue [WebP, PNG ja JPG](https://gradiently.design/fi/guide/webp-images) ennen sivustosi kuvien uudistamista. Asetuksista kertoo [kuvien pakkaaminen liukuvärejä pilaamatta](https://gradiently.design/fi/guide/image-compression).

## FAQ

### Onko PNG laadukkaampi kuin JPG?

PNG on häviötön, joten sen laatu ei heikkene, vaikka tallentaisit sen kuinka usein. Valokuvissa laadukas JPG näyttää silmään samalta ja on paljon pienempi, joten parempi vaihtoehto riippuu sisällöstä.

### Kannattaako Instagramiin julkaista PNG vai JPG?

Tekstille, grafiikalle ja liukuväreille PNG, valokuville JPG laatutasolla 85 tai enemmän. Instagram pakkaa molemmat uudelleen, joten vie kuva sen odottamassa koossa, esimerkiksi pystyjulkaisu 1080×1350.

### Tukeeko JPG läpinäkyviä taustoja?

Ei. JPG:ssä ei ole alfakanavaa, joten läpinäkyvät alueet täyttyvät tasaisella värillä, yleensä valkoisella. Käytä läpinäkyvyyteen PNG:tä, WebP:tä tai SVG:tä.

### Miksi liukuvärini näyttää raidalliselta JPG-tallennuksen jälkeen?

JPG-pakkaus yhdistää pehmeän liukuvärin läheiset sävyt näkyviksi kaistoiksi. Vie suunnitelma PNG:nä, nosta JPG-laatu vähintään 90:een tai lisää kevyt rakeisuuskerros.

### Onko JPEG sama kuin JPG?

Kyllä. Ne ovat sama muoto. JPG on vain tiedostopäätteen kolmikirjaiminen versio.