Stisnjene slike imajo še posebej pozitiven vpliv na čas nalaganja spletnih strani. Toda kako lahko slike stisnete na način, ki je čim bolj brez izgube – brez opazne izgube kakovosti? In katere možnosti so na voljo, da to dosežete? V tem vodniku vam bomo podali jasen pregled orodij za stiskanje slik.

Zakaj naj stisnem svoje slike?

Danes so slike in fo­to­gra­fi­je z visoko lo­člji­vo­stjo nekaj obi­čaj­ne­ga. V digitalni fo­to­gra­fi­ji se število pikslov in velikost datotek po­ve­ču­je­ta. Ne glede na to, ali slike nalagate na svojo spletno stran ali jih pošiljate po e-pošti, je vedno pomembno, da velikost datotek ohranite čim manjšo. Ne pozabite, da manjša je datoteka, manj časa je potrebno za njen prenos. To je koristno iz dveh razlogov:

  • Hiter proces nalaganja poveča za­do­volj­stvo obi­sko­val­cev (zlasti za upo­rab­ni­ke z mobilnim dostopom do interneta).
  • Hitro nalaganje ima pozitiven vpliv na uvrstitev v is­kal­ni­kih.

Pravilni format podatkov za spletne slike

Preden slike objavite na spletu, preverite format datoteke slike. Ni vsak grafični format primeren za uporabo na internetu. Tukaj je pet formatov, ki jih lahko uporabite:

  • JPG/JPEG: JPG je eden naj­po­go­ste­je upo­ra­blja­nih slikovnih formatov. Prikazuje 16,7 milijona barv in se ponaša z visoko stopnjo stiskanja. JPG-ji se večinoma upo­ra­blja­jo za shra­nje­va­nje fo­to­gra­fij ali fo­to­gra­fi­jam podobnih grafik, zlasti tistih z veliko raz­lič­ni­mi barvami in iz­ra­zi­ti­mi kontrasti.
  • PNG: Ta format lahko prikazuje med 256 (PNG8) in 16,7 milijona (PNG24) različnih barv in se uporablja na spletu. Za razliko od JPG-jev se ta format lahko stiska brez izgube kakovosti. PNG-datoteke so primerne za shra­nje­va­nje grafik, logotipov in besedil. Slike z malo barvami se lahko stisnejo v datoteke, ki so le delček ori­gi­nal­ne velikosti slike.
  • WebP: WebP je sodoben format slik, ki ga je razvil Google, da bi zagotovil boljšo stiskanje ob ohra­nja­nju visoke kakovosti slik. Podpira stiskanje z izgubo in brez izgube, kar ima za posledico manjše velikosti datotek v pri­mer­ja­vi z JPEG in PNG. Za­hva­lju­joč učin­ko­vi­tim al­go­rit­mom, kot je pre­dik­tiv­no kodiranje, lahko WebP stisne slike do 30 % manjše od JPEG pri podobni kakovosti. Format podpira tudi pro­soj­nost (alfa kanal) in animacije, kar ga naredi vse­stran­sko al­ter­na­ti­vo PNG in GIF.
  • SVG: SVG (Scalable Vector Graphics) je format slike na osnovi XML, ki se uporablja za vektorsko grafiko. Ker temelji na ma­te­ma­tič­nih opisih oblik in črt, kakovost slike ostane ne­spre­me­nje­na ne glede na povečavo. Za razliko od formatov na osnovi pikslov je mogoče velikost datotek SVG močno zmanjšati s pre­pro­sti­mi op­ti­mi­za­ci­ja­mi kode in sti­ska­njem gzip, ne da bi pri tem ogrozili vizualno kakovost. SVG je še posebej primeren za logotipe, ikone in ilu­stra­ci­je na spletu.
  • GIF: GIF datoteke so na spletu še vedno precej pogoste, čeprav lahko pri­ka­zu­je­jo le 256 barv. To je predvsem zato, ker format GIF podpira kratke animacije, narejene iz zaporedja slik, ki so še posebej pri­lju­blje­ne na družbenih omrežjih in podobnih plat­for­mah.

Možnost 1: Stiskanje slik na spletu

Če želite stisniti slike, ne da bi morali namestiti posebno pro­gram­sko opremo, lahko slike enostavno op­ti­mi­zi­ra­te tudi na spletu. Za ta namen obstajajo različne ponudbe na spletu, ki vam omogočajo brez­plač­no stiskanje slik. Orodja se običajno raz­li­ku­je­jo glede na raz­po­lo­žlji­ve datotečne formate in možne stopnje stiskanja, pogosto pa imajo omejitve glede števila stiskanj, ki jih je mogoče izvesti. Nekatere najboljše rešitve najdete v na­sle­dnjih odstavkih.

