DSPOT d.o.o. - internetne rešitve
Stritarjeva 6a
Kranj
4000
Slovenija
podpora@dspot.si Facebook Google+ Instagram
POVPRAŠEVANJE

Zakaj je potrebna optimizacija slik. Kako jo Izpeljemo.

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.

 

Anja optimizira slike

 

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. 

 

Optimizacija slik v File explorerju

 

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.

 

Lytee explorer slik

 

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

  1. Potegnili fotografijo,
  2. Zmanjšali velikost na 600x450
  3. Jo obrezali na 600x375
  4. 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.

 

Anja pixlr image

 

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. 

 

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. 

 

Neoptimizirana slika brez imena  

 

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".

 

Optimizacija slik in ključnih elementov

 

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 slike v Lytee-ju

 

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.

 

Google pagespeed

 

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.

 

Pogled v kodo slike

 

Zaključek

  1. Optimizirajte velikost slik. Vedno.
  2. Kompresirajte slike. Vedno.
  3. Poimenujte slikovne datoteke opisno.
  4. Dodajte alt besedilo
  5. Tekoče preverjajte optimiziranost slik
Deli na:

Želimo vam pomagati pri vašem projektu, zaupajte nam svoje želje.

 

Ustvarimo projekt