# Kuvien pakkaaminen ilmaisilla työkaluilla

Pakattuja kuvia on erityisen hyödyllistä käyttää **verkkosivujen latausnopeuden** parantamiseksi. Mutta miten kuvat voidaan pakata mahdollisimman häviöttömästi ilman, että kuvan laatu heikkenee huomattavasti? Ja mitä vaihtoehtoja tähän on? Tässä oppaassa annamme selkeän yleiskatsauksen kuvien pakkaustyökaluista.

## Miksi minun pitäisi pakata kuvani?

Nykyään korkean resoluution kuvat ja valokuvat ovat yleisiä. Digitaalisessa valokuvauksessa pikselimäärät ja **tiedostokoot** kasvavat. Olitpa sitten lataamassa kuvia verkkosivustollesi tai lähettämässä niitä sähköpostitse, on aina tärkeää pitää tiedostokoot mahdollisimman pieninä. Muista, että mitä pienempi tiedosto on, sitä vähemmän aikaa sen siirtäminen vie. Tästä on etua kahdesta syystä:

- Nopea latausprosessi **lisää kävijöiden tyytyväisyyttä** (erityisesti mobiili-internetyhteyden käyttäjien keskuudessa).
- Nopea latausaika vaikuttaa positiivisesti **hakukoneiden sijoitukseen**.

## Oikea tiedostomuoto verkkokuville

Ennen kuin laitat kuvasi verkkoon, sinun tulee tarkistaa kuvatiedostojen muoto. Kaikki graafiset muodot eivät sovellu internetkäyttöön. Tässä on **viisi muotoa,** joita voidaan käyttää:

- **JPG/JPEG**: JPG on yksi yleisimmin käytetyistä kuvamuodoista. Se pystyy näyttämään 16,7 miljoonaa väriä ja tarjoaa tehokkaat pakkaussuhteet. JPG-tiedostoja käytetään enimmäkseen valokuvien tai valokuvamaisen grafiikan tallentamiseen, erityisesti sellaisten, joissa on paljon erilaisia värejä ja voimakkaita kontrasteja.
- **PNG**: Tämä tiedostomuoto voi näyttää 256 (PNG8) – 16,7 miljoonaa (PNG24) eri väriä ja sitä voidaan käyttää verkossa. Toisin kuin JPG-tiedostot, tätä tiedostomuotoa voidaan pakata ilman laadun heikkenemistä. PNG-tiedostot sopivat hyvin grafiikan, logojen ja tekstien tallentamiseen. Vähäisillä väreillä varustetut kuvat voidaan pakata tiedostoiksi, joiden koko on vain murto-osa kuvan alkuperäisestä koosta.
- **WebP**: WebP on Googlen kehittämä moderni kuvamuoto, joka tarjoaa paremman pakkauksen säilyttäen samalla korkean kuvanlaadun. Se tukee sekä häviöllistä että häviötöntä pakkausta, mikä johtaa pienempiin tiedostokokoihin verrattuna JPEG- ja PNG-tiedostoihin. Tehokkaiden algoritmien, kuten ennustavan koodauksen, ansiosta WebP voi pakata kuvia jopa **30 % pienemmiksi kuin JPEG** vastaavalla laadulla. Muoto tukee myös läpinäkyvyyttä (alfakanava) ja animaatioita, mikä tekee siitä monipuolisen vaihtoehdon PNG- ja GIF-tiedostoille.
- **SVG**: SVG (Scalable Vector Graphics) on XML-pohjainen kuvamuoto, jota käytetään vektorigrafiikassa. Koska se perustuu muotojen ja viivojen matemaattisiin kuvauksiin, kuvanlaatu säilyy ennallaan skaalauksesta riippumatta. Toisin kuin pikselipohjaiset muodot, SVG-tiedostojen kokoa voidaan pienentää huomattavasti yksinkertaisilla koodin optimoinneilla ja [gzip-pakkauksella](https://www.ionos.com/fi-fi/digitalguide/palvelin/osaaminen/mikae-on-gzip-ja-mitkae-ovat-ohjelman-edut/) ilman, että kuvanlaatu heikkenee. SVG on erityisen sopiva logojen, kuvakkeiden ja kuvitusten käyttöön verkossa.
- **GIF**: GIF-tiedostot ovat edelleen melko yleisiä verkossa, vaikka ne voivat näyttää vain 256 väriä. Tämä johtuu pääasiassa siitä, että GIF-muoto tukee lyhyitä animaatioita, jotka on tehty kuvasarjasta ja jotka ovat erityisen suosittuja sosiaalisessa mediassa ja vastaavilla alustoilla.

Vinkki Valokuvien ja kuvien pakkaaminen on yksi tärkeimmistä tavoista parantaa verkkosivustosi suorituskykyä. Visuaalisen sisällön optimointiin on kuitenkin myös muita keinoja. **Kuvan mitat** kannattaa määrittää **suoraan lähdekoodissa**, jotta selaimen ei tarvitse laskea niitä. **Metatietojen**, kuten metatagien ja EXIF-tietojen, **poistaminen** voi myös vaikuttaa positiivisesti latausnopeuteen. Jos verkkosovelluksesi sisältää paljon kuvia, suosittelemme käyttämään sisällönjakeluverkkoa (CDN) toimituksen ja suorituskyvyn optimoimiseksi.

## Vaihtoehto 1: Pakkaa kuvat verkossa

Jos haluat pakata kuvia ilman erityisen ohjelmiston asentamista, voit myös optimoida kuvasi helposti verkossa. Tätä tarkoitusta varten **verkossa** on **useita palveluja**, joiden avulla voit pakata kuvia ilmaiseksi. Työkalut eroavat yleensä toisistaan **käytettävissä olevien tiedostomuotojen** ja mahdollisten **pakkausasteiden** suhteen, ja niissä on usein rajoituksia suoritettavien pakkausten lukumäärän suhteen. Jotkut parhaista ratkaisuista löytyvät seuraavista kappaleista.

### Optimizilla

Mediafox Marketingin [Optimizilla-verkkotyökalun avulla](https://imagecompressor.com/ "Optimizilla website") voit ladata ja pakata **jopa 20 kuvaa kerralla**. Kuvien on oltava JPEG- tai PNG-muodossa. Verkkosovellus käyttää **yhdistelmää erilaisia pakkausalgoritmeja**, jotka tarjoavat hyvän pakkaussuhteen ja kuvanlaadun. Voit **säätää pakkausastetta** liukusäätimellä ennen kuin lataat tulokset yksitellen tai yhdessä ZIP-tiedostona.

[![Kuva: Image compression with Optimizilla](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/9/b/csm_optimizilla-compression_6080db60c9.webp "Image compression with Optimizilla")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/optimizilla-compression.png) Once you’ve selected the desired compression level, confirm it in Optimizilla by clicking ‘Apply’. In this example, the image size is reduced by 22 percent. Jotta löydät parhaat mahdolliset asetukset, Optimizilla näyttää sinulle **pikkukuvat alkuperäisestä kuvasta ja sen pakatusta versiosta**. Lisäksi työkalu ilmoittaa kunkin tiedoston koon. Kaikki ladatut kuvat poistetaan automaattisesti palveluntarjoajan palvelimilta tunnin kuluttua.

<table>
  <thead>
    <tr>
      <th><strong>Edut</strong></th>
      <th><strong>Haitat</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Säädettävä puristussuhde</td>
      <td>Rajoitettu 20 pakkaukseen kerrallaan</td>
    </tr>
    <tr>
      <td>Pienoiskuva alkuperäisestä ja muokatusta versiosta</td>
      <td></td>
    </tr>
  </tbody>
</table>

### PieniPNG

[TinyPNG](https://tinypng.com "TinyPNG Website") mahdollistaa – nimestään poiketen – paitsi PNG-tiedostojen pakkaamisen myös JPEG- ja WebP-tiedostojen pakkaamisen. Ilmaisessa vakioversiossa voit optimoida samanaikaisesti **jopa 20 kuvaa** näistä kolmesta formaatista, ja kuvan enimmäiskoko on rajoitettu 5 megatavuun.

[![Kuva: Screenshot of the TinyPNG website](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/f/4/csm_tinypng-compression_63fce81422.webp "Screenshot of the TinyPNG website")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/tinypng-compression.png) After compression, TinyPNG will display the new size of the image file(s) and the saved file size (as a percentage). Voormedia-työkalussa on **ennalta määritetty pakkaustaso**, jota ei voi säätää, mutta joka pienentää kuvan kokoa jopa 80 %. Siirrä haluamasi valokuvat **hiiren vetämällä ja pudottamalla** ne näkyvälle alueelle ja lataa tulokset sitten JPEG- tai PNG-muodossa tai ZIP-tiedostona. Vaihtoehtoisesti voit ladata ne pilvipalveluun Dropboxiin.

<table>
  <thead>
    <tr>
      <th><strong>Edut</strong></th>
      <th><strong>Haitat</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tulokset voidaan ladata Dropboxiin</td>
      <td>Rajoitus 20 samanaikaiseen pakkaukseen ja 5 megatavun tiedostokokoon (vakioversiossa)</td>
    </tr>
    <tr>
      <td></td>
      <td>Pakkausastetta ei voi säätää</td>
    </tr>
  </tbody>
</table>

### iLoveIMG

[iLoveIMG](https://www.iloveimg.com "iLoveIMG website") on kattava **online-paketti** hyödyllisiä kuvankäsittelytyökaluja. Barcelonassa toimiva kehitystiimi tarjoaa sovelluksia, joilla **kuvia voi rajata, skaalata, muuntaa ja jopa pakata.** Jälkimmäistä varten valitse ”Compress IMAGE” (Pakkaa kuva) ja lisää haluamasi kuvamateriaali vetämällä ja pudottamalla tai tiedostoselaimella. Mahdollisia tiedostomuotoja ovat **JPEG, PNG, SVG ja GIF**.

[![Kuva: Screenshot of image compression with iLoveIMG](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/2/6/csm_iloveimg-compressed-image_7d27cd4639.webp "Screenshot of image compression with iLoveIMG")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/iloveimg-compressed-image.png) After compression, you can download the images with a simple click. Vaikka iLoveIMG:llä on vain yksi oletuspakkausmoodi, työkalu tarjoaa useita erilaisia vientivaihtoehtoja. Tulokset voidaan ladata paikalliselle kiintolevylle, mutta ne voidaan myös ladata **Google Driveen ja Dropboxiin** sekä **välittää** pakattujen kuvien **latauslinkki**. Jos et ole tyytyväinen pakkaustulokseen, voit poistaa sen yksinkertaisesti napsauttamalla roskakorikuvaketta.

<table>
  <thead>
    <tr>
      <th><strong>Edut</strong></th>
      <th><strong>Haitat</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tulokset voidaan ladata Google Driveen ja Dropboxiin</td>
      <td>Vain yksi pakkaustila</td>
    </tr>
    <tr>
      <td>Saatavilla on lisätyökaluja leikkaamiseen, skaalaamiseen ja muuntamiseen</td>
      <td>Ei esikatselutoimintoa</td>
    </tr>
  </tbody>
</table>

## Vaihtoehto 2: Pakkaa kuvat Photoshopilla

Voit myös pakata kuvasi ammattimaisilla kuvankäsittelyohjelmilla. Ensinnäkin [Photoshop](https://www.adobe.com/products/photoshop.html "Photoshop website") on epäilemättä alan johtava ohjelma. Luovan suunnittelun ja valokuvamateriaalin optimoinnin toimintojen lisäksi Adobe-työkalu tarjoaa erilaisia vaihtoehtoja kuvamuodon muuttamiseen ja **kuvan koon säätämiseen**. Adobe on ottanut käyttöön erityisesti verkkosivustoille tarkoitettujen valokuvien ja kuvien optimointia varten vaihtoehdon ”Tallenna web-käyttöön”, joka on erityisen käytännöllinen verkkosivustojen ylläpitäjille. Tässä tilassa voidaan pakata paitsi tärkeät web-formaatit **GIF, PNG, WebP ja JPEG** myös mobiililaitteille suunniteltu **rasterigrafiikkaformaatti WBMP** (Wireless Bitmap).

[YouTube video](https://www.youtube.com/watch?v=RjA067CaQhY)Heti kun muokkaat kuvaa **Photoshopin web-optimointitilassa**, avautuu uusi ikkuna, jossa voit paitsi asettaa määritellyt kohdeformaatit, myös optimoida haluamasi kuvan verkkosivustollesi sopivaksi **värisyvyyden ja koon** suhteen. Esikatseluikkunassa Adobe-työkalu vertaa alkuperäistä kuvaa ja kohdekuvaa (mukaan lukien absoluuttiset tiedostokokotiedot), joten voit helposti **nähdä eron joka kerta, kun pakkaat kuvaa**.

<table>
  <thead>
    <tr>
      <th><strong>Edut</strong></th>
      <th><strong>Haitat</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Enintään kolmen pakkaustuloksen reaaliaikainen esikatselu</td>
      <td>Vaatii paljon laskentatehoa</td>
    </tr>
    <tr>
      <td>Useita kuvankäsittelyominaisuuksia saatavilla</td>
      <td>Korkeat kustannukset</td>
    </tr>
  </tbody>
</table>

## Vaihtoehto 3: Pakkaa kuvat ilmaisilla ja avoimen lähdekoodin ohjelmilla

Photoshopin avulla kuvien pakkaaminen on erittäin kätevää **työpöytäsovelluksilla**. Ne tarjoavat oletusarvoisesti huomattavasti enemmän toimintoja, mutta niillä on myös etu verkkotyökaluihin verrattuna, koska niitä voidaan käyttää ilman internetyhteyttä. Jos haluat pienentää verkkosivustosi kuvien kokoa, sinun ei kuitenkaan tarvitse välttämättä käyttää premium-ratkaisua, kuten Adoben tuotetta tai muuta maksullista vaihtoehtoa. Jos **budjettisi** on **tiukka** tai **et ole kiinnostunut monimutkaisemmista muokkausominaisuuksista**, freeware- tai avoimen lähdekoodin ohjelma voi auttaa sinua saavuttamaan ensiluokkaisia optimointituloksia valokuvien, kuvien jne. osalta. Mutta mitkä monista ilmaisista työkaluista ovat todella suositeltavia?

### IrfanView

Vuodesta 1996 lähtien kuvankatseluohjelma [IrfanView](https://www.irfanview.com/main_what_is_engl.htm "IrfanView website") on ollut yksi suosituimmista ilmaisista ohjelmistoista Windows-tietokoneille. Kehittäjän mukaan **työkalu ladataan keskimäärin miljoona kertaa kuukaudessa**! Tämä vaikuttava luku johtuu todennäköisesti sen houkuttelevasta lisenssimallista: se on täysin ilmainen henkilökohtaiseen käyttöön, kun taas kaupalliseen käyttöön tarvitaan lisenssi, jonka hinta on vain kaksinumeroinen summa.

[![Kuva: Screenshot of IrfanView](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/d/a/csm_irfanview-save-options-jpeg_0b356c34bb.webp "Screenshot of IrfanView")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/irfanview-save-options-jpeg.png) If you save your image as a JPEG using the standard version of IrfanView (without plugins), you can easily adjust the quality using a slider. Oletusarvoisesti kuvankatseluohjelma tukee **lukuisia kuvamuotoja, kuten PNG, JPEG, GIF, BMP, WebP** ja monia muita. Kun kuva on lisätty, se voidaan milloin tahansa muuntaa näihin muotoihin. Kun kyseessä on kuvien pakkaaminen erityisesti verkkoa varten, suositellaan kuitenkin lisäosana saatavaa **”Save for Web”** -toimintoa. Tämän laajennuksen avulla voit optimoida kuvia ja valokuvia ja säätää liukusäätimellä, kuinka paljon **alkuperäisen kuvan laatua** haluat säilyttää. Esikatselukuva ja pakatun tiedoston koko antavat sinulle käsityksen siitä, miltä lopputulos tulee näyttämään.

<table>
  <thead>
    <tr>
      <th><strong>Edut</strong></th>
      <th><strong>Haitat</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pinojen käsittely mahdollista</td>
      <td>Pakkauslaajennus saatavilla vain englanniksi</td>
    </tr>
    <tr>
      <td>Esikatselutoiminto ja säädettävä pakkaustaso</td>
      <td></td>
    </tr>
  </tbody>
</table>

### GIMP

Kun etsit avoimen lähdekoodin Photoshop-vaihtoehtoja, tulet väistämättä kohtaamaan [GIMP:n](https://www.gimp.org "GIMP website") (**GNU** **Image** **Manipulation** **Program**). Vuonna 1998 julkaistu grafiikkaohjelma Linuxille, macOS:lle ja Windowsille on jo vuosia tehnyt vaikutuksen **monipuolisten toimintojensa** ansiosta, jotka ovat hyvin samankaltaisia kuin Adoben kaupallisen mallin toiminnot. Se tukee nyt yli kolmekymmentä tiedostomuotoa, mukaan lukien **GIF, WebP, JPEG ja PNG,** jotka ovat tärkeitä tiedostomuotoja verkossa. Tämä tarkoittaa, että voit milloin tahansa muuntaa kuvatiedostosi johonkin näistä verkkotiedostomuodoista GIMP-ohjelmiston avulla.

[![Kuva: Screenshot of GIMP](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/e/b/csm_gimp-export-image-webp_a55d67029f.webp "Screenshot of GIMP")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/gimp-export-image-webp.png) Exporting image as WebP with GIMP Kuvien muuntamisen pienempään tiedostomuotoon lisäksi GIMP tarjoaa myös **edistyneitä vientivaihtoehtoja**, joiden avulla voit helposti pakata kuvia. Aseta **pakkausaste** liukusäätimellä. Laajennetut vaihtoehdot ovat myös käytännöllisiä: jos esimerkiksi aktivoit ”Progressive”-ominaisuuden, tulos on hieman suurempi, mutta yksittäiset **alueet ladataan tietyssä järjestyksessä**, joten jo lyhyen latausajan jälkeen näkyviin tulee karkea näkymä koko kuvasta.

<table>
  <thead>
    <tr>
      <th><strong>Edut</strong></th>
      <th><strong>Haitat</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Avoin lähdekoodi</td>
      <td>Esikatselu näyttää vain tuloksen tiedostokoon</td>
    </tr>
    <tr>
      <td>Pakkausaste on säädettävissä</td>
      <td></td>
    </tr>
  </tbody>
</table>

### PNGGauntlet

Ilmainen [PNGGauntlet](https://pnggauntlet.com "PNGGauntlet website")-ohjelma tarjoaa **graafisen käyttöliittymän** kolmelle avoimen lähdekoodin työkalulle, PNGOUT, OptiPNG ja DeflOpt, jotka on kehitetty **PNG-muotoisten kuvien optimointiin ja pakkaamiseen**. Sovellus, joka on saatavana vain Windowsille, on siten täydellinen ratkaisu hyvin pienten logojen, grafiikan ja tekstien luomiseen PNG-muodossa verkkoprojektiasi varten. **PNG-muodon** lisäksi myös **JPEG, GIF, TIFF ja BMP** ovat mahdollisia tulostusmuotoja pakkaus- tai muuntamisprosessissa.

[![Kuva: Screenshot of the PNGGauntlet interface](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/0/8/csm_pnggauntlet-compression_e9c308e23b.webp "Screenshot of the PNGGauntlet interface")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/pnggauntlet-compression.png) If you tick ‘Overwrite Original Files’, PNGGauntlet automatically replaces the original image with the newly created file. PNGGauntlet-ohjelmalla voit pakata kuvia kahdella tavalla. Voit käyttää **vakioasetuksia** lisäämällä yhden tai useamman kuvan ja painamalla sitten “Optimize!”-painiketta, tai voit ensin valita **yksilölliset asetukset** säätämällä kolmen käytettävissä olevan työkalun asetuksia napsauttamalla samannimistä painiketta. Riippumatta siitä, kumman tavan valitset, ilmainen työkalu näyttää **kuvatiedostojen uuden koon (** verrattuna alkuperäiseen) prosentteina, kun pakkaus on onnistunut.

<table>
  <thead>
    <tr>
      <th><strong>Edut</strong></th>
      <th><strong>Haitat</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Suora pinojen käsittely</td>
      <td>Ei esikatselutilää</td>
    </tr>
    <tr>
      <td>Pakkausasteen yksilöinti on mahdollista</td>
      <td>Rajoitettu PNG-tiedostomuotoon</td>
    </tr>
    <tr>
      <td></td>
      <td>Uusin versio on vuodelta 2012</td>
    </tr>
  </tbody>
</table>

### ImageOptim

Jos haluat pakata web-projektisi kuvat ja valokuvat ja tarvitset **avoimen lähdekoodin työkalun macOS-käyttöjärjestelmälle**, suosittelemme Kornel Lesinskin [ImageOptim-ohjelmaa](https://imageoptim.com/mac "ImageOptim"). Tämä GPL-lisensoitu ohjelma yhdistää useita kuvanoptimointityökaluja, kuten MozJPEG, pngquant ja SVGO, joiden avulla voit paitsi poistaa tarpeettomat **EXIF-metatiedot** myös **pakata erilaisia kuvamuotoja**, kuten JPEG, SVG, GIF ja PNG.

[![Kuva: Screenshot of ImageOptim](https://www.ionos.com/fi-fi/digitalguide/fileadmin/_processed_/a/4/csm_imageoptim-compression_d83847274c.webp "Screenshot of ImageOptim")](https://www.ionos.com/fi-fi/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/imageoptim-compression.png) Once you’ve dragged your file into the tool, the compression process begins automatically. A green tick indicates that the compression was successful. **Vedä ja pudota** -toiminnolla voit sijoittaa haluamasi kuvatiedostot ImageOptimiin, jossa ohjelma alkaa pakata niitä välittömästi. Voit kuitenkin milloin tahansa muuttaa asetuksia, **säätää pakkausastetta** ja lisätä tai poistaa vaihtoehtoja. Jatka napsauttamalla kolmea pistettä. Sen jälkeen napsauta “Uudelleen” suorittaaksesi muunnoksen vielä kerran.

<table>
  <thead>
    <tr>
      <th><strong>Edut</strong></th>
      <th><strong>Haitat</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Erilaiset pakkausominaisuudet</td>
      <td>Ei esikatselutilaa</td>
    </tr>
    <tr>
      <td>Avoin lähdekoodi</td>
      <td></td>
    </tr>
  </tbody>
</table>


This is a markdown version of: [https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-suunnittelu/pakkaa-kuvat-ilmaisten-tyoekalujen-avulla/](https://www.ionos.com/fi-fi/digitalguide/verkkosivustot/verkkosivujen-suunnittelu/pakkaa-kuvat-ilmaisten-tyoekalujen-avulla/) for AI/LLM consumption.