Op­ti­mi­zil­la

Spletno orodje Op­ti­mi­zil­la podjetja Mediafox Marketing omogoča hkratno nalaganje in stiskanje do 20 slik. Slike morajo biti v formatu JPEG ali PNG. Spletna apli­ka­ci­ja uporablja kom­bi­na­ci­jo različnih al­go­rit­mov stiskanja, ki se odli­ku­je­jo po dobrem razmerju med sti­ska­njem in ka­ko­vo­stjo slike. S pomočjo drsnika lahko nastavite stopnjo stiskanja, preden rezultate prenesete posamično ali skupaj v obliki ZIP datoteke.

Image: Image compression with Optimizilla
Once you’ve selected the desired com­pres­si­on level, confirm it in Op­ti­mi­zil­la by clicking ‘Apply’. In this example, the image size is reduced by 22 percent.

Da bi vam pomagali najti najboljše možne na­sta­vi­tve, Op­ti­mi­zil­la vam ponuja sličice izvirnika in njegove stisnjene različice. Poleg tega orodje navaja tudi velikost posamezne datoteke. Vse naložene slike se po eni uri samodejno izbrišejo s stre­žni­kov ponudnika.

Prednosti Po­manj­klji­vo­sti
Na­sta­vlji­vo kom­pre­sij­sko razmerje Omejeno na 20 stiskanj naenkrat
Predogled izvirnika in urejenega izgleda v obliki sličice

TinyPNG

TinyPNG omogoča – v nasprotju s svojim imenom – ne le stiskanje datotek PNG, ampak tudi datotek JPEG in WebP. V brez­plač­ni stan­dar­dni različici lahko hkrati op­ti­mi­zi­ra­te do 20 slik v teh treh formatih, pri čemer je največja velikost datoteke na sliko omejena na 5 me­ga­baj­tov.

Image: Screenshot of the TinyPNG website
After com­pres­si­on, TinyPNG will display the new size of the image file(s) and the saved file size (as a per­cen­ta­ge).

Orodje voormedia ima vnaprej določeno stopnjo stiskanja, ki je ni mogoče pri­la­go­di­ti, vendar zmanjša velikost slike do 80 %. Z uporabo funkcije povleci in spusti prenesite želene fo­to­gra­fi­je v prikazano območje in nato prenesite rezultate v formatu JPEG ali PNG ali kot datoteko ZIP. Al­ter­na­tiv­no lahko slike naložite v storitev za shra­nje­va­nje v oblaku Dropbox.

Prednosti Slabosti
Rezultate je mogoče naložiti v Dropbox Omejitev na 20 hkratnih stiskanj in velikost datoteke 5 me­ga­baj­tov (v stan­dar­dni izdaji)
Stopnja stiskanja ni na­sta­vlji­va

iLoveIMG

iLoveIMG je celoten spletni paket uporabnih orodij za urejanje slik. Razvojna ekipa s sedežem v Barceloni ponuja apli­ka­ci­je, ki omogočajo ob­re­zo­va­nje, po­manj­še­va­nje, pre­tvar­ja­nje in celo stiskanje slik. Za slednje izberite »Stisni sliko« in nato vstavite želeno slikovno gradivo s funkcijo povleci in spusti ali br­skal­ni­kom datotek. Možni formati so JPEG, PNG, SVG in GIF.

Image: Screenshot of image compression with iLoveIMG
After com­pres­si­on, you can download the images with a simple click.

Čeprav ima iLoveIMG le en sam privzeti način stiskanja, orodje ponuja več različnih možnosti izvoza. Rezultate lahko ne le prenesete na lokalni trdi disk, ampak jih tudi naložite v Google Drive in Dropbox ter po­sre­du­je­te povezavo za prenos sti­snje­nih slik. Če niste za­do­volj­ni z re­zul­ta­tom stiskanja, ga lahko preprosto izbrišete s klikom na ikono koša.

Prednosti Po­manj­klji­vo­sti
Rezultate je mogoče naložiti v Google Drive in Dropbox Samo en način stiskanja
Na voljo so dodatna orodja za ob­re­zo­va­nje, pri­la­ga­ja­nje velikosti in pre­tvar­ja­nje Ni funkcije pre­do­gle­da

Možnost 2: Stiskanje slik s programom Photoshop

