Kuinka pienentää kuvan kokoa menettämättä näkyvää laatua

Verkkosivustosi latautuu kuudessa sekunnissa. Sähköpostisi pomppii takaisin, koska liite on liian suuri. Sosiaalisen median julkaisusi näyttää hienolta mutta sen lataaminen kesti ikuisuuden. Lähes jokaisessa tapauksessa syyllinen on sama: kuvat jotka ovat paljon suurempia kuin tarvitaan.

Hyvä uutinen on, että voit dramaattisesti pienentää kuvatiedostojen kokoja – usein 70 % tai enemmän – ilman mitään näkyvää eroa laadussa. Avain on ymmärtää mikä tekee kuvista suuria alun perin.

Resoluutio vs. tiedostokoko: tärkein ero

Monet ihmiset sekoittavat kuvan resoluution tiedostokokoon. Ne ovat yhteydessä toisiinsa mutta erillisiä asioita.

Resoluutio on kuvassa olevien pikselien lukumäärä, mitattuna leveys × korkeus. 4000 × 3000 pikselin kuva sisältää 12 miljoonaa pikseliä (12 megapikseliä). Resoluutio määrää kuinka suurena kuvaa voidaan näyttää terävänä.

Tiedostokoko on kuinka monta tavua kuva vie levyllä. Se riippuu resoluutiosta mutta myös formaatista, pakkaustasosta ja kuvan sisällöstä.

Tässä miksi tämä ero on tärkeä: 4000 × 3000 kuva jota näytetään 800 × 600 verkkosivustolla tuhlaisi yli 90 % pikseleistään. Selaimen on ladattava kaikki 12 miljoonaa pikseliä ja sitten heittää suurin osa pois näyttääkseen kuvan pienemmässä koossa. Kuvan muuttaminen todellisiin näyttömittoihin ennen lataamista voi vähentää tiedostokokoa 80 % tai enemmän ilman näkyvää eroa.

Kuvaformaattien ymmärtäminen

Valitsemallasi formaatilla on valtava vaikutus tiedostokokoon.

JPG (JPEG)

Valokuvien universaali standardi. JPG käyttää häviöllistä pakkausta, tarkoittaen, että se hylkää osan kuvan datasta jonka ihmissilmä ei todennäköisesti huomaa. 80–85 % laadulla JPG-kuvat näyttävät identtisiltä alkuperäisen kanssa mutta ovat murto-osa koosta.

Parhaiten sopii: Valokuviin, liukuvärjättyihin kuviin, realistisiin kuviin.

PNG

PNG käyttää häviötöntä pakkausta: dataa ei hylätä. Tämä tekee siitä ihanteellisen kuville jotka vaativat tarkkaa pikselitoistoa, kuten logoille, kuvakaappauksille ja grafiikalle jossa on tekstiä. PNG-tiedostot ovat kuitenkin huomattavasti suurempia kuin JPG-tiedostot valokuvasisällölle.

Parhaiten sopii: Logoille, kuvakaappauksille, tekstiä sisältävälle grafiikalle, läpinäkyvyyttä tarvitseville kuville.

WebP

Googlen kehittämä WebP tarjoaa sekä häviöllisen että häviöttömän pakkauksen. Se tuottaa 25–35 % pienempiä tiedostoja kuin JPG vastaavalla laadulla ja tukee läpinäkyvyyttä (toisin kuin JPG). Kaikki modernit selaimet tukevat WebP:tä.

Parhaiten sopii: Verkkokuville kaikilla tyyleillä. Paras yleiskäyttöinen verkkoformaatti tänään.

Kuinka kuvanpakkaus toimii

Kaikki kuvanpakkaus hyödyntää samaa perusperiaatetta: ihmissilmä ei pysty havaitsemaan jokaista yksityiskohtaa jonka kamera tallentaa. Pakkausalgoritmit tunnistavat ja poistavat tiedot joita et koskaan huomaa puuttuvan.

Erityisesti häviöllinen pakkaus hyödyntää:

