Kako da optimizujete slike za vaš WordPress web sajt

Da li ste znali da upload slika na vaš web sajt može imati značajan uticaj na brzinu vašeg web sajta? Ukoliko su u pitanju veliki fajlovi sa slikama visoke rezolucije, to može dodatno da utiče na opterećenje servera na kojem je hostovan vaš sajt, pa ujedno i na njegovu brzinu.

Srećom ovo se može relativno lako rešiti optimizacijom slika pre njihovog upload-a na sajt.

U ovom tekstu ćemo vam pokazati kako da optimizujete svoje slike za brže performanse sajta, bez gubitka kvaliteta.

Takođe ćemo vam predložiti neke online alate i plugine za automatsku optimizaciju slika za WordPress, koji vam mogu olakšati život.

Šta je optimizacija slika?

Optimizacija slike je proces obrade, tokom kojeg se postiže smanjenje fajla slike bez smanjenja njenog ukupnog kvaliteta. Iako proces zvuči složeno, ovih dana je zapravo prilično lako.

Možete da koristite jedan od mnogih plugina ili online alata za optimizaciju slika da automatski kompresujete slike do 80% bez vidljivog gubitka u kvalitetu slike. Evo primera optimizovane naspram neoptimizovane slike:

Kao što vidite, kada se pravilno optimizuje, ista slika može biti i do 80% manja od originala bez ikakvog gubitka u kvalitetu. U ovom primeru, slika je 52% manja.

Kako funkcioniše optimizacija slike?

Jednostavno rečeno, optimizacija slike funkcioniše korišćenjem tehnologije kompresije.

Kompresija može biti lossy (sa gubicima) ili lossless (bez gubitaka).

Kompresija bez gubitaka smanjuje ukupnu veličinu fajla bez apsolutnog gubitka kvaliteta slike. Kod kompresije sa gubitkom, može doći do manjeg gubitka kvaliteta, ali u idealnom slučaju to neće biti primetno posetiocima vašeg web sajta.

Šta znači optimizovati slike?

Optimizovati slike znači smanjiti veličinu fajlova vaših slika tako što ćete ih optimizovati za web. Pokazaćemo vam kako da to uradite korak po korak.

Koje su prednosti optimizacije slike?

Iako postoji mnogo prednosti optimizacije slika, evo onih koje spadaju u najznačajnije:

• veća brzina web stranice
• poboljšano SEO rangiranje
• veća stopa konverzije za prodaju i potencijalne klijente
• zauzimaju manje prostora i manji propusni opseg (što može smanjiti troškove hostinga i CDN-a)

Slike su druga najveća stavka na web sajtu posle videa. Prema HTTP arhivi, slike čine 21% ukupne veličine prosečne web stranice.

Pošto znamo da se brze web stranice bolje rangiraju u pretraživačima (SEO) i imaju bolje konverzije, optimizacija slike je nešto što svaki poslovni web sajt mora da uradi ako želi da uspe u online prostoru.

Sada se možda pitate koliku razliku zaista može napraviti optimizacija slike. Prema studiji Strangeloop-a, kašnjenje od jedne sekunde u vremenu učitavanja web sajta može vas koštati 7% prodaje, 11% manje prikaza stranica i 16% smanjenja zadovoljstva kupaca.

Ako ovo nisu dovoljni razlozi da ubrzate svoj web sajt, onda treba da znate da search engine-i poput Google-a dodeljuju bolji SEO skor web sajtovima koje se brže učitavaju.

To znači da optimizovanjem slika za web možete poboljšati brzinu svog web sajta i ujedno poboljšati njegovo rangiranje na Google-u.

Kako sačuvati i optimizovati slike za bolje web performanse

Ključ uspešne optimizacije slike za bolje performanse na web-u je pronalaženje savršene ravnoteže između što manje veličine fajla i što je moguće boljeg kvaliteta slike.

Tri stvari koje igraju veliku ulogu u optimizaciji slike su:

• format fajla slike (JPEG vs PNG vs GIF)
• kompresija (veća kompresija = manja veličina fajla)
• dimenzije slike (visina i širina)

Odabirom prave kombinacije ova tri faktora, možete smanjiti veličinu slike do 80%.

Zato hajde da pogledamo svaki od njih detaljnije.

Format fajla slike

Za većinu vlasnika web sajtova, jedina tri formata fajla slike koja su zaista bitna su JPEG, PNG i GIF. Odabir pravog tipa fajla igra važnu ulogu u optimizaciji slike.

Preporuka je da koristite JPEG-ove za fotografije ili slike sa puno boja, PNG-ove za jednostavne slike, ili onda kada su vam potrebne transparentne slike i GIF-ove samo za animirane slike.

