Inimestele meeldivad kiiresti avanevad kodulehed. Kui Sinu ettevõtte lehe laadimiseks kulub üle kümne sekundi, on selle põrkemäär 123% suurem kui kiirematel lehtedel. Samas ei taha keegi surfata vaid tekstipõhistel veebilehtedel, pildid aga aeglustavad laadimist. Kuidas siis teha nii, et lambad oleksid terved ja hundid saaksid söönuks? Lahendus on kodulehtede optimeerimine.
Seekordses artiklis räägime lähemalt sellest, kuidas väärtustada kodulehte ilusate piltidega, tagades samas kiire ja sujuva kasutajakogemuse, aga ka sellest, kuidas anda fotodele mõistlikud nimed ja kirjutada head alt-tekstid.
Selguse mõttes olgu kohe lisatud, et kiired ja asjakohased kodulehed meeldivad peale inimeste ka otsingumootoritele. Kui leht avaneb ruttu, sellel on kasutatud saidi põhiteemadega seotud fotosid, mis on ka tabava nimega ja hästi kirjeldatud, tähendab see otsingumootori jaoks, et tegu on väärt lehega, mida tulemustes kõrgemal kuvada. Samuti tulevad sellised pildid paremini välja ka Google’i pildiotsingus. Seega mängib fotode optimeerimine tähtsat rolli ka kodulehtede optimeerimisel otsingumootoritele, mistõttu tasub sellele kindlasti tähelepanu pöörata.
Failide töötlemine
Kodulehe mõistlikuks kogusuuruseks peetakse üldiselt 1–2 MB. Seega on ilmne, et kuigi 5 MB fotofail võib sisaldada väga kvaliteetset ja efektset pilti, ei ole mõtet seda kodulehele sellisel kujul üles laadida. Kvaliteetfoto vastuvõetav suurus veebis on 150 kB, lihtsamatel piltidel alla 100 kB.
Selliste numbriteni jõudmiseks, hoides siiski kvaliteeti, mida on ekraanilt ka hea vaadata, tuleb pilti enne üleslaadimist töödelda: muuta vormingut, suruda fail väiksemaks kokku (compressing) või teha pilt mõõtmetelt väiksemaks (resizing).
- Vormingu muutmine
Eri failivormingud sobivad eri tüüpi pildimaterjali jaoks. Üldiste fotode ja ekraanipiltide jaoks sobib hästi JPG, kui vajad täpseid detaile ja kõrget eraldusvõimet, vali PNG, logode, ikoonide, tekstide ja lihtsate piltide jaoks aga kasuta SVG-d.
- Faili kokkusurumine
Kui vorming paigas, aga fail on ikka hiiglaslik, suru see kokku. Seda saab ideaalselt teha moel, kus andmemahtu kulub kordi vähem, ekraanil paistval pildil palja silmaga erinevust aga ei märka. Piltide kokkusurumiseks on saadaval eri tööriistu ja teenuseid, näiteks TinyPNG, ImageOptim, JPEGmini või RIOT.
- Pildi suuruse muutmine
Veel üks viis piltide andmemahu vähendamiseks on muuta nende mõõtmeid ja pikslisuurust. Inimesed surfavad veebis tihti telefoni või sülearvuti ekraanil, mistõttu ei võida Sa ülisuurest resolutsioonist mitte midagi. Võid seda vähendada käsitsi näiteks Photoshopi, GIMP-i, Canva või isegi Paintiga või siis osta sisse näiteks Krakeni või Cloudinary teenust, mis teeb töö Sinu eest ära automaatselt.
Lehe laadimiskogemuse optimeerimine
Peale piltide optimeerimise saab kodulehti sujuvamaks ja kasutajatele mugavamaks muuta ka laadimiskogemust timmides.
- Üks võimalus on näidata esmalt foto madala kvaliteediga versiooni, et inimesel oleks lehele jõudes midagi juba vaadata. Hetke pärast avaneb siis täissuuruses pilt, kuid versiooni vahetust inimene ei märka.
- Teine kaval alternatiiv on laisk laadimine, kus täielikult avatakse lehe vaid need pildid, mis on parasjagu kasutajale nähtavad. Kõik, milleni jõudmiseks on vaja allapoole liikuda või linki klikkida, laaditakse alles siis, kui sirvija seda konkreetselt vaatama suundub. Laisa laadimise rakendamiseks saab kasutada pistikprogrammi, näiteks Jetpack Boosti, Smushi või Lazy Loaderit, või siis saab selle lisada lehe koodi.
Fotode optimeerimine: tekstid
Kodulehele laetavate piltide tehniliste näitajate kõrval, õigupoolest ees, on võtmeroll fotode sisul, mis peab olema mõistetav nii tavakasutajale, vaegnägijale kui ka otsingumootoritele. Seetõttu tuleb ka failile lisatavad tekstid hoolega läbi mõelda.
Faili nimi peaks kirjeldama kujutatu sisu ja viitama ka teemale, millele on kodulehe optimeerimine keskendunud. Hea on näiteks „Ratsavõistlus Läänemaal“, mitte „image 1234“. Vältida tuleks siiski kordusi ja mõttetult märksõnade rittaladumist (nt „Ratsavõistlus ratsutamine koolisõit ratsutamistrenn“) lootusega otsingumootoritele paremini silma jääda. See mõjub ebaloomulikuna, võib liigituda spämmiks ja vähendada Sinu lehe usaldusväärsust.
Kui kodulehe optimeerimine käsil, mängivad oma osa ka fotode alternatiivtekstid ehk alt-tekstid. Needki peavad olema kooskõlas sisulehega ja kirjeldama nähtut, sest kui foto ei ole veel alla laetud, on esimesena näha selle alt-tekst. Samuti loetakse see ette lehte külastavatele vaegnägijatele, sageli on tekst nähtav, kui hiirega pildi peale liikuda, ning ka otsingumootorid kasutavad seda otsingutele parimate vastete leidmiseks.
Hea alt-teksti kirjutamiseks järgi neid reegleid:
- Kasuta konkreetseid ja asjakohaseid sõnu. Võrdle „muuseum“ ja „Meremuuseumi avamisüritus“.
- Kasuta loomulikku keelt ja kirjavahemärke. Väldi lühendeid, žargood jms, mis võivad tekitada segadust. Võrdle „EKP III kv“ ja „Euroopa Keskpank avaldas kolmanda kvartali viimased rahapoliitilised otsused.“
- Nii nagu faili nimes, väldi märksõnadega liialdamist ka alt-tekstides. Võrdle „Läänemaa XYZ tallis toimusid vanuseklassi 10–17 koolisõidu võistlused“ ja „Ratsavõistlused koolisõidus võistlemine hobuste tall ratsutamistrenn“.
- Lisa olulist infot ja konteksti. Näiteks, kui pildis on teksti või andmeid, võta need kokku ka alt-tekstis. Samuti märgi ära, kuhu pilt viib, kui sellele on lisatud CTA ja link.
- Kasuta lühikesi ja lihtsaid tekste. Optimaalne alt-teksti pikkus on 10–15 sõna või umbes 125 tähemärki. Pikemaid tekste võivad otsingumootorid ja ekraanilugejad kärpida või vahele jätta, lühemaga võib jääda midagi tähtsat ütlemata.
Kui tekstid valmis, lase neid mõnel veebis leiduval tööriistal analüüsida ja hinnata. Selleks sobivad näiteks Google’i Lighthouse, WebAIM-i WAVE või Mozi Image Alt Text Checker. Kui vaja, kohenda tekste.
Nüüd võidki piltide kaudu kodulehe optimeerimisega pihta hakata. Tee enne fotode töötlemist ja tekstide kirjutamist kiirustest, et näha, kui sujuvalt koduleht avaneb. Kui töö tehtud, tee teine test, et konkreetsetest edusammudest rõõmu tunda 😊Kui vajad tööriistade-teenuste valikul abi või soovid kogu fotode optimeerimise edasi delegeerida, pöördu julgelt Hundredi meeskonna poole!