Optimizacija slik sodi med najbolj pomembne SEO naloge.
Prvič, fotografije in drugo grafično gradivo lahko resno ohromijo hitrost vaših spletnih strani. In drugič, vržene na spletno stran, v ničemer ne prispevajo k njeni vidnosti in dobremu uvrščanju v Googlu (in drugih iskalnikih).
V tem blogu boste spoznali najpomembnejše ukrepe optimizacije slik, katera orodja uporabiti in kako optimizacijo zaokrožiti v Dspotovem hišnem urejevalniku vsebin Lytee CMS.
Optimizacija slike in pomen velikosti
Na spletne strani pogosto nalagamo prevelike fotografije. S tem jih upočasnimo in najedamo potrpežljivost obiskovalca.
Vzemimo npr. našo Anjo. Tole je fotografija, ki smo jo posneli s fotoaparatom Samsung 7. Njene originalne mere so 4032x3024, velikost pa je 3,63 MB.
Kar je odločno preveč. Niti naš ekran, niti spletna stran nista tako široka. Prikazna velikost Anjine slike je 600 pixlov širine.
Pogosta zmota
Nalaganje originalne fotografije na strežnik, potem pa zgolj prilagajanje njene prikazne velikosti v urejevalniku besedila je ena najpogostejših napak.
To je tako, kot bi denimo 2 metra široko sliko tlačili v 20 centimetrski okvir. Enostavno ni praktično.
Pravilen postopek
Fotografijo velja obdelati, predno jo vnesemo v vsebino.
Anjino sliko smo naprimer, še preden smo jo naložili na strežnik, zmanjšali na širino 600 pixlov, kar je skoraj 7x manj od originalne. Fotko je smiselno tudi obrezati. Anjina proporcionalna višina je znala 450 pixlov. Mi smo jo oklestili na 375 pixlov in še dodatno pridobili nekaj prostora.
Pri merah 600x375 je bila torej velika 146KB
Primerjava
Mere | Velikost | Čas nalaganja* |
4032x3024 |
3,63 MB |
25 sec |
600x375 |
146KB |
2 sec |
* pri hitrosti 2 Mb/s
Samo s predhodnim zmanjšanjem originalne slike v predviden okvir smo torej pridobili skoraj 3,5MB prostora.
Posledično smo krepko skrajšali čas, ki ga bo spletna stran potrebovala, da jo bo pokazala obiskovalcu.
Kako zmanjšamo fotografije...in s čim
File explorer MS Windows
Elegantno lahko slike zmanjšamo že z desnim klikom miške v File explorerju Windowsev.
Dobra plat funkcionalnosti je, da lahko zajamete in obdelate več fotk hkrati. Slabša, da ni avtomatično del Oken, pač pa jo je treba dodati v obliki vtičnika. Kako uporabljamo File resizer slik in kako ga naložimo na računalnik, smo pisali v sorodnem blogu.
CMS Lytee
Če ste fotografije že naložili v CMS Lytee, vam ta nudi opcijo Edit image.
Podobne možnosti imajo tudi drugi moderni urejevalniki, kot sta Wordpress ali Shopify.
Photoshop ali podoben software
Še bolje je velikost prilagajati s programsko opremo Photoshop, ali pa spletnima aplikacijama
Ta orodja namreč ponujajo tudi možnost kompresije, s katero lahko še dodatno zmanjšamo velikost fotografije.
Kakšna kompresija
Omenjenih 146 KB namreč velja ob 100% kakovosti slike, ki pa je na internetu pravzaprav ne potrebujemo.
Drugače rečeno, kakovost lahko oklestimo, brez da bi se to na internetu poznalo.
Pixlr
Vzemimo denimo Pixlr. Vanj smo
- Potegnili fotografijo,
- Zmanjšali velikost na 600x450
- Jo obrezali na 600x375
- In pritisnili na Save image.
Save image nam avtomatično ponudi izbiro formata (jpeg, png, bmp, tiff, pxd), pri čemer pustimo kar jpeg. Kvaliteto pa lahko nastavimo na spodnjem drsniku. Ponavadi zadostuje že 50% kakovost.
Nad gumbom OK je jasno vidno kakšna bo velikost fotke po kompresiranju. Namesto 146 KB bo torej velika le še 25KB.
ImageOptim
Dobra alternativa Pixlr-u je ImageOptim.
Program je treba namestiti na računalnik. Uporaba je enostavna. Fotografijo enostavno povlečete na obdelovalno površino, ostalo ImageOptim postori sam.
Sicer ni nujno, da bo fotografija na koncu zasedala manj prostora, kot če bi jo na Pixlru oklestili na 50%. Bolj pomembno je, da ne klesti na računkvalitete, ampak odstrani balast, ki ga slika ne potrebuje.
Kaj pa Google
Fotografije pogosto pomembno vplivajo na obisk z Googla. Na dva načina. Na eni strani pomagajo k boljšemu razumevanje vsebine ali članka, in s tem prispevajo k boljši uvrstitvi v rezultatih iskanja.
Hkrati pa tudi same tekmujejo za najvišja mesta v Googlu. Če seveda Google razume, s katero temo, oziroma ključno besedo je fotografija povezana. O tem kako najdemo ključne besede, ki jih ljudje uporabljajo, smo že pisali v sorodnem blogu.
Google je v prepoznavanju motivov na fotografijah sicer vse boljši, še vedno pa toplo priporočamo naslednje korake.
Slike poimenujte opisno
Ime datoteke
Slike s fotoaparatov in telefonov so praviloma poimenovane s številkami. Z datumom nastanka.
Uredniki spletnih strani jih pogosto ne preimenujejo.
Na ta način Googlu ne razkrivajo namena, niti vsebine fotografije. Morda ta še razume, da je na sliki plavolaso dekle pred računalnikom. Kakšno zvezo ima s člankom, mu ni jasno, in je verjetno ne bi ponudil niti, če bi kdo iskal "plavolaso dekle za računalnikom", kaj šele, če bi iskali "kako optimiziramo slike".
Za potrebe našega članka lahko denimo fotki nadenemo ime: anja-optimizira-fotografije.JPG.
Ali pa: plavolaska-za-racunalnikom.jpg, če je naslov teme: Računalništva vešča dekleta.
Pazite, da besede ločite z vezaji. Takole zgleda vnos slike v orodju CMS Lytee.
Optimizacija slik z Alt opisom
Še en neboleč, enostaven in učinkovit prispevek optimizaciji je alt opis. V okencu Vstavi sliko ga izpolnite v drugi vrstici.
Alt razkriva identiteto slike. Ko gremo čez njo na spletni strani, se alt pokaže tudi kot kratko besedilo.
Alt je praktičen na več načinov. Tudi če prihaja do težav pri prikazovanju slike bo alt opis vedno izpisal. Hkrati olajša branje slike slepim in slabovidnim.
Kar se Googla tiče, prispeva k prepoznavanju in boljši uvrstitvi.
Mimogrede. Nekateri vpisujejo tudi title, ampak praviloma alt povsem zadovoljivo
Kako preverimo optimiziranost slike
Glede na negativen vpliv na uporabniško izkušnjo, velja optimiziranost fotk preveriti večkrat.
Google pagespeed za razvijalce je odlično brezplačno orodje za preverjanje, katere slike vplivajo na hitrost nalaganja, oziroma kje se da prihraniti na času.
Vanj enostavno vpišete svojo domeno in počakate, da zmelje.
Pagespeed razkriva tudi druge rezerve glede hitrosti nalaganja. V primeru, da so slike OK, bo to označil s kljukico.
Kar se optimizacije imen in opisov slik tiče, lahko to preverite v urejevalnikih, ali pa če na sliko kliknete z desno tipko miške in izberete Inspect element, oziroma Preglej.
Odprlo se bo novo okno, v katerem boste dobili vpogled v kodo.
Bodite pozorni na tekst pred končnico ".jpg" in kaj vsebuje alt.
Zaključek
- Optimizirajte velikost slik. Vedno.
- Kompresirajte slike. Vedno.
- Poimenujte slikovne datoteke opisno.
- Dodajte alt besedilo
- Tekoče preverjajte optimiziranost slik