Svoje slike lahko stisnete tudi s pro­fe­si­o­nal­ni­mi programi za obdelavo slik. Najbolj znan med njimi je nedvomno Photoshop. Poleg funkcij za ustvar­jal­no obli­ko­va­nje in op­ti­mi­za­ci­jo fo­to­graf­ske­ga materiala, Adobeovo orodje ponuja različne možnosti za spre­mi­nja­nje formata slike in pri­la­ga­ja­nje velikosti slike. Možnost »Shrani za splet«, ki jo je Adobe uvedel posebej za op­ti­mi­za­ci­jo fo­to­gra­fij in slik za spletne strani, je še posebej praktična za upra­vljav­ce spletnih strani. V tem načinu je mogoče stisniti ne le pomembne spletne formate GIF, PNG, WebP in JPEG, ampak tudi rastrski grafični format WBMP (Wireless Bitmap), ki je namenjen mobilnim napravam.

RjA067CaQhY.jpg To display this video, third-party cookies are required. You can access and change your cookie settings here.

Takoj ko uredite sliko v načinu op­ti­mi­za­ci­je za splet v programu Photoshop, se odpre novo okno, v katerem lahko ne le nastavite željene ciljne formate, ampak tudi op­ti­mi­zi­ra­te želeno sliko za svojo spletno stran glede barvne globine in velikosti. V oknu za predogled orodje Adobe primerja izvirno in ciljno sliko (vključno z in­for­ma­ci­ja­mi o absolutni velikosti datoteke), tako da lahko vsakič, ko sliko stisnete, zlahka vidite razliko.

Prednosti Po­manj­klji­vo­sti
Predogled v živo za do tri rezultate stiskanja Zahteva veliko ra­ču­nal­ni­ške moči
Na voljo so različne funkcije za urejanje slik Visoki stroški

Možnost 3: Stiskanje slik s prostimi in od­pr­to­ko­dni­mi programi

S programom Photoshop je stiskanje slik z namiznimi apli­ka­ci­ja­mi zelo priročno. Te ne ponujajo le precej več funkcij, ampak imajo tudi prednost pred spletnimi orodji, saj jih je mogoče upo­ra­blja­ti brez in­ter­ne­tne povezave. Če želite zmanjšati velikost slik na svoji spletni strani, pa ni nujno, da uporabite premium rešitev, kot je izdelek Adobe ali druga plačljiva al­ter­na­ti­va. Če imate omejen proračun ali vas ne zanimajo bolj zapletene funkcije za urejanje, vam lahko brez­plač­ni ali od­pr­to­ko­dni program pomaga doseči vrhunske rezultate op­ti­mi­za­ci­je fo­to­gra­fij, slik itd. Toda katero od številnih brez­plač­nih orodij je dejansko pri­po­ro­člji­vo?

IrfanView

Od leta 1996 je pre­gle­do­val­nik slik IrfanView ena najbolj pri­lju­blje­nih brez­plač­nih rešitev za osebne ra­ču­nal­ni­ke z ope­ra­cij­skim sistemom Windows. Po podatkih raz­vi­jal­ca je orodje v povprečju preneseno približno mi­li­jon­krat na mesec! To im­pre­siv­no število je verjetno posledica pri­vlač­ne­ga li­cenč­ne­ga modela: za osebno uporabo je popolnoma brez­plač­no, za ko­mer­ci­al­no uporabo pa je potrebna licenca, ki stane le nekaj deset evrov.

Image: Screenshot of IrfanView
If you save your image as a JPEG using the standard version of IrfanView (without plugins), you can easily adjust the quality using a slider.

Privzeto pre­gle­do­val­nik slik podpira številne slikovne formate, kot so PNG, JPEG, GIF, BMP, WebP in še mnoge druge. Ko je slika vsta­vlje­na, jo lahko kadarkoli pre­tvo­ri­te v te formate. Za stiskanje slik, na­me­nje­nih posebej za splet, pa pri­po­ro­ča­mo funkcijo »Shrani za splet«, ki jo lahko dodate prek vtičnika. Ta raz­ši­ri­tev vam omogoča op­ti­mi­za­ci­jo nizov slik in fo­to­gra­fij, pri čemer lahko s pomočjo drsnika nastavite, v kolikšni meri naj se ohrani kakovost izvirne slike. Predogled slike in velikost stisnjene datoteke vam omogočata vpogled v to, kakšen bo končni rezultat.

Prednosti Po­manj­klji­vo­sti
Možna obdelava v skladu Plugin za stiskanje je na voljo samo v an­gle­šči­ni
Funkcija pre­do­gle­da in na­sta­vlji­va stopnja stiskanja

GIMP

