Nazaj

OPENCART ADMINISTRACIJA

Kako pripraviti in optimizirati slike

Pomembno je, da so slike naložene na spletno stran čimbolj optimizirane. Tako se spletna stran hitreje nalaga in deluje hitreje. Njihovo velikost na spletni strani lahko preverimo s pomočjo »Inspectorja« v brskalniku.

Z miškinim kazalcem se pomaknite na sliko, ki jo želite preverite. S klikom na desni gumb miške se vam bo odrl spustni meni v katerem izberite možnost »Inspector« ali v slovenščini »Preglej«. Odprlo se vam bo novo okno za pregled kode. Poiščite povezavo do naložene slike.

Optimizacija slik

Z miškinim kazalcem se le pomaknite čez to povezavo in v majhnem oknu se vam bodo pojavile lastnosti slike.

Optimizacija slik 2

Rendered size

Je dejansko potrebna velikost na gledanem ekranu  (optimalna). Velikost slike je v piksnih, ki se prikaže ob obisku strani. Optimalna velikost te slike pred nalaganjem na stran je torej 795x795px.

Instrinsic size
Predstavlja dejansko velikost slike, ki je bila naložena na stran. Slika je torej v našem primeru prevelika in po nepotrebnem upočasnuje nalaganje strani.

File size
Velikost datoteke 305kB. Po optimizaciji slike je velikost slike zmanjšana na 77kB. Ta slika se bo torej po optimizaciji naložila 4x hitreje, brez da bi pri tem vidno vplivali na kvaliteto slike.

Iz prebranih parametrov lahko v našem primeru ugotovimo, da bi rezervirana velikost slike v pikslih bila dovolj, če bi bila ovrednotena na 800×800 px. Pomeni, da lahko velikost slike razpolovimo.

Photopea

Photopea je spletno orodje za obdelavo slik, ki ga ne rabite nalagati na vaš računalnik, kot podobno profesionalno orodje Adobe Photoshop. Photopea omogoča veliko načinov obdelave slik, mi vam spodaj pikazujemo, kako zmanjšati velikost slike.

 

Pozorni bodite tudi na resolucijo (dpi) slike. Klasični ekrani namreč prikazujejo največ do 72dpi, Retina do 144dpi. Nekatere slike so zaradi predvidenega tiska izdelane v resoluciji 300dpi. S Photopea vmesnikom zmanjšajte resolucijo na optimalno (priporočamo 72dpi).

Glede na tip slike je zelo pomemben tudi format slike, ki omogoča različno kompresijo slike. Najpogosteje uporabljen je .JPG in predstavlja najboljšo razmereje med kvaliteto in velikostjo slike. PNG format uporabite le v primeru manjših slik, kjer potrebujete prozorno ozadje. 

  1. Odprite povezavo do urejevalnika: https://www.photopea.com/
  2. Povlecite sliko, ki jo želite optimizirati v okno.
  3. V zgornjem levem kotu pojdite v Datoteka > Izvozi kot > JPG
Orodje Photopea

4. V novem odprtem oknu lahko nastavite novo velikost v pikslih. Manjšo vrednost lahko nastavite na 800 px (vrednost, ki smo jo ugotovili v prejšnji sekciji navodil). Če označite ikono verige, se bo druga vrednost avtomatsko sorazmerno prilagodila tisti, ki ste jo vnesli.

Orodje Photopea 2

5. Kliknite »Shrani« in zmanjšana slika se bo prenesla na vaš računalnik.

Dodatna optimizacija

Bolj kot so slike optimizirane preden jih naložimo na strežnik, hitreje bo stran delovala in boljša bo uporabniška izkušnja obiskovalca. Tudi Google bo vašo stran ocenjeval bolje, zato je optimizacija slik obvezna praksa za ustrezno ON-Site optimizacijo.

Zelo priročno je tudi spletno orodje ImageCompressor, ki vaše slike dodatno kompresira. Pred tem jih pripravite na ustrezno velikost in resolucijo!.

Priporočamo uporabo tega: https://imagecompressor.com/

Postopek:

  1. V odpro okno povlecite sliko za optimizacijo.
  2. Z drsnikom desno od prikaza slike lahko zmanjšujete kvaliteto in hkrati se bo nižala končna velikost datoteke slike. Vrednost zmanjšujte, dokler ne bo kvaliteta vidno slabša.
Stiskanje velikosti slike

 

3. Ko ste z rezultatom zadovoljni, kliknite gumb »Download«.

Optimizirana slika je sedaj pripravljena, da jo naložite na strežnik in vključite v spletno stran.

 

SEO nasvet za slike

Slika naj bo optimizirana in poimenovana tako, da vsebuje ključno besedno zvezo na katero želite optimizirati spletno stran. URL naslov slike NAJ torej vsebuje ključno besedo in NE vsebuje posebnih znakov, šumnikov ali presledkov (nadomestite jih s “-” ali “_”).