Številni uredniki in lastniki spletnih strani ter trgovin se tako osredotočajo na pisanje objav in vsebine za spletna mesta, da pozabijo na nekatere bistvene podrobnosti, kot so slike.
Če se spomnijo vključiti visokokakovostne slike, ki vsebini dodajo dodatno vrednost, pa pogosto pozabijo, da te slike optimizirajo za najboljšo izkušnjo končnega uporabnika. To pomeni stiskanje velikosti teh slik, tako da se naložijo v trenutku in s tem ne upočasnijo delovanja spletnega mesta, brez izgube vidne kakovosti, seveda.
Vse skupaj gre za občutljivo ravnovesje, ki usklajuje velikost datoteke s kakovostjo slike. Obstaja več orodij, ki vam lahko pomagajo avtomatizirati postopek. Toda preden vam predstavimo nekaj izmed teh orodij, si oglejmo vrste datotek, ki se običajno uporabljajo za slike.
JPG proti PNG
Najpogosteje uporabljene slikovne datoteke na spletu so tiste s končnico JPG. Mnogi jih imajo raje zaradi dejstva, da lahko uporabijo stiskanje, pri katerem se drastično zmanjša velikost datoteke brez večjega vpliva na končni izdelek. JPG-ji odpravljajo odvečne elemente, sloje, ki povzročajo povečanje velikosti datoteke. To pomeni, da se nalagajo hitreje, kar je odlično za vaše obiskovalce in optimizacijo vaše spletne strani (SEO)
Vendar, ko gre za podrobnosti, so JPG-ji nekoliko pomanjkljivi. To se kaže v dveh stvareh:
- Za sliko se uporabijo algoritmi stiskanja, ki zmanjšajo velikost datoteke, a vplivajo tudi na njeno kakovost
- Ko je slika podvojena ali shranjena, se kakovost te malo poslabša. Večkrat ko jo shranite, slabša bo kakovost slike. Slika izgubi na ostrini , pojavijo se sence in popačenje vzdolž robov oz. črt.
Te težave niso nujno problem, če vam slike ni treba spremeniti, preden jo naložite in/ali če ima zelo visoko ločljivost. Vendar pa veliko programov za urejanje slik privzeto nastavi srednjo kakovost. To pomeni, da bodo vaši JPG-ji že od samega začetka zamegljeni.
Potem so tu še PNG-ji. Te slike imajo običajno veliko večje velikosti datotek in so zelo visoke kakovosti. Na žalost to pomeni, da se uporabnikom nalagajo veliko počasneje, kar je lahko slabo za hitrost vaše spletne strani in optimizacijo spletišča. PNG sliko lahko podvojite in shranite kolikokrat želite, ne da bi pri tem izgubili njeno kakovost.
Ena stvar, ki jo boste opazili, ko primerjate JPG in PNG je, da je JPG ponavadi zamegljen, ko je vključeno besedilo ali znaki. PNG-ji ohranjajo ostrino in jasnost, ki ji JPG preprosto ni kos. Omogočajo tudi pregledna ozadja, zaradi česar so idealni za ikone in logotipe.
Kdaj torej uporabiti kaj? Spdaj je nekaj preprostih pravil, ki se jih morate držati
JPG format uporabite za visokokakovostne fotografije, ko vam ni treba narediti veliko sprememb na sliki, preden jo naložite (omejitev shranjevanja).
PNG format slike uporabite za fotografije z besedilom, ilustracijami, znaki, logotipi in ikonami ter katerokoli sliko, za katero želite, da je prosojna (da ima prosojno ozadje)
Najpomembneje je, da ne pozabite preveriti velikosti datoteke, ko končate. Ni strogih in hitrih pravil za omejitve velikosti slikovnih datotek, vendar v večini poskušam obdržati slike pod 100-150 KB (ali še manj)
Torej, prava izbira oblike formata slike bi morala ublažiti težave s časovnim nalaganjem spletnega mesta, hkrati pa ohraniti želeni standard kakovosti.
Stiskanje slik pred nalaganjem
Poleg prave izbire vrste datoteke za vašo spletno stran ali spletno trgovino, morate izvesti tudi nekaj dodatnih dejavnosti stiskanja, če želite pospešiti svoje spletno mesto in narediti uporabniško izkušnjo kar se da prijetno. Če želite slikovne datoteke predno jih naložite v WordPress še dodatno stisniti (zmanjšati), lahko naredite nekaj stvari.
Kot smo že povedali, bo, če delate z datoteko JPG, izgubljena. Nepotrebni podatki bodo med postopkom stiskanja odstranjeni, tako da ostane manjša datoteka slabše kakovosti. Stiskanje PNG je brez izgub; t.j. stiskanje ne povzroči izgube podatkov, tako da kakovost vedno ostane enaka.
Pri stiskanju slik na trdem disku naredite naslednje:
- Podvojite datoteko. Če se zmotite, se boste vedno lahko vrnili k izvirniku.
- Zmanjšajte obseg slike. Zmanjšajte ga na želeno velikost, obrežite in naredite vse druge spremembe, ki jih želite.
- Stisnite sliko z urejevalnikom fotografij.
- Stisnite svojo sliko z orodjem za stiskanje fotografij. Z uporabo orodja, zasnovanega posebej za stiskanje slik za splet, lahko dosežete najboljše rezultate. JPEG Optimizer, Kraken.io, Tiny PNG in Optimizilla je le nekaj primerov brezplačnih splentih orodij. Ta orodja vam omogočajo prilagajanje različnih parametrov, da dobite optimalno velikost datoteke, ne da bi pri tem žrtvovali kakovost.
Preizkusite nekaj orodij, da vidite, katera daje najboljše rezultate. In ne pozabite: najboljši rezultati tukaj pomenijo najmanjšo velikost datoteke, hkrati pa ohranjajo najboljšo možno kakovost slike.
Stiskanje slik po nalaganju
Nekateri ljudje radi obdržijo svoje spremembe slik na strani strežnika in to lahko spoštujemo. Delati vse v WordPressu je zelo priročno.
Za stiskanje slik, potem ko ste jih naložili v WordPress, lahko naredite več stvari. Najprej lahko preprosto izberete eno od prednastavljenih možnosti, preden sliko vstavite v objavo. Običajno lahko izbirate med Polno velikostjo, Srednjo in Sličico. V takšnem primeru je izvirna velikost slike še vedno na strežniku vašega spletnega mesta, vendar se prikliče manjša različica, ko si obiskovalec ogleda vašo objavo, kar skrajša čas nalaganja. Vendar to ni najbolj optimalno, saj lahko na koncu še vedno dobite precej zajetne slikovne datoteke.
Najbolj optimalen način ukrepanja je, da spremenite, kako WordPress v celoti obravnava stiskanje slik.
Če želite WordPressu preprečiti stiskanje datotek ali povečati stopnjo stiskanja datotek, lahko spremenite functions.php v svoji temi. Pomembno pa je vedeti, da uporaba te metode ne bo stisnila slik, ki ste jih v preteklosti naložili v WordPress. Velja samo za nove slike.
V primeru, ko se ne želite zapletati s PHP-jem, so na voljo za to številni vtičniki, ki naredijo te spremembe namesto vas in nudijo večjo prilagodljivost.
Primeri teh vtičnikov so:
- WP Smush.it.: Ta vtičnik omogoča veliko različnih vrst stiskanja, vključno s pretvorbo formata slike in odstranjevanjem neuporabljenih barv iz indeksiranih slik (PNG). Če namestite in aktivirate ta vtičnik, bo samodejno stisnil vse slike, ki jih naložite, vključno s tistimi, ki so že na vašem spletnem mestu.
- Optimizator slike EWWW: Ta vtičnik je robusten, stisne in optimizira vaše slike takoj, ko jih naložite. Ko ga prvič aktivirate, bo vtičnik optimiziral tudi stare slike. Deluje tako, da zmanjša velikost datoteke in ne vpliva na kakovost slike.
- Lazy Load: Kot že ime pove, ta vtičnik naloži slike le, ko so potrebne (tj. ko so vidne na zaslonu). To lahko dramatično skrajša čas nalaganja in je zelo učinkovito pri optimizaciji za mobilne naprave. Ne optimizira toliko posameznih slik, ampak optimizira izkušnjo vaših obiskovalcev, ko si jih ogledujejo.
Torej, za zaključek, če vas skrbi čas nalaganja vašega spletnega mesta in bi tega želeli še dodatno izboljšat, vam svetujemo da nekaj truda usmerite v optimizacijo svojih slik. Če boste našli zdravo ravnovesje med velikostjo in kakovostjo, boste gotovo zagotovili boljšo uporabniško izkušnjo svojih obiskovalcev.