Pri iskanju al­ter­na­tiv za Photoshop iz od­pr­to­ko­dne­ga sektorja boste ne­iz­o­gib­no naleteli na GIMP (GNU Image Ma­ni­pu­la­ti­on Program). Grafični program za Linux, macOS in Windows, ki je bil izdan leta 1998, že leta navdušuje ljudi zaradi svoje ra­zno­li­ko­sti funkcij, ki so zelo podobne tistim v ko­mer­ci­al­nem modelu Adobe. Sedaj podpira več kot trideset da­to­teč­nih formatov, vključno z GIF, WebP, JPEG in PNG, ki so ključni formati za splet. To pomeni, da lahko s pro­gram­sko opremo GIMP kadarkoli pre­tvo­ri­te svoje slikovne datoteke v enega od teh spletnih formatov.

Image: Screenshot of GIMP
Exporting image as WebP with GIMP

Poleg pretvorbe slik v manjši datotečni format GIMP ponuja tudi napredne možnosti izvoza, ki omogočajo enostavno stiskanje slik. S pomočjo drsnika nastavite stopnjo stiskanja. Raz­šir­je­ne možnosti so prav tako praktične: če na primer ak­ti­vi­ra­te lastnost »Pro­gres­si­ve«, je rezultat nekoliko večji, vendar se posamezna območja nalagajo v določenem vrstnem redu, tako da se že po kratkem času nalaganja prikaže grob pregled celotne slike.

Prednosti Po­manj­klji­vo­sti
Odprta koda Predogled prikazuje le velikost datoteke rezultata
Stopnja stiskanja je na­sta­vlji­va

PN­GGa­un­tlet

Brez­plač­ni program PN­GGa­un­tlet ponuja grafični upo­rab­ni­ški vmesnik za tri od­pr­to­ko­dna orodja PNGOUT, OptiPNG in DeflOpt, ki so bila razvita za op­ti­mi­za­ci­jo in stiskanje slik v formatu PNG. Apli­ka­ci­ja, ki je na voljo samo za Windows, je zato idealna rešitev za ustvar­ja­nje zelo majhnih logotipov, grafik in napisov v formatu PNG za vaš spletni projekt. Poleg formata PNG so za stiskanje ali pretvorbo možni tudi formati JPEG, GIF, TIFF in BMP.

Image: Screenshot of the PNGGauntlet interface
If you tick ‘Overwrite Original Files’, PN­GGa­un­tlet au­to­ma­ti­cal­ly replaces the original image with the newly created file.

S programom PN­GGa­un­tlet lahko slike stisnete na dva načina. Do stan­dar­dne na­sta­vi­tve lahko dostopate tako, da vstavite eno ali več slik in nato pri­ti­sne­te »Optimize!« (Optimiraj!), ali pa najprej izberete in­di­vi­du­al­no na­sta­vi­tev, tako da pri­la­go­di­te na­sta­vi­tve treh vgrajenih orodij s klikom na gumb z enakim imenom. Ne glede na to, kateri način izberete, vam bo brez­plač­no orodje po uspešni stiskanju prikazalo novo velikost slikovne datoteke (v pri­mer­ja­vi z iz­vir­ni­kom ) v odstotkih.

Prednosti Po­manj­klji­vo­sti
Preprosta obdelava sklada Ni načina pre­do­gle­da
Možna in­di­vi­du­a­li­za­ci­ja stopnje stiskanja Omejeno na PNG kot izhodni format
Naj­no­vej­ša različica je iz leta 2012

Ima­ge­Op­tim

Če želite stisniti slike in fo­to­gra­fi­je svojega spletnega projekta in po­tre­bu­je­te od­pr­to­ko­dno orodje za macOS, pri­po­ro­ča­mo Ima­ge­Op­tim avtorja Kornela Le­sin­ske­ga. Ta program z licenco GPL združuje več orodij za op­ti­mi­za­ci­jo slik, kot so MozJPEG, pngquant in SVGO, kar vam omogoča ne le od­stra­nje­va­nje ne­po­treb­nih me­ta­po­dat­kov EXIF, ampak tudi stiskanje različnih slikovnih formatov, kot so JPEG, SVG, GIF in PNG.

Image: Screenshot of ImageOptim
Once you’ve dragged your file into the tool, the com­pres­si­on process begins au­to­ma­ti­cal­ly. A green tick indicates that the com­pres­si­on was success­ful.

Z uporabo funkcije povleci in spusti lahko želene slikovne datoteke prenesete v Ima­ge­Op­tim, kjer jih bo program takoj začel stiskati. Vendar lahko kadarkoli spre­me­ni­te na­sta­vi­tve in pri­la­go­di­te stopnjo stiskanja ter dodate ali od­stra­ni­te možnosti. Preprosto kliknite na tri pike, da na­da­lju­je­te. Nato preprosto kliknite na »Ponovno«, da ponovno izvedete pretvorbo.

Prednosti Po­manj­klji­vo­sti
Različne funkcije stiskanja Ni načina pre­do­gle­da
Odprta koda
Go to Main Menu