Za one koji ne znaju razliku između navedenih tipova fajlova, PNG format slike je nekompresovan što znači da je slika višeg kvaliteta. Loša strana je što su PNG fajlovi mnogo veći.

S druge strane, JPEG je kompresovani format fajla koji blago smanjuje kvalitet slike kako bi obezbedio značajno manju veličinu fajla.

GIF koristi samo 256 boja zajedno sa kompresijom bez gubitaka što ga čini najboljim izborom za animirane slike.

Kompresija

Sledeća stvar je kompresija slike koja igra veliku ulogu u optimizaciji slike.

Dostupni su različiti tipovi i nivoi kompresije slike. Podešavanja za svaku će se razlikovati u zavisnosti od alata za kompresiju slike koji koristite.

Većina alata za editovanje slika kao što su Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo i drugi dolaze sa ugrađenim funkcijama kompresije slike.

Takođe možete normalno da sačuvate slike, a zatim da koristite web alat kao što je TinyPNG ili JPEGmini za lakšu kompresiju slike.

Iako zahtevaju neko vreme i malo poznavanja editovanja slika, ove dve metode vam omogućavaju da kompresujete slike pre nego što ih upload-ujete na svoj WordPress sajt.

Postoji i nekoliko popularnih WordPress plugina kao što su Optimole i EWWW Image Optimizer koji mogu automatski kompresovati slike kada ih prvi put upload-ujete.

Više o korišćenju WordPress plugina ćemo navesti kasnije u tekstu.

Dimenzije slike

Obično, kada upload-ujete fotografiju sa telefona ili digitalnog fotoaparata, ona ima veoma visoku rezoluciju i velike dimenzije fajla (visina i širina).

Obično ove fotografije imaju rezoluciju od 300 DPI i dimenzije od 2000 piksela i više. Iako su fotografije visokog kvaliteta pogodne za štampanje i grafički dizajn, njihova veličina ih čini neprikladnim za web sajtove.

Smanjenje dimenzija slike na nešto razumnije može značajno smanjiti veličinu fajla slike. Možete jednostavno promeniti veličinu slika pomoću softvera za editovanje slika na računaru.

Na primer, optimizovali smo fotografiju rezolucije 300 DPI i dimenzija slike 4900×3200 piksela. Originalna veličina fajla bila je 1,8 MB.

Izabrali smo JPEG format za veću kompresiju i promenili dimenzije na 1200×795 piksela. Veličina fajla je smanjena na samo 103 KB. To je 94% manje od originalne veličine fajla.

Sada kada znate tri važna faktora u optimizaciji slike, hajde da pogledamo različite alate za optimizaciju slika za web sajt.

Najbolji alati i programi za optimizaciju slike

Kao što smo ranije spomenuli, većina softvera za editovanje slika dolazi sa funkcionalnostima za optimizaciju i kompresiju slike.

Osim softvera za editovanje slika, postoji i nekoliko odličnih besplatnih alata za optimizaciju slika koje možete koristiti za optimizaciju slika za web (sa samo nekoliko klikova).

Preporučujemo da koristite ove alate za optimizaciju slika pre nego što ih upload-ujete na svoj web sajt.

Ovaj metod vam pomaže da uštedite prostor na disku na vašem hosting nalogu i ujedno garantuje najbržu sliku sa najboljim kvalitetom.

Adobe Photoshop

Adobe Photoshop je premijum aplikacija za editovanje slika, koja vam omogućava da eksportujete slike sa manjom veličinom fajla za potrebe upload-a na web.

Koristeći dijalog za eksport, možete odabrati format fajla slike (JPG, PNG, GIF) koji vam daje najmanju veličinu fajla.

Takođe možete smanjiti kvalitet slike, boje i druge opcije da biste dodatno smanjili veličinu fajla.

GIMP

GIMP je besplatna open source alternativa za Adobe Photoshop. Može se koristiti za optimizaciju vaših slika za web. Nedostatak je što nije tako jednostavan za korišćenje kao neka druga rešenja na ovoj listi.

Prvo morate da otvorite svoju sliku u GIMP-u, a zatim da izaberete opciju File » Export as…. Ovo će prikazati okvir za dijalog Izvoz slike u kojem možete dati novo ime vašem fajlu. Zatim morate da kliknete na dugme „Export“.

Sada ćete videti opcije izvoza slika. Za JPEG fajlove, možete koristiti klizač „Quality“ da izaberete nivo kompresije i smanjite veličinu fajla.

Na kraju, trebalo bi da kliknete na dugme „Export“ da biste sačuvali optimizovan fajl slike. TinyPNG je besplatna web aplikacija koja koristi pametnu tehniku kompresije sa gubicima radi smanjenja veličine vaših PNG i JPEG fajlova. Sve što treba da uradite je da odete na njihov web sajt i upload-ujete svoje slike.

