Näin pienennät kuvat nettisivuille ilmaiseksi
Tiesitkö, että verkkosivuille ei kannata koskaan ladata kuvia suoraan kamerasta tai puhelimesta?
Jos olet joskus päivittänyt omia verkkosivuja, tiedät ehkä jo miksi: liian suuret kuvat hidastavat sivustoa huomattavasti.
Ja hitaat sivut = huonompi käyttökokemus, kärsimätön kävijä ja pahimmillaan myös heikompi näkyvyys Googlessa.
Hyvä uutinen? Kuvien optimointi ei välttämättä vaadi kallista kuvankäsittelyohjelmaa kuten Adobe Photoshopia tai Lightroomia.
Tässä blogissa käydään läpi selkeästi:
minkä kokoisia kuvien tulisi olla verkkosivuilla
mitä tiedostomuotoa kannattaa käyttää
miten kuvia voi pienentää ilmaiseksi
ja mitä kannattaa huomioida erityisesti Squarespacessa
Nämä samat periaatteet toimivat käytännössä kaikilla verkkosivualustoilla, mutta tässä postauksessa käsitellään asiaa erityisesti Squarespacen näkökulmasta.
Miksi kuvien pienentäminen on tärkeää?
Puhelimella tai kameralla otettu kuva voi helposti olla:
5–15 Mt kokoinen
yli 4000 px leveä
Verkkosivuilla näin iso kuva on yleensä täysin turha. Selain joutuu lataamaan valtavan tiedoston, vaikka käyttäjä näkisi siitä vain pienen version.
Siksi kuvat kannattaa:
pienentää oikeaan pikselikokoon
pakata kevyemmiksi
tallentaa verkkosivuille sopivassa formaatissa
Squarespace kyllä optimoi kuvia automaattisesti jonkin verran, mutta se ei tarkoita, että kuvia voisi ladata täysin huoletta alkuperäisessä koossaan.
Mistä tiedän minkä kokoisia kuvien pitäisi olla?
1. Tiedostokoko (kt / Mt)
Hyvä nyrkkisääntö verkkosivuille:
alle 500 kt = hyvä
alle 300 kt = erinomainen erityisesti hakukoneoptimoinnin kannalta
Mitä pienempi tiedostokoko, sitä nopeammin sivu latautuu.
Tiedostokoot lyhyesti:
Kilotavu = Kt / KB
Megatavu = Mt / MB
2. Kuvan pikselikoko
Squarespace suosittelee yleensä:
1500–2500 px leveitä kuvia
Käytännössä:
tavalliset kuvat → noin 1500 px leveys
bannerikuvat / koko sivun levyiset kuvat → 2000–2500 px leveys
pieninä käytettävät kuviot, ikonit, yms. voivat olla hyvin alle 500 px leveitä
Jos kuva on liian pieni, se voi näyttää suttuiselta tai pikselöityä.
Jos taas kuva on valtavan suuri, tiedostokoko kasvaa turhaan.
Helppo muistisääntö:
Muokkaa suurin osa kuvista 1500 px leveiksi.
Näin tarkistat kuvan koon
Mac
Valitse kuva Finderissa → paina:
command + i
Tai:
Työkalut → Näytä tiedot
Näet:
tiedostokoon (koko)
pikselimitat (mitat)
tiedostomuodon (laji)
Windows / PC
Klikkaa tiedostoa hiiren oikealla →:
Properties / Ominaisuudet
Sieltä löydät:
tiedostokoon
Details-välilehdeltä pikselikoon
Missä formaatissa kuvat kannattaa tallentaa?
Yleisimmät verkkosivuille sopivat tiedostomuodot ovat:
JPG / JPEG
PNG
WEBP
GIF
JPG / JPEG
Paras valinta valokuville.
kevyt
toimii kaikkialla
hyvä pakkaussuhde
PNG
Käytä vain silloin kun tarvitaan:
läpinäkyvä tausta kuvalle
erittäin tarkkaa grafiikkaa
PNG:t ovat usein raskaampia kuin JPG:t.
WEBP
Moderni tiedostomuoto, joka:
säilyttää hyvän laadun
pitää tiedostokoon pienenä
Squarespace muuntaa nykyään ladattuja kuvia automaattisesti WebP-muotoon, ja myös .webp-kuvien lataaminen onnistuu nykyään suoraan.
WEBP on erinomainen vaihtoehto erityisesti silloin, kun:
haluat nopeammat sivut
panostat hakukoneoptimointiin
sivulla on paljon kuvia
GIF
GIF toimii verkkosivuilla, mutta:
⚠ tiedostokoot voivat olla todella suuria.
Käytä siis harkiten.
Squarespace-kuvien pikamuistisäännöt
Tiedostoformaatti
Käytä mieluiten:
.jpg
.webp
Mutta voit myös tarpeen mukaan hyödyntää:
.gif
.png
Tiedostokoko
Pyri:
alle 500 kt
mieluiten alle 300 kt
Pikselikoko
Useimmiten:
1500–2500 px leveys
Miten pienentää kuvia ilmaiseksi?
Et tarvitse välttämättä maksullisia kuvankäsittelyohjelmia. Tässä muutama vaihtoehto:
TinyPNG
Superhelppo:
raahaa kuva sivulle
palvelu pakkaa sen automaattisesti
lataa valmis kuva takaisin koneelle
Toimii myös WEBP- ja PNG-kuville.
iLoveIMG
Hyvä erityisesti silloin kun:
haluat pienentää useita kuvia kerralla
muuttaa pikselikokoa
rajata kuvia nopeasti
Canva
Canvalla voit:
muokata kuvan kokoa
tallentaa sen kevyempänä
tehdä samalla grafiikoita verkkosivuille
Pro versiossa on laajemmat säätömahdollisuudet, jolloin voit koneelle latausvaiheessa valita pienemmän tiedostokoon, kuvan fyysisen koon sekä säätää myös kuvan laatua. Nämä kaikki vaikuttavat kuvan tiedostokokoon. Tai voit halutessasi täpätä ‘Rajoita tiedoston kokoa’ ja antaa suoraan haluamasi maksimitiedostokoon:
Squoosh
Googlen ilmainen työkalu vähän nörteille (hyvällä tavalla 😄).
Näet reaaliajassa:
paljonko kuva pienenee
miltä laatu näyttää
mikä formaatti toimii parhaiten
Bonusvinkki Squarespace-käyttäjille
Squarespace tekee nykyään kuville yllättävän paljon automaattista optimointia:
muuntaa kuvia usein .webp-muotoon
luo eri kokoja eri näytöille
käyttää lazy loadingia
pakkaa kuvia automaattisesti
Eli sinun ei enää tarvitse “mikro-optimoida” jokaista kuvaa ennen uploadia. Mutta älä silti lataa suoraan isokokoisia kuvatiedostoja sivulle
Jos sivustosi tuntuu hitaalta, syy on todella usein liian suurissa kuvissa (tai jos sivuilla on käytetty paljon kustomoitua koodia). Kuvien optimointi on yksi helpoimmista tavoista nopeuttaa verkkosivuja ilman teknistä säätöä. Ja mikä parasta: kävijät, Google ja verkkosivusi kiittävät.
Hyvä nyrkkisääntö:
optimoi järkevästi — älä täydellisyyttä tavoitellen.
Hyvä tarkistusohje verkkosivuille ladattavien kuvien tiedostoille on:
