Näin pienennät kuvat nettisivuille ilmaiseksi

Tiesitkö, että nettisivuille ei tulisi ikinä ladata kuvia sellaisenaan suoraan kamerasta tai puhelimesta otettuna? Jos sinulla on omat tai yrityksen nettisivut tai olet joskus päivittänyt verkkosivuja, saatoitkin jo tietää, että verkkosivuilla käytetyt kuvat tulisi aina olla pienennetty kooltaan verkkoon sopivaan kokoon. Suurin syy kuvien pienentämiselle on se, että liian isot kuvat hidastavat verkkosivujen latausaikaa eli ne tekevät sivuista hitaat.

Yleensä verkkosivujen tekijät käsittelevät kuvia maksullisilla kuvankäsittelyohjelmilla kuten Photoshopilla, jota itse käytän. On täysin ymmärrettävää, että kaikilla ei ole tällaisia työkaluja käytössään. Mutta jos haluat vaihtaa itse kuvia verkkosivuillesi, tulee sinun kuitenkin pystyä ja osata pienentää kuvat verkkoon sopivaksi, että lataamasi kuvat eivät hidasta sivuasi ja siten huononna käyttökokemusta ja jopa hakukonelöydettävyyttä.

Kuvien koon pienentämisessä on myös hyvä ymmärtää tietyt raamit, jotta pystyt itse niitä optimoimaan. Tässä blogipostauksessa opetan sinulle kuvien pienentämisen perusperiaatteet verkkosivukäyttöön sekä näytän miten voit pienentää kuvia ilmaiseksi ilman maksullisia kuvankäsittelyohjelmia.

Nämä samat periaatteet toimivat kaikilla verkkosivuilla, mutta tämä postaus käsittelee asiaa Squarespacen kannalta. Jokainen Squarespace-sivusto on responsiivinen, eli se mukauttaa automaattisesti kuvien koon kävijän käyttämän laitteen mukaan.

Mistä tiedän minkä kokoisia verkkosivuille ladattujen kuvien tulisi olla?

1. TIEDOSTOKOKO
   Hyvä nyrkkisääntö verkkosivuilla olevien kuvien tiedostokoolle on, että sen tulisi olla alle 500kt, mutta all 300kt kannattaa olla tavoitteena jos priorisoit hakukoneoptimointia. Kuvienkäsittelyohjelmilla pystytään kompressoimaan kuvaa siten, että kuvan laatu ei kärsi liikaa, mutta tiedostokokoa saadaan pienennettyä.
   
   Tiedostokoko voidaan ilmoittaa joko suomeksi tai englanniksi:
   Suomeksi: Kilotavu, Kt / Englanniksi: Kilobyte, Kb
   Suomeksi: Megatavu, Mt / Englanniksi: Megabyte, Mb
   

2. KUVAN KOKO

   Squarespace -sivuille kuvakokosuositus on 1500px - 2500px. Kuvan kokoon ja muotoon vaikuttaa sen sijainti sivuilla. Eli pystykuvan kohdalle kannattaa sijoittaa jatkossakin pystymallinen kuva, että se ei muuta yleistä asettelua. Helpoimmalla pääset kun muokkaat aina kuvat 1500px leveyteen. Paitsi jos olet vaihtamassa / lisäämässä bannerikuvaa eli koko sivun levyistä kuvaa, siinä tapauksessa 2000-2500px leveys kuvalle on parempi, että se ei pikselöidy.

Näin tarkistat kuvan koon

Mac käyttäjät: Riippuen mitä Finderin näkymää käytät, osa kokotiedoista näkyy heti jo valitsemalla kuvan. Mutta voit myös kuvan ollessa mennä valikosta Työkalut —> näytä inspektori (tai klikata command + i), jolloin näet kuvan tiedot.

PC käyttäjät: Klikkaamalla “hiiren oikeaa” tiedoston kohdalla valitse ‘Properties’, josta löydät tiedostokoon ja ‘Details’ välilehdeltä löydät pikselimitat.

Millaisessa tiedostoformaatissa kuvat verkkosivuille tulisi tallentaa?

Yleistyksenä voidaan sanoa, että verkkosivuille ladattavat kuvat kannattaa tallentaa joko JPG, PNG, tai WEBP -muodossa. Myös GIF -tiedostot ovat verkkosivuille soveltuvia tiedostoformaatteja, mutta ne ovat yleensä isokokoisia ja siksi niitä on syytä käyttää harkiten. Squarespacessa kesällä 2025 tulleen muutoksen jälkeen kaikki sivustolle ladatut kuvat muunnetaan WebP-muotoon ja pystyt itse lataamaan sivuille .wepb kuvia (mikä ei aiemmin ollut mahdollista).

Valinta tallennusmuotojen välillä tulee tehdä tapauskohtaisesti kuvan käyttötarkoituksen mukaan. Karkeasti voi sanoa, että käytä pakattuja JPEG-tiedostoja valokuville, käytä PNG vain, jos tarvitset läpinäkyvyyttä ja voit käyttää WebP-formaattia entistä parempaan pakkaussuhteeseen, jos tarvitset korkeaa laatua ja nopeaa latausta erityisesti hakukoneoptimointia mielessä pitäen.

Squarespace verkkosivuille tulevien kuvien pikamuistisäännöt:

Tiedostoformaatti: Kuvien tulisi olla .jpg, .png, .gif, tai .webp muodossa

Tiedostokoko: Squarespace suosittelee lataamaan kuvia sivuille, joiden tiedostokoko on alle 500kt, jotta sivujen latausnopeus pysyy optimaalisena. Mutta voit pyrkiä myös alle 300kt tiedostokoihin jos haluat optimoida kuvia entisestään esimerkiksi hakukoneoptimointia mielessä pitäen.

Tiedoston pikselikoko: Squarespace suosittelee käyttämään sivuilla kuvia, jotka ovat 1500 - 2500 px leveitä (alle 1500px levyiset kuvat saattavat pikselöityä huonolaatuiseksi ja yli 2500px levyiset kuvat tuppaavat menemään liian suuriksi tiedostokooltaan).

LATAA TÄSTÄ ITSELLESI TIEDOSTOSUOSITUKSET TALTEEN:

Hyvä tarkistusohje verkkosivuille ladattavien kuvien tiedostoille on:

Kun kuva on tiedostokooltaan alle 500kt ja pikselileveydeltään alle 2500px, voit ladata kuvan nettisivuillesi.

Näin pienennät kuvat nettisivuille ilmaiseksi

Jos sinulla ei ole käytössäsi Photoshoppia, maksullista Canvaa tms. palvelua millä pystyt pienentämään kuvien tiedostokokoa, voit tehdä niin myös ilmaisilla työkaluilla. Jos sinulla on kuva jo oikeissa pikselimitoissa, voit käyttää esimerkiksi palvelua nimeltä Tinypng.

Ennen tiedostokoon pienentämistä, voit pienentää kuvan leveyttä suoraan koneella. Macilla teet sen näin: Kuvan ollessa auki, valitse valikosta Työkalut —> Säädä kokoa ja vaihda leveyden kohdalle haluamasi pikselileveys (jotain 1500-2500px väliltä).

1. Mene osoitteeseen tinypng.com

2. Vedä kuva/t hiirellä ‘Drop your images here’ -kohtaan

3. Ohjelma optimoi kuvia ja voit hetken kuluttua ladata ne klikkaamalla ‘DOWNLOAD ALL IMAGES’

Ei muuta kuin kuvienpienennyshommiin!