Oni će kompesovati sliku i dati vam link za preuzimanje.

Takođe imaju ekstenziju za Adobe Photoshop koji koristimo kao deo našeg procesa uređivanja slika jer vam omogućava pristup TinyPNG-u iz Photoshopa.

Ukoliko ste developer i želite da unapredite svoj alat za kompresiju slika, možete koristiti njihov API za automatsku konverziju slika. Za početnike imaju WordPress plugin koji će to učiniti umesto vas. Više o ovome kasnije.

JPEGmini

JPEGmini koristi tehnologiju kompresije bez gubitaka koja značajno smanjuje veličinu slika bez uticaja na njihov krajnji kvalitet. Takođe možete da uporedite kvalitet svoje originalne slike i kompresovane slike.

Možete besplatno koristiti njihovu web verziju ili kupiti aplikaciju za računar. Oni takođe imaju plaćeni API za automatizaciju procesa za vaš server.

ImageOptim

ImageOptim je uslužni program za Mac koji vam omogućava da kompresujete slike bez gubitka kvaliteta pronalaženjem najboljih parametara kompresije i uklanjanjem nepotrebnih profila boja.

Najbolji plugini za optimizaciju slike za WordPress

Verujemo da je najbolji način da optimizujete svoje slike tako što ćete to uraditi pre nego što ih otpremite u WordPress. Međutim, ako ne želite da trošite vreme na ručnu optimizaciju slika, a potrebno vam automatizovano rešenje, onda možete isprobati plugin za kompresiju slika za WordPress.

Evo naše liste najboljih WordPress plugina za kompresiju slika:

• Optimole
• EWWW Image Optimizer
• JPEG, PNG i WebP Image Compression
• Imagify
• ShortPixel Image Optimizer
• Smush
• reSmush.it

Ovi WordPress plugini za optimizaciju slika će vam pomoći da ubrzate svoj web sajt.

CDN za prikazivanje slika korisnicima

Kao što već znate CDN (Content Delivery Network) je servis koji čuva statički sadržaj vašeg sajta na nekoliko servera postavljenih na više lokacija širom sveta. Na primer, ako je vaš sajt postavljen na web serveru u Srbiji, a neki od posetilaca vašeg sajta je iz Kanade, on će videti sadržaj koji će mu biti poslužen sa nekog CDN servera u Kanadi.

Ukratko, CDN čini da se vaš sajt učita brže nego da korisnik iz Kanade pristupa direktno vašem sajtu koji se nalazi na web serveru u Srbiji.

Očistite svoju WordPress medijsku biblioteku (Media Library)

Kako vaša WordPress sajt bude rastao, njegova medijska biblioteka će sadržati mnogo upload-ovanih slika. Iako se mnoge od ovih upload-ovanih slika prikazuju na vašem sajtu, sigurno ima i dosta onih koje se ne prikazuju. To je najčešće slučaj kod WordPress tema koje sadrže i neki demo sadržaj, između ostalog i slike. Takođe, slike iz izbrisanih postova na blogu će ostati u vašoj medijskoj biblioteci.

Mnogo neiskorišćenih slika u biblioteci može usporiti vaš web sajt, zauzeti mnogo prostora na vašem hosting serveru i otežati upravljanje medijskim fajlovima.

Iako je čišćenje medijske biblioteke prilično jednostavn proces, kao i uvek preporučujemo da prvo uradite backup vašeg. Na ovaj način ćete moći da vratite svoj sajt u prethodno stanje ako nešto pođe naopako sa čišćenjem.

Najlakši način za čišćenje WordPress medijske biblioteke je da to uradite ručno.

Ulogujte se na dashboard svog WordPress sajt, a zatim idite na opciju. Media > Library.

Neiskorišćene slike ili slike koje ne želite više da imate u svojoj medinskoj biblioteci možete izbrisati pojedinačno ili grupno.

Da biste izbrisali sliku pojedinačno, kliknite na nju i izaberite opciju Delete Permanently.

Da biste grupno izbrisali slike, kliknite na Bulk Select, izaberite slike koje se ne koriste, a zatim kliknite na Delete permanently.

Brisanjem nepotrebnih i neželjenih slika možete značajno uštedeti prostor na svom hosting web serveru, a ujedno i rasteretiti server i ubrzati svoj web sajt.

Zaključak

Ako ne čuvate slike optimizovane za web, onda morate da počnete da to radite sada. To će napraviti ogromnu razliku u brzini vašeg web sajta, a vaši korisnici će vam biti zahvalni na tome.

Da ne spominjemo, brže web stranice su odlične za SEO i verovatno ćete videti povećanje rangiranja na pretraživačima.

Nenad Mihajlović