Jeste li znali da optimizacija vaših slika prije prijenosa na WordPress može imati ogroman utjecaj na brzinu vaše web stranice? Nakon što klijentima predamo završenu web stranicu i oni nastave raditi na njoj, jednostavno prenose slike bez optimiziranja, a takve velike slike čine stranicu sporijom.
U ovoj objavi ćemo vam pokazati kako optimizirati slike za brže web performanse bez gubitka kvalitete. Da ne biste svaku sliku optimizirali ručno, navesti ćemo i neke od najboljih WP dodataka za optimizaciju slika koji će vam olakšati rad na web stranici.

Sadržaj objave:

Što je optimizacija slike?

Optimizacija slike je postupak spremanja slike / fotografije u najmanjoj mogućoj veličini bez smanjenja ukupne kvalitete slike. Iako zvuči složeno, postupak je vrlo jednostavan, a možete koristiti WP dodatke za optimizaciju slika kako biste ih komprimirali i do 80% bez vidljivog gubitka kvalitete fotografije.

Evo primjera optimizirane slike u odnosu na neoptimiziranu sliku:

Usporedba komprimirane fotografijeKomprimirano (20.1 KB)

Kao što vidite, ako pravilno optimizirate, ista slika može biti mnogo manja od originala bez gubitka kvalitete.

Kako funkcionira optimizacija slike?

Jednostavno rečeno, optimizacija slike funkcionira korištenjem tehnologije kompresije poput “Lossy” i “Lossless” koja pomaže smanjiti ukupnu veličinu datoteke bez primjetnog gubitka kvalitete.

Zašto je optimizacija slike važna? Koje su prednosti optimizacije slika?

Postoje mnoge prednosti optimiziranja slika, a ispod su neke od najvažnijih prednosti koje biste trebali znati:

  • Veća brzina web stranice
  • Bolji SEO rezultati
  • Veće ukupna stopa konverzije za prodaju i potencijalne upite za ponudu
  • Manje potrebnog prostora za pohranu i bandwidth-a (što može smanjiti troškove hostinga)

Pored videa, slike su sljedeća najteža stavka na web stranici, a u prosjeku slike čine 21% ukupne težine web stranice.

Budući da znamo da brze web stranice rangiraju više u pretraživačima i ostvaruju veće konverzije, optimizacija slika je nešto što je potrebno napraviti na svakoj web stranici da bi bila uspješna.

Sigurno se pitate koliko veliku razliku može napraviti optimizacija slika?

Prema studiji Strangeloop, odgoda od jedne sekunde za učitavanje web stranice može vas koštati 7% prodaje, 11% manje pregleda stranica i 16% manje zadovoljnih kupaca.

Strangeloop studija

Strangeloop studija: Odgoda od jedne sekunde za učitavanje web stranice može vas koštati 7% prodaje, 11% manje pregleda stranica i 16% manje zadovoljnih kupaca.

Ako vam to nisu dovoljni razlozi da optimizirate slike prilikom prijenosa u blog ili negdje drugdje na stranicu, trebali biste znati da Google daje prednost stranicama koje se brže učitavaju. Dakle, ako namjerno učinite stranicu sporom jer niste optimizirali slike, onda se pomirite i s malim brojem posjetitelja na stranici.

Kako spremiti i optimizirati slike za bolje web performanse?

Ključ uspješne optimizacije slika za bolje web performanse nalazi se u pronalaženju odgovarajuće ravnoteže između najmanje veličine datoteke i prihvatljive kvalitete slike.

Tri stvari koje igraju veliku ulogu u optimizaciji slike su:

  • Format datoteke slike (JPEG – PNG – GIF)
  • Kompresija (veća kompresija = manja veličina datoteke)
  • Dimenzija slike (visina i širina)

1. Format datoteke slike

Za većinu vlasnika web stranica jedino su važna tri formata slikovnih datoteka JPEG, PNG i GIF. Odabir prave vrste datoteka igra važnu ulogu u optimizaciji slike.

Jednostavno, ako koristite sliku s puno boja odnosno fotografiju, trebate je spremiti u JPEG formatu. Kada koristite jednostavne slike poput nekih grafika ili slike s prozirnom pozadinom koristite PNG format, a GIF samo za animirane slike.

Za one koji ne znaju razliku između svake vrste datoteke, PNG format slike nije komprimiran, što znači da je slika više kvalitete, a loša strana je da su veličine takve datoteke puno veće.

S druge strane, JPEG je komprimirani format datoteke koji malo smanjuje kvalitetu slike, kako bi se osigurala značajno manja veličina datoteke.

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

2. Kompresija

Sljedeću važnu ulogu u optimizaciji slike igra kompresija. Dostupne su različite vrste i razine kompresije slike. Postavke za svaku razlikuju se ovisno o alatu za kompresiju slike koji koristite.

Većina alata za uređivanje slika poput Adobe Photoshop , On1 Photo , GIMP, Affinity Photo i drugih dolazi s ugrađenim značajkama kompresije slike. Slike također možete normalno spremiti, a zatim upotrijebiti web alat poput TinyPNG ili JPEG Mini za lakše komprimiranje slike.

Postoji i nekoliko popularnih WordPress dodataka poput Optimole , EWWW Optimizer i drugih koji mogu automatski komprimirati slike prilikom prvog prijenosa. Mnogi početnici, pa čak i velike tvrtke, radije koriste ove dodatke za optimizaciju slike jer je tako jednostavnije.

