Lukemalla tämän postauksen:
- tiedät mitä kuvien optimointi verkkosivuille tarkoittaa ja miksi jokaisen täytyy tehdä se, ennen kuin lataa kuvat sivustolle
- osaat optimoida kuvat verkkosivuillesi
Postauksen sisältö
Kuvien optimointi kotisivuille
Kuvien lisääminen kotisivuille on tärkeää visuaalisen ilmeen luomiseksi. Kannattaa muistaa, että kuvien optimointi on yhtä tärkeää, jotta verkkosivustosi toimii sujuvasti ja nopeasti. Tässä postauksessa käydään läpi, miten voit helposti optimoida kuvasi ja parantaa verkkosivujesi nopeutta!
Miksi kuvien optimointi on tärkeää?
Hyvin optimoidut kuvat parantavat verkkosivustosi latausnopeutta. Nopeasti latautuvat sivut tarjoavat parempaa käyttäjäkokemusta ja tämä todennäköisesti vähentää poistumisprosenttia. Sivujen latausnopeus on erityisen tärkeää, sillä useimmat käyttäjät odottavat sivujen latautuvan vain muutamassa sekunnissa.
Hakukoneet, kuten Google, arvostavat nopeita sivustoja. Jos kuvat ovat liian suuria ja hidastavat latausaikoja, sivustosi hakukonesijoitus voi kärsiä tästä.
Lue lisää: Kaikki mitä sinun tarvitsee tietää hakukoneoptimoinnista
Kuinka kuvat optimoidaan verkkosivuille
Kuvat täytyy optimoida verkkosivuille, käytit sitten mitä tahansa verkkosivualustaa.
Vaikka esimerkiksi Squarespace tarjoaa mahdollisuuden ladata Unsplashista suoraan kuvia omille verkkosivuille (ilman, että sinun täytyy tallentaa niitä tietokoneellesi ensin), suosittelen ettet tee niin. Jos lataat kuvat suoraan verkkosivuillesi Unsplashista, ne tulevat sinne jättimäisen suurina tiedostokokoina ja se puolestaan hidastaa verkkosivujasi todella paljon. Mene siis mieluummin ensin Unsplashiin, valitse haluamasi kuvat ja optimoi ne tämän artikkelin ohjeiden mukaan. Lataa ne vasta tämän jälkeen Squarespace-kotisivuillesi.
Lue lisää: Näin luot WordPress-verkkosivut yrityksellesi ilman kokemusta
Kuvan valinta
Valitse oikeat kuvat yrityksesi brändin ja viestin mukaisesti. Kun verkkosivustolle tulevat kuvat on valittu, aloitetaan niiden optimointi. Mikäli sinulla on oma kuvapankki – hienoa, käytä niitä. Mikäli sinulle ei ole omia kuvia, voit katsoa ilmaisista kuvapankeista, kuten Pexels ja Unsplash brändiisi sopivia kuvia.
Lue lisää: 5 helppoa askelta brändisi rakentamiseen
Kuvien nimeäminen
Nimeä kuvat relevantisti, jotta löydyt paremmin hakukoneista. Kuvan nimi kertoo hakukoneille mitä kuvassa on. Lataa siis kuvat verkkosivustollesi oikeilla nimillä. Käytä kuvien nimissä avainsanoja, jotka liittyvät sisältöön. Esimerkiksi ”verkkosivu-uudistus” on informatiivisempi kuin ”IMG_1234”.
Valitse oikea Kuvaformaatti
Käytä oikeaa tiedostomuotoa, kun lataat kuvat verkkosivuillesi. JPEG on hyvä valinta valokuville, koska se tarjoaa hyvän laadun pienellä tiedostokoolla. PNG on erinomainen valinta, jos tarvitset läpinäkyvän taustan. Yleisesti PNG-tiedostot ovat suurempia, kuin JPEG-tiedostot.
⭢ Mikäli käyttämäsi verkkosivualusta tukee uudempia kuvaformaatteja, esimerkiksi .WebP-tiedostomuotoa, kannattaa käyttää sitä. .WebP on melko uusi tiedostomuoto, joka on suunniteltu pakkaamaan kuvat vielä tehokkaammin kuin JPEG- tai PNG-tiedostomuodot. Esimerkiksi Squarespace ei tätä tiedostomuotoa tue (vielä), mutta WordPress tukee.
Pienennä ja pakkaa kuvat, ennen kuin lataat ne verkkosivuillesi
Älä siirrä suoraan puhelimesta tai tietokoneeltasi kuvia kotisivuillesi. Pienennä ja pakkaa ne aina ennen siirtoa.
⭢ Jos et tiedä, kuinka katsot kuvatiedostosi koon tässä kuvallinen ohje. Mene tietokoneellasi valitsemasi kuvan kohdalle, klikkaa hiiren oikealla ja valitse Ominaisuudet. Sen jälkeen näet enemmän tietoja kuvastasi, kuten tiedostotyypin ja koon.

Pidä kuvien koko pienenä (noin 100KB). Kannattaa huomioida, että jo yli 200KB suuruiset kuvat saattavat jo hidastaa kotisivujesi latausaikaa. Voit pienentää kuvat esimerkiksi Photoshopilla, jollain vastaavalla kuvankäsittelyohjelmalla tai jopa Paintilla. Eli ensin pienennät kuvan kokoa (korkeus ja leveys) ja lopuksi vielä pakkaat sen. Pakkaaminen, eli kompressointi tarkoittaa että tallennat kuvan esimerkiksi 70% laadulla, et todennäköisesti huomaa mitään eroa mutta tiedostokoko pienenee merkittävästi.
Ilmaisia, selaimessa toimivia kuvankäsittelyohjelmia tai -kuvanpakkausohjelmia ovat esimerkiksi:
⭢ BeFunky
⭢ Photopea
⭢ TinyPNG
Nämä ohjelmat toimivat siten, että menet jollekin näistä sivuista, lataat kuvasi sinne ja lopuksi lataat kuvan takaisin koneellesi. Huomioi kuitenkin, että ei kannata siirtää ilmaispalveluihin mitään arkaluontoista materiaalia.
Kun olet pienentänyt ja pakannut kuvasi, sen jälkeen voit ladata kuvat verkkosivuillesi.
Yhteenveto
Näin optimoit kuvatiedostot verkkosivuillesi. Tämä on todella tärkeää, eikä sitä kannata laiminlyödä vain siksi että ei jaksa paneutua asiaan. Tämä on erittäin simppeli homma, eikä vaadi kuin pienen toimenpiteen. Optimoimalla kuvasi huolehdit kotisivujesi latausajasta, sillä kuvat ovat suuri webhotellisi levytilan täyttäjä.
⭢ Muokkaa kuvatiedoston nimi relevantiksi
⭢ Pienennä kuvan korkeutta ja leveyttä
⭢ Pakkaa kuva
⭢ Lataa mieluiten max. 100KB suuruinen tiedosto kotisivuillesi
⭢ Muista antaa kuvalle lopuksi alt-teksti
0 kommenttia