PNG vai JPG: oikea kuvamuoto eri tilanteisiin

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.

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

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.

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 kertoo, milloin kumpaakin käytetään, ja logojen koot 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, ja se on pahimmillaan tummilla, vähäkontrastisilla taustoilla.

Rakeisuus auttaa enemmän kuin mikään asetus, sillä se antaa pakkaajalle tekstuuria lähes samanvärisen tasaisen pinnan sijaan. Rakeiset liukuvärit 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 ennen sivustosi kuvien uudistamista. Asetuksista kertoo kuvien pakkaaminen liukuvärejä pilaamatta.