• Väriherkkyyden. Ihmissilmät ovat herkempiä kirkkauden muutoksille kuin värin muutoksille. Pakkaus vähentää väritarkkuutta aggressiivisemmin.
• Korkeataajuiset yksityiskohdat. Hienoja tekstuureja ja hienovaraisia liukuvärjäyksiä voidaan yksinkertaistaa ilman huomattavaa vaikutusta.
• Redundanssin. Samankaltaista väriä sisältäviä alueita (sininen taivas, valkoinen seinä) voidaan esittää tehokkaammin.

Temppu on löytää oikea pakkaustaso. Liian vähäinen pakkaus tuhlaa kaistanleveyttä. Liika pakkaus aiheuttaa näkyviä artefakteja: sumennusta, kaistoja ja lohkoisia alueita.

Käytännön säännöt eri käyttötapauksille

Verkkosivustoille

• Enimmäisleveys: 1920 pikseliä täysleveille hero-kuville, 800–1200 pikseliä sisältökuville
• Formaatti: WebP JPG-varaformaatilla
• Laatu: 75–85 %
• Tavoitekoko: Alle 200 KB kuvaa kohti, alle 100 KB pienoiskuville

Sähköpostiliitteille

• Enimmäisleveys: 1200–1600 pikseliä
• Formaatti: JPG (universaali yhteensopivuus)
• Laatu: 80–85 %
• Tavoitekoko: Alle 500 KB kuvaa kohti, kokonaisliitteet alle 10 MB

Sosiaaliselle medialle

Kullakin alustalla on omat optimaaliset mitta-arvonsa, mutta yleissääntönä:

• Instagram: 1080 × 1080 (neliö), 1080 × 1350 (pysty)
• Facebook: 1200 × 630 linkkien esikatseluille
• LinkedIn: 1200 × 627
• Formaatti: JPG tai PNG
• Laatu: 85–90 % (alustat pakkaavat kuvasi uudelleen latauksen jälkeen, joten aloittaminen hieman korkeammalla laadulla on viisasta)

Suurimmat virheet joita ihmiset tekevät

1. Kameran alkuperäisten tiedostojen lataaminen

Raakavalokuva modernista älypuhelimesta on 3–8 MB. DSLR-kameran raakatiedosto voi olla 25–50 MB. Näiden lataaminen suoraan verkkosivustolle on yksittäisin yleisin syy hitaasti latautuville sivuille.

2. PNG:n käyttäminen valokuville

PNG on väärä formaatti valokuville. Valokuva tallennettuna PNG:nä voi olla 5–10 kertaa suurempi kuin sama valokuva tallennettuna JPG:nä 85 % laadulla, ilman näkyvää eroa.

3. Koon pienentämättä jättäminen ennen pakkausta

Pakkaaminen 4000 pikselin levyisestä kuvasta 200 KB:n on paljon vähemmän tehokasta kuin ensin pienentää se 1200 pikselin levyiseksi ja sitten pakata. Pienennä ensin, pakkaa sitten.

4. Pakkaaminen useita kertoja

Joka kerta kun avaat JPG:n, muokkaat sitä ja tallennat uudelleen, se pakataan uudelleen. Useamman muokkaus-tallennus-kierroksen yli laatu heikkenee huomattavasti. Työskentele aina alkuperäisestä ja pakkaa vain lopullinen versio.

Kuvaoptimoinnin vaikutus

Kuvien optimointi ei ole pelkästään mukavuutta. Verkkosivustoille se vaikuttaa suoraan:

• Sivun latausnopeus. Nopeammat sivut sijoittuvat korkeammalle Googlen hakutuloksissa.
• Käyttäjäkokemus. 53 % mobiilinkäyttäjistä hylkää sivut jotka latautuvat yli 3 sekuntia.
• Kaistanleveyskustannukset. Korkealiikenteisille sivustoille kuvaoptimointi voi säästää merkittäviä hosting-kustannuksia.
• Saavutettavuus. Hitaan yhteyden tai rajoitetun datan käyttäjät hyötyvät valtavasti.

Valmis optimoimaan kuvasi? Seuraa vaiheittaista opastamme: Kuinka pakata kuva. Se on ilmainen, toimii selaimessasi ja antaa sinun nähdä laadun eron ennen lataamista.