Priprava slik za spletno stran – optimizacija slik za hitro spletno stran

Picture of Primož Kostanjevec
Primož Kostanjevec
Priprava slik za spletno stran in optimizacija slik

Če želiš svojo spletno stran ali trgovino izstreliti med prve zadetek v Googlu je priprava slik za spletno stran preprosto nujna. Pravilna priprava slik je namreč tako del tehnične kot vsebinske optimizacije in ima neposreden vpliv na kakovost optimizacije tvoje spletne strani ali trgovine.

Če si eden tistih, ki slike na svojo spletno stran ali spletno trgovino nalaga neposredno iz telefona ali fotoaparata potem je tole čtivo kot nalašč zate

Neustrezno pripravljene slike lahko tvoji spletni strani naredijo več škode kot koristi.

Argumenti, zakaj je priprava slik priporočljiva:

  • neoptimizirane slike so prevelike za splet in podaljšujejo čas nalaganja spletne strani
  • generična imena datotek slik niso SEO optimizirana (npr. DSC_30198.jpg)
  • slike nimajo ustreznih SEO opisov zato jih Google ne bo prikazoval med razultati iskanja

Trije ključni koraki za pripravo slik za spletno stran

Pri nas se optimizacije in priprave slik za spletno stran lotimo v treh korakih:

  1. spreminjanje velikosti in stiskanje slik (kompresija)
  2. opisno in smiselno preimenovanje datoteke slik
  3. oprema slik z ustreznimi opisi (alt text)

Poglejmo kaj posamezen korak zajema in kako ga tehnično pravilno izpeljati.

Spreminjanje velikosti in stiskanje

Fotografije neposredno iz fotoaparata ali telefona so velike. Zelo velike – lahko tudi čez 10 Mb. To je nekaj 100x več kot je za splet potrebno. Več Mb pomeni, da je potrebno od spletnega strežnika, kjer gostuje tvoja spletna stran, do računalnika obiskovalca spletne strani prenesti več podatkov. Več kot je podatkov dlje časa traja prenos in dlje časa je potrebnega, da se slika prikaže na zaslonu obiskovalca spletne strani.

Cilj tega koraka je, da naredimo čim manjše datoteke slik. Pri nas poizkušamo slike optimizirati tako, da so manjše od 100 Kb (če je to le mogoče, saj vedno ni).

  • slike pomanjšamo na primerno ločljivost in jih po potrebi obrežemo (crop)
    • če slika na spletni strani ne bo večja kot npr. 800×600 px, potem sliko pomanjšamo na to ločljivost
  • slike shranimo v ustreznem slikovnem formatu z uporabo kompresije
    • bitne slike shranjujemo v formatu WEBP z uporabo kompresije (kakovost med 80% – 90%)
    • vektorske elemente shranjujemo v formatu SVG in jih dodatno optimiziramo z brezplačnim online orodjem SVGOMG
Priprava slik za spletno stran z orodjem OMGSVG
Priprava vektorskih slik z orodjem OMGSVG

Smiselno poimenovanje datotek

Priprava slik za spletno stran zahteva tudi ustrezno in smiselno poimenovanje datotek. Uporaba generičnih imen datotek, ki jih generirajo fotoaparati in telefoni za splet ni primerna. Ime datoteke “DSC_30189.jpg” Googlu ne pove popolnoma nič.

  • opisno poimenovanje datotek in uporaba ključne besede v imenu
    • datoteke poimenujemo delno opisno (skladno s tem kar je na sliki), hkrati pa poizkušamo že v imenu datoteke uporabiti ustrezno ključno besedo, za katero bo optimizirana tudi stran na kateri bo slika
  • brez presledkov in posebnih znakov
    • pri poimenovanju pazimo, da v imenih datotek ni presledkov (namesto presledkov uporabljamo vezaje – ), šumnikov ali drugih posebnih znakov kot so vejice, procenti in podobno (nekateri strežniki in sistemi namreč ne podpirajo šumnikov in posebnih znakov)
Dodajanje nadomestnega opisa slike - alt text
Dodajanje nadomestnega opisa slike – alt text
Imaš vprašanje ali potrebuješ pomoč?

Slike opremimo z ustreznimi opisi

Ko slike naložimo v medijsko knjižnico spletne strani jih, preden jih vstavimo v vsebino strani, opremimo z ustreznimi alternativnimi oz. nadomestnimi opisi (alt text). Ti opisi so ključni za SEO, saj Googlu pomagajo razumeti, kaj je na sliki.

Čeprav se s pojavom umetne inteligence pojavljajo tudi algoritmi, ki znajo sorazmerno dobro analizirati in razumeti vsebino slike, so opisi slik še zmeraj ključen SEO dejavnik (kar pa se v prihodnje seveda lahko spremeni).

ALT opise slik tako opremimo z opisnimi besedili s katerimi na kratko opišemo vsebino slike, pri tem pa poizkušamo ponovno uporabiti ustrezne ključne besede.

Če imamo sliko osebe, ki si umiva zobe, pri tem pa ji krvavijo dlesni, hkrati pa je ključna beseda strani na kateri bo ta slika “krvavenje dlesni”, potem bi smiseln opis take slike lahko bil “Krvavenje dlesni med umivanjem zob”.

Priprava slik za spletno stran – povzetek

Dobro tehnično in vsebinsko optimizirane slike, čeprav so le majhen del kompleksne SEO sestavljanke, imajo lahko ključen vpliv na celotno SEO optimizacijo spletne strani in posledično na pozicijo tvoje spletne strani v Googlu.

Čeprav v prispevku nismo obdelali vseh tehničnih prijemov in implementacije dobrih praks (prilagoditev slik za mobilne naprave, prilagoditev slik za dostopnost…) bo taka priprava slik za spletno stran zagotovo odlična popotnica na poti k višji uvrstitvi med rezultati iskanja v Googlu.

Če se ti zdi ta prispevek uporaben te bodo morda zanimale tudi te vsebine:

Picture of Primož Kostanjevec
Primož Kostanjevec
Primož je kreativec in multimedijski navdušenec z dolgoletnimi izkušnjami na področju grafike in dizajna, oblikovanja za splet ter razvoja in optimizacije spletnih strani in trgovin. Je tudi ustanovitelj in idejni oče digitalne agencije Artbeat.

Imate vprašanje?

Prvi korak morate narediti sami, pri vseh ostalih vam bomo do cilja pomagali mi.

Preden greš

Naroči se na uporabne vsebine in nasvete. Saj veš, znanja ni nikoli preveč.

Tvojih osebnih podatkov ne bomo nikoli delili s tretjimi osebami. Poglej pravilnik o zasebnosti.