Više o tim dodacima pročitajte niže u tekstu.

3. Dimenzije slike

Kada prenosite fotografiju s telefona ili digitalnog fotoaparata, ona obično ima vrlo visoku razlučivost i velike dimenzije (visina i širina). Obično ove fotografije imaju rezoluciju 300 DPI i dimenzije počinju od 2000 piksela i više, stoga nisu prikladne za web stranice. Bar ne za umetanje u tekst objave.

Smanjivanje dimenzija datoteke na nešto razumnije dimenzije može značajno smanjiti veličinu slikovne datoteke. Dimenzije slike možete promijeniti pomoću softvera za uređivanje slika na vašem računalu.

Na primjer, optimizirali smo fotografiju s izvornom veličinom datoteke od 1,8 MB, rezolucijom 300 DPI i dimenzijama slike od 4900 × 3200 piksela.

Odabrali smo jpeg format za veću kompresiju i promijenili dimenzije na 1200 × 795 piksela. Program je smanjio veličinu slikovne datoteke na 103 KB što je 94% manje od izvorne veličine datoteke.

Sada kada znate tri važna čimbenika u optimizaciji slike, pogledajmo razne alate za optimizaciju slika WordPress web stranica.

Najbolji alati i programi za optimizaciju slike

Kao što smo ranije spomenuli, većina softvera za uređivanje slika dolazi s postavkama za optimizaciju slike i kompresijom.
Izvan softvera za uređivanje slika, postoji i nekoliko moćnih besplatnih alata za optimizaciju slika pomoću kojih možete optimizirati slike za web (sa samo nekoliko klikova).

Preporučujemo korištenje ovih alata za optimizaciju slika prije nego što ih prenesete u WordPress, posebno ako ste perfekcionist.
Ova metoda vam pomaže uštedjeti prostor za pohranu na hostingu, a jamči sliku najbolje kvalitete.

Adobe Photoshop

Adobe Photoshop vrhunski je softver koji sadrži značajku za spremanje slika optimiziranih za web. Jednostavno otvorite svoju sliku i kliknite na opciju “Datoteka” -> Spremi za web “.

S desne strane možete postaviti različite formate slika. Za JPEG format, vidjet ćete različite mogućnosti kvalitete. Kad odaberete svoje mogućnosti, prikazat će vam i veličinu datoteke u donjem lijevom kutu.

Optimizacija slike - adobe photoshop

Optimizacija slike – adobe photoshop

GIMP

GIMP je besplatna i open source alternativa popularnom Adobe Photoshopu. Može se koristiti za optimizaciju vaših slika za web. Prvo morate otvoriti svoju sliku u GIMP-u, a zatim odaberite Datoteka » Izvoz kao opciju. Ovo će otvoriti dijaloški okvir za spremanje datoteka. Za JPEG datoteke možete odabrati razinu kompresije da biste smanjili veličinu datoteke. Na kraju, pritisnite gumb za izvoz da biste spremili optimiziranu sliku.

TinyPNG

TinyPNG je besplatna web aplikacija za komprimiranje slika. Sve što trebate učiniti je otići na njihovu web stranicu i učitati svoje slike (jednostavno povlačenje i ispuštanje).
Nakon učitavanja slike i komprimiranja slike, kliknite na vezu za preuzimanje,

TinyPNG optimizacija slika

TinyPNG je besplatna web aplikacija za komprimiranje slika

JPEG mini

JPEG mini koristi tehnologiju kompresije bez gubitaka koja značajno smanjuje veličinu slika bez utjecaja na njihovu percepcijsku kvalitetu. Također možete usporediti kvalitetu izvorne slike i komprimirane slike.

JPEG mini

JPEG mini koristi tehnologiju kompresije bez gubitaka koja značajno smanjuje veličinu slika bez utjecaja na njihovu percepcijsku kvalitetu

Najbolji dodaci za optimizaciju slike za WordPress

Prije učitavanja slike u WordPress najbolje je smanjiti je u nekom od programa, odnosno prilagoditi njene dimenzije prostoru u kojem će se ona nalaziti. Međutim, ako vam je potrebno i automatizirano rješenje, tada možete isprobati ne neke dodatke za kompresiju slika u WordPress-u.

  1. Optimole– popularni WordPress dodatak za optimizaciju slika
  2. EWWW image optimizer
  3. Compress JPEG i PNG images – dodatak TinyPNG tima spomenutog u članku.
  4. Imagify– dodatak popularnog WP Rocket
  5. Alat za optimizaciju slike ShortPixel
  6. WP Smush
  7. reSmush.it

Zaključak

Ako ne koristite slike optimizirane za web, trebali biste. Optimizacija slike ubrzati će rad vaše web stranice, a korisnici će biti zadovoljni. Naravno, brža web stranica vjerojatno će biti više rangirana u tražilicama pa ćete možda postići i bolji rezultat posjećenosti stranice.

Osim optimizacije slika za ubrzavanje rada web stranice koristite i neki od dodataka za predmemoriranje i CDN.

Nadamo se da vam je ovaj članak pomogao naučiti kako optimizirati slike za WordPress, a možda vam mogu pomoći i druge objave vezane za rad u WordPressu koje možete naći u našem blogu.

Je li ova objava korisna?