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.
Mistä tiedän minkä kokoisia verkkosivuille ladattujen kuvien tulisi olla?
TIEDOSTOKOKO
Hyvä nyrkkisääntö verkkosivuilla olevien kuvien tiedostokoolle on, että sen tulisi olla alle 500kt. 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, MbKUVAN 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.
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 tai PNG -muodossa. Mutta myös GIF -tiedostot ovat verkkosivuille soveltuvia tiedostoformaatteja ja jotkut verkkosivualustat hyväksyvät Googlen oman .webp muodon (mutta Squarespace ei tällä hetkellä kun vuosi on 2023). Valinta tallennusmuotojen välillä tulee tehdä tapauskohtaisesti kuvan käyttötarkoituksen mukaan. Yleensä kuvat voi tallentaa aina JPG -muodossa, ellei kuva edellytä läpinäkyvyyttä, jolloin kuvaformaatiksi soveltuu PNG. Tässä postauksessa käsittelen nyt JPG -tiedostoja.
Squarespace verkkosivuille tulevien kuvien pikamuistisäännöt:
Tiedostoformaatti: Kuvien tulisi olla .jpg tai .png muodossa
Tiedostokoko: Squarespace suosittelee lataamaan kuvia sivuille, joiden tiedostokoko on alle 500kt, jotta sivujen latausnopeus pysyy optimaalisena.
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 Photoshopia, pystyt pienentämään kuvia myös ilmaisilla työkaluilla. Jos sinulla on kuva jo oikeissa pikselimitoissa, voit käyttää palvelua nimeltä Tinypng tai CloudPresso, joilla voit hyvin helposti pienentää tiedoston kokoa.
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ä).
Toinen vaihtoehto on käyttää palvelua nimeltä Pixlr. Tässä ohjeet miten pienennät sillä sekä kuvan pikselikokoa, että tiedostokokoa:
1. Mene osoitteeseen pixlr.com/e ja klikkaa ‘start editing’
2. Avaa kuva, jota haluat muokata valitsemalla ‘Open image’
3. Voit valita jo heti tässä vaiheessa ‘pre-size image’ ja pienentää kuvaa webiin sopivaksi. Valitse tässä kohtaa siis ‘web’ ja anna uudet haluamasi pikselimitat ‘new size’ -lokeroihin. Riittää kun syötät leveyden mitan oikeanpuolimmaiseen lokeroon. Kuvasuhde pysyy samana automaattisesti, eli pystymitta vaihtuu automaattisesti leveyden tiedon mukaan . Klikkaa lopuksi ‘apply’.
4. Voit myös muokata kuvakokoa vielä tämänkin jälkeen (pienemmäksi, mutta ei isommaksi) kohdasta image / image size yläpalkissa:
5. Kun olet muuttanut kuvan pikselikoon sellaiseksi millaisena kuva tarvitaan nettisivuilla, seuraavaksi tallennetaan kuva verkkoon kompressoidussa muodossa. Klikkaa ylävalikosta ‘File’ ja valitse ‘Save’:
6. Valitse tiedostomuodoksi JPG. Quality slideria liikuttelemalla pystyt valitsemaan miten pieneen kokoon kuvan tiedostokoon haluat ja vasemmalla näkyvässä kuvassa valitun tason vaikutukset kuvassa (mitä pienempi tiedostokoko, sitä huonompi kuvan laatu). Pyri saamaan tiedostokoko alle 500kt. Klikkaa lopuksi ‘download’, jotta saat kuvan ladattua itsellesi talteen. Tiedosto kannattaa nimetä eri nimellä kuin alkuperäinen, että erotat kumpi versio on kumpi. Huom. Kuvan tiedostokoko ilmoitetaan englanniksi kb ( = kilobyte) ja suomeksi se on kt ( = kilotavu), eli kb tarkoittaa samaa kuin kt.
Tässä esimerkissä käyttämäni kuvan alkuperäinen kuvakoko oli 5551 x 3701px ja tiedoston koko on 6,4 MT eli aivan liian iso verkkosivukäyttöön. Tämän kuvapienennyksen jälkeen kuvakoko on 2000 x 1333px ja tiedostokoko 275kt joten kuva on tässä uudessa muodossa valmis ladattavaksi verkkosivuille.
Kommentoi alle jos heräsi jotain lisäkysymyksiä! Muuten ei muuta kuin kuvienpienennyshommiin!
