Optimizacija slika za web – kompletan vodič (kompresija, formati, SEO i alati)

Optimizacija slika za web pomaže da vaš sajt bude brži i prijatniji za korisnike.

Pravilno optimizovane slike se brzo učitavaju, odlično izgledaju na bilo kom uređaju, lako ih razumeju pretraživači dok istovremeno poboljšavaju korisničko iskustvo.

Slike su važan deo svakog sajta, blog posta ili kampanje na društvenim mrežama.
Pomažu u razdvajanju pasusa, vizualizaciji teksta, prikazu grafike i fotografija, kao i u kreiranju portfolija ili prodajnih stranica.

Sa druge strane, upravo slike najčešće usporavaju sajt. Kvalitetne fotografije dolaze sa velikim datotekama, što povećava vreme učitavanja i loše utiče na performanse.

Poenta postavljanja slika na blog ili sajt je da čitaocima pružite bolje iskustvo (i često povećate konverzije i prodaju) – što teško možete postići sporim sajtom i nedovoljno optimizovanim slikama.

U ovom članku vodiću vas, korak po korak, kako da slike na vašem sajtu rade optimalno. Saznaćete zašto je optimizacija slika za web neophodna, koje tehnike da koristite, kako funkcioniše kompresija slika i koji alati će vam najviše pomoći da sve pojednostavite.

Šta je optimizacija slika?

Optimizacija slika je proces smanjenja veličine datoteke slike pomoću određenog alata – bez primetnog gubitka kvaliteta.
Pravilno optimizovane slike se:

• brže učitavaju
• pravilno prikazuju na mobilnim uređajima
• lakše indeksiraju u pretraživačima

Cilj optimizacije slika za web je da se smanji količina podataka koju korisnik treba da preuzme, kako bi što brže dobio željeni sadržaj – bez žrtvovanja vizuelnog kvaliteta.

Kada govorimo o optimizaciji slika za web, govorimo o nekoliko ključnih elemenata:

• formatu slike (JPG, PNG, WebP…)
• kompresiji slike (sa ili bez gubitka kvaliteta)
• dimenzijama slike
• nazivu datoteke i alt tekstu
• načinu prikaza (lenjo učitavanje, CDN, responzivne slike)

Optimizovane slike poboljšavaju vidljivost i rangiranje u pretraživačima, jer Google bolje razume sadržaj slike i kontekst stranice. Ukratko: kada govorimo o optimizovanim slikama, govorimo o slikama koje su tehnički i SEO-prilagođene.

Da biste to postigli, potrebno je da pratite nekoliko koraka koji ne podrazumevaju samo ključne reči, već i izbor formata, naziv datoteke, rezoluciju, način kompresije i način učitavanja.

Zašto da optimizujete slike za web?

Slike su jedan od najčešćih faktora koji usporavaju sajt, čak i kada koristite dobar hosting. Prema HTTP arhivi, slike čine u proseku 20–25% ukupne težine sajta.

Zato, kada želite da optimizujete svoj sajt, optimizacija slika za web je odmah posle videa prvo mesto odakle treba da počnete.

Osim što usporavaju sajt, slike zauzimaju i prostor na serveru.
Svaki hosting paket ima ograničen propusni opseg, pa velike slikovne datoteke mogu nepotrebno da „pojedu“ taj prostor.

Optimizacija slika smanjuje količinu podataka koja se prenosi između browsera korisnika i servera sajta, što ima za rezultat manju upotrebu propusnog opsega i brže učitavanje stranica.
Ovo je posebno važno za sajtove koji imaju mnogo slika i veći obim saobraćaja.

Poboljšano korisničko iskustvo

Blogovi i sajtovi sa optimizovanim slikama učitavaju se značajno brže, što pomaže da se poveća vreme zadržavanja korisnika, a smanji stopa posete jednoj stranici (bounce rate).

Loše optimizovane, velike i pogrešno formatirane slike mogu da uspore učitavanje - što ne vodi samo do lošeg korisničkog iskustva, već direktno utiče i na pad rangiranja.

Poboljšani SEO sajta

WordPress sajt koji je tehnički i vizuelno optimizovan za SEO pruža bolje ukupno korisničko iskustvo.

Korišćenje opisnih naziva datoteka slika i relevantnih alt tekstova povećava šanse da se vaše slike pojave u rezultatima pretrage slika.

To dovodi veći broj posetilaca na sajt, jer često preko pretrage slika dolaze i do ostatka vašeg sadržaja.

Ako koristite WordPress SEO dodatak, on će vam pomoći da pravilno postavite alt tagove, a u Google Analitici možete da pratite saobraćaj koji dolazi iz pretrage slika.

Optimizacija slika za web (korak po korak)

Primarni cilj optimizacije slika je pronaći ravnotežu između najmanje moguće veličine datoteke i kvaliteta koji je vizuelno prihvatljiv.

Slike se mogu optimizovati na više načina.
Jedan od najčešćih je da kompresujete sliku pre otpremanja na WordPress, pomoću alata kao što su Affinity Photo, Adobe Photoshop, GIMP i drugi.

Dve ključne stvari na koje treba obratiti pažnju pre svega su:

1. format datoteke slike
2. vrsta kompresije koju ćete koristiti

Kada izaberete dobru kombinaciju formata i kompresije, možete smanjiti veličinu slike i nekoliko puta - bez vidljivog gubitka kvaliteta.
Ponekad je potrebno testirati više opcija kako biste pronašli najbolji rezultat za svaku sliku.

JPG, PNG, WebP i SVG – koji format slike koristiti za web?

Nakon kreiranja ili preuzimanja slike, potrebno je odabrati odgovarajući format slike, kako bi se pravilno prikazivala i bila optimalna za web.

- kompresija sa gubitkom: 25–34% manja datoteka od JPG-a
- kompresija bez gubitka: oko 25% manja od PNG-a

Odličan je za skoro sve vrste slika - fotografije, ilustracije, grafike.
Zadržava kvalitet čak i na manjoj veličini datoteke, pa je idealan ako želite maksimalnu brzinu sajta.

Jedini minus: veoma stari browseri ga ne podržavaju, ali to više gotovo da nije problem.

Koji format odabrati?

• PNG – kada je važan kvalitet i rezolucija grafičkih elemenata
• JPG – najbolji za slike blog postova, fotografije i snimke ekrana

• WebP – najefikasniji format za većinu slika (odličan odnos kvaliteta i veličine)
• SVG – idealan za logotipe i ikone zbog beskonačne rezolucije

Koji format ćete odabrati zavisi od vaših preferencija, od vrste slika koje koristite, od kvaliteta i brzine koju želite da postignete.
Tendenciju da uspore učitavanje stranica imaju GIF-ovi, pa ne preporučujem da ih mnogo koristite.

Promenite veličinu slika za web upotrebu

Važno je razlikovati dva pojma:

• veličina datoteke slike (na primer, 360 KB)
• dimenzije slike (na primer, 630 × 880 px)

Oni nisu isto — ali oba utiču na brzinu sajta.

Slike sa velikim dimenzijama usporavaju učitavanje jer browser mora da učita celu sliku, čak i ako se prikazuje manjom širinom nego što je originalna.

Na primer:

Ako tema prikazuje slike veličine 600 × 600 px, a vi otpremite sliku od 1024 × 1024 px, svi ti „viškovi piksela“ samo povećavaju veličinu datoteke bez potrebe.

Rešenje:
smanjite dimenzije slike pre otpremanja.

Možete da koristite:

• Photoshop
• Paint
• Canva
• BulkResizePhotos
• GIMP
• bilo koji alat za uređivanje slika

To smanjuje veličinu datoteke i ubrzava otvaranje stranice.

Evo primera kako to da uradite:

Otvorite u pretraživaču BulkResizePhotos, pa kliknite na Choose image i otpremite sliku sa svog računara:

Zatim možete podesiti dimenzije vaše slike (širinu i visinu) klikom na „Image dimensions“:

1.Kada promenite veličinu slike idete na sledeći korak.

Kompresovanje slika za brže učitavanje (sa i bez gubitka)

Kompresija slika je ključna jer direktno smanjuje veličinu datoteke i ubrzava učitavanje, što je jedan od faktora za bolje rangiranje.

Nakon što odaberete format i dimenzije, sledeći korak je kompresovanje slike.

Velike slikovne datoteke povećavaju vreme učitavanja i troše više propusnog opsega na serveru, što posebno smeta sajtovima koji imaju mnogo poseta.

Cilj je da slika bude ispod 100 KB kad god je to moguće, bez vidljivog gubitka kvaliteta.

Postoje dve vrste kompresije:

1. Kompresija sa gubitkom (lossy)

Najbolji alati za optimizaciju slika (desktop, online i WordPress dodaci)

Za lakši proces optimizacije predstaviću vam nekoliko najboljih alata za optimizaciju i kompresiju slika (JPG, PNG, WebP) koje možete da razmotrite.

GIMP

GIMP je softver za uređivanje slika otvorenog koda. Besplatna je i moćna alternativa alatima poput Adobe PhotoShopa. Možete ga preuzeti i instalirati na svom računaru.

Kada ga otvorite, u glavnom meniju odaberite File > Open pa odaberite sliku sa svog računara koju želite da optimizujete:

Kada otpremite sliku - iz menija odaberite Image > Scale. Pojaviće se okvir za dijalog Scale Image kao na slici:

Odavde možete promeniti širinu i visinu slike i rezoluciju. Rezoluciju podesite na 72 ppi.

Na primer, ako povećamo širinu na 1920 i visina će se automatski prilagođavati. Isto važi i kad smanjujete veličinu slike.

Kada podesite ispravne dimenzije slike i rezoluciju, kliknite na Scale. Sačekajte da se proces završi i videćete izmenjenu veličinu svoje slike.

Pre nego što izvezete sliku možete joj promeniti naziv i format. Dajte joj drugi naziv kako bi se razlikovala od slike koju ste otpremili pre kompresije.

Podesite nivo kompresije u opciji Image quality:

Nakon podešavanja nivoa kompresije kliknite na Export.

Sada na svom računaru imate sliku pre i posle pa uporedite njihove veličine.

Smush

Među vlasnicima WordPress sajtova Smush je najčešće korišćen alat za optimizaciju slika.

Ima besplatnu i plaćenu verziju. Dok otpremate slike na svoj sajt, Smush ih skenira i smanjuje veličinu datoteke slike bez narušavanja kvaliteta.

Takođe će skenirati i smanjiti slike koje ste otpremili na sajt pre njegovog aktiviranja.

Optimizaciju slika vrši kompresijom bez gubitka, čime se kvalitet slike zadržava.

Sliku deli na više manjih datoteka, a optimizuje slike u JPG, PNG, GIF formatima.

Smush ima opciju da automatski podesite širinu i visinu za sve slike, tako da sve slike dobiju iste dimenzije.

Nakon što aktivirate Smush videćete broj neoptimizovanih slika na svom sajtu:

Možete da tražite da ponovo proveri slike, klikom na dugme Bulk Smush, pa nakon toga kliknite na Resume Bulk Smush:

Po završetku grupne optimizacije slika, videćete ovakav izveštaj:

Besplatna Smush verzija ima solidan broj funkcija, dok kod plaćene (počevši od 3 dolara) dobijate WebP kompresiju slika, neograničeno otpremanje slikovnih datoteka i njihovu kompresiju.

Imagify

Imagify je proizvod WP Rocket tima za koji ste verovatno već čuli.

Nudi vam više opcija kompresije: sa gubitkom, bez gubitka i ultra-kompresiju.

Postoji i funkcija vraćanja ako niste zadovoljni kvalitetom, nakon čega možete ponovo sliku kompresovati na drugom nivou.

Imagify kompresuje slike na svojim serverima, a ne na vašim – što je poželjno kada su performanse sajta u pitanju.

Ono što je zanimljivo je da zadržava metapodatke nakon kompresije: datum i vreme snimljene fotografije, lokaciju gde je snimljeno, podešavanja kamere.

Besplatan Imagify omogućava da kompresujete do 200 slika, ali ograničava veličinu datoteke na 2 MB.

Za ostale funkcije kao što su obrada do 5.000 slika, neograničene veličine i broj slika koje se otpremaju, potreban je plaćeni nalog.

TinyPNG

TinyPNG smanjuje vaše slikovne datoteke pametnim tehnikama kompresije sa gubicima. „Pametna“ tehnika leži u njegovoj sposobnosti da selektivno smanji broj boja na slici.

TinyPNG vam omogućava kompresiju i promenu veličine datoteke slika preko web stranice i preko WordPress dodatka.

Pored TinyPNG-a, možete razmotriti i TinyPNG alternative kao što su:

• Squoosh
• BulkResizePhotos
• ShortPixel
• ImageOptim (za Mac)

One rade sličnu stvar – kompresiju slika za web bez primetnog gubitka kvaliteta.

Pomoću TinyPNG WordPress dodatka možete automatski da optimizujete slike posle otpremanja na sajt, kao i sve postojeće slike.

Uprkos svom imenu TinyPNG ne radi samo sa JPG i PNG formatima, već i sa WebP i JPEG.

Kod PNG slika podržava transparentnost što je korisno kod web grafike.

JPG slike kompresuje do 60%, a PNG slike do 80% bez vidljivog gubitka u kvalitetu slike.

Ne ograničava vas u pogledu veličine datoteke slike koju ćete kompresovati.

ImageRecycle

ImageRecycle možete koristiti da skenirate sajt i vidite koliko na njemu ima neoptimizovanih slika. Samo unesite adresu sajta i email adresu na koju će vam ImageRecycle poslati besplatan izveštaj.

ImageRecycle podržava JPG, PNG, GIF, SVG formate slika, kao i PDF dokumenta.

Jedna od dobrih karakteristika je mogućnost podešavanja minimalne veličine datoteke za kompresiju.

Pomoću njega se sve slike na sajtu mogu automatski optimizovati. Za optimizaciju slika koristi sopstvene servere.

Besplatno se može koristiti 15 dana sa prostorom od 100 MB. Nema mesečne pretplate, već plaćate prema broju kompresovanih slika, počevši od 10 dolara za 10.000 slika (1GB sadržaja). Možete ga koristiti za više sajtova.

Ovo su neki od odličnih dodataka koji će optimizovati slike koje otpremate, kao i one koje se već nalaze na sajtu.

Savetujem da se ne oslanjate 100% na dodatke.

Vodite računa o tome da ne otpremate slike koje su veće od 2MB u svoju WordPress medijsku biblioteku. Može se desiti da brzo popunite prostor diska na svom hostingu.

Najbolje je da pre otpremanja na sajt – promenite veličinu slike u nekom alatu za editovanje fotografija, a zatim kad je otpremite na sajt koristite neki od WordPress dodataka kako biste je dodatno smanjili.

SEO optimizacija slika za web – nazivi datoteka, alt tekst, originalne slike i naslovi

Koristite odgovarajući naziv datoteke slike

Naziv datoteke slike pomaže pretraživačima da razumeju sadržaj, a govori o tome koliko je vaša slika relevantna za upite korisnika u pretraživačima.

Najbolje je da slikama date opisna imena, umesto da ih otpremate sa podrazumevanim imenima.

Na primer, recimo da ste u svoj blog post postavili sliku čije je podrazumevano ime „img_639542.jpg."

Kada Google indeksira stranicu na kojoj je ovakva slika – ne postoji nikakav kontekst slike koji može da razume. Zato su male šanse da se slika prikaže u rezultatima pretrage slika za vašu ključnu reč.

Da biste ovo izbegli, budite deskriptivni. Na primer, dobar naziv datoteke za sliku iznad bi bio „zeleni-ford-mustang-1967.jpg."

Nazivi datoteka slika treba da budu kratki, a reči u nazivu je najbolje odvojiti crticama.

Na primer, recimo da imate online prodavnicu i jedan od proizvoda su zelene pamučne pantalone. Uz proizvod ide i slika, naravno.

Umesto da sliku nazovete „pantalone“, izaberite opisniji naziv poput „zelene pamučne pantalone.jpg“.

Na ovaj način povećavate šanse da se slika prikaže u pretrazi za relevantne upite korisnika.

Dobra praksa je da kod pisanja naziva datoteke slike uključite duge ključne reči kako biste opisali sliku sa tri i više reči.

Napišite opisni alternativni tekst (alt tekst)

Alternativni tekst (alt text) je sažet opis slika. Pomaže Googleu i drugim pretraživačima da shvate kontekst i sadržaj slika zato što ih ne mogu vizuelno registrovati.

Alt tekst koriste i čitači ekrana kako bi opisali slike korisnicima sa oštećenim vidom.

I kada se slika ne učita na stranici, prikazaće se njen alternativni tekst.

U skladu sa tim alt tekst treba da bude informativan i opisan. Dobro je da sadrži relevantne ključne reči.

Dobra praksa kod pisanja alt teksta je da zamislite da vam neko čita isti dok su vam oči zatvorene.

Hajde sada da pogledamo primer lošeg i dobrog alternativnog teksta.

Primer lošeg alt teksta za sliku ispod može da bude „torta sa borovnicama“:

Da, to je stvarno torta sa borovnicama, ali ne opisuje baš dobro sliku, zar ne?

Dobar primer alt teksta za ovu sliku bi bio „Isečeni komadi torte sa borovnicama na tanjiru“.

Ovaj opis pomaže Googleu i doprinosi boljem korisničkom iskustvu.

Ako niste sigurni koje ključne reči da dodate slici - istražite ključne reči za vašu temu, kako biste dobili varijacije ključnih reči koje ćete koristiti za alternativni tekst svojih slika.

Kada završite sa odabirom ključnih reči, dodajte ih svojim slikama. 

Kako dodati alt text slikama

Kada koristite WordPress, alt tekst slikama možete lako dodati na 2 načina:

• Kliknite na opciju „Media“ u WordPress meniju sa leve strane ekrana:

Otpremite sliku sa svog računara preko Upload dugmeta ili kliknite na neku sliku koja već postoji u medijskoj biblioteci.

U okvir koji će se pojaviti sa desne strane unesite alternativni tekst u polje Alternative text:

• Drugi način je mnogo brži jer dodajete alt tekst slikama u postovima i stranama.

U meniju sa leve strane kliknite „Posts“ ili „Pages“:

a zatim odaberite post u kome se slika nalazi. Kliknite na sliku i videćete iznad nje opcije za uređivanje. Odaberite „olovčicu“:

Unesite alternativni tekst, pa kliknite na „Update“.

I to je sve.

Koristite originalne i jedinstvene slike

Slike koje koristite treba da su relevantne i usklađene sa temom o kojoj pišete.

Nastojte, koliko možete, da umesto stock fotografija koristite originalne slike da biste se izdvojili od drugih u svojoj niši.

Na primer, imate blog o putovanjima i želite da pišete o Parizu. Dok stotine drugih blogova koristi sliku Ajfelovog tornja – vi je nećete koristiti.

Da bi ljudi imali više poverenja u vaš sadržaj upotrebićete autorske slike koje ste kreirali obilazeći znamenitosti Pariza. Tako će vaš post doneti čitaocima mnogo više iskustva i vrednosti.

Po mom mišljenju to bi se moglo objasniti ovako:

Ako pišete blog i želite da poboljšate svoje rangiranje, sigurno ne biste iskopirali na svom blogu sadržaj sa nekog drugog bloga.

Vi ćete kreirati originalan i jedinstven sadržaj gde će originalne slike odigrati veliku ulogu.

Na primer, ako kreirate zanimljiv infografik na određenu temu – drugi blogovi će možda preuzeti vaš infografik kada pišu na tu temu. To vam može pomoći da dobijete povratne linkove i poboljšate rangiranje.

Dobra optimizacija takođe uključuje i strateško postavljanje slika.

Slike treba da poboljšaju i dopune tekst, a ne da služe kao predah između blokova teksta.

Uverite se da svaka slika ima vezu sa okolnim tekstom i da pojačava poruku koja se prenosi.

Na primer, recimo da imate patike za trčanje kao glavni proizvod. Na stranici sa patikama možete da uključite:

• slike iz života gde ljudi nose takve patike
• slike delova patike - što bolje objašnjava njihove karakteristike
• fotografije patika iz raznih uglova koje bi brzo privlačile pažnju kupaca

Pomoću naslova slike poboljšajte korisničko iskustvo

Naslov slike je kratak isečak teksta koji se pojavljuje odmah ispod slike.

Za razliku od alt teksta ili prilagođenog naziva datoteke slike – naslovi slika su vidljivi čitaocima. Evo primera slike sa naslovom:

Znam da ćete se pitati: „Pa zašto je ovo važno?“

Reći ću vam da naslovi slika u SEO smislu ne utiču na rangiranje, ali mogu da poboljšaju korisničko iskustvo tako što angažuju čitaoce i podstiču da se duže zadrže na vašem sajtu.

Što više vremena čitaoci provedu, to je signal za Google o pozitivnom korisničkom iskustvu. Ovo indirektno može poboljšati rangiranje.

Da bi naslovi slika bili efektni, treba da budu:

• Opisni, ali sažeti
• Jasni, kratki, konkretni, bez detalja koji bi mogli da preplave korisnike

Na primer, recimo da imate sliku prelepog planinskog pejzaža na Jastrepcu. Možda vam se mnogo sviđa pa biste poželeli da napišete nešto poput: „Prelep pogled na zelene šume i brda Jastrepca, Srbija. Prikazuje neobično jezero i slikovito plavo nebo“.

Međutim, koliko god želeli da se pesnički izrazite, trebalo bi scenu da opišete jasno i sažeto. Ovako nešto bi bilo prikladnije: „Pejzaž Jastrepca, Srbija, jednog sunčanog dana“.

Ovakav naslov neće preopteretiti čitaoce nepotrebnim detaljima, a korisnik će imati jasniju mentalnu sliku.

To što treba da budete koncizni ne isključuje da istovremeno budete opisni u naslovima slika.

Evo primera:

• „Zeleni, elegantan automobil sa tamnim staklima, kreće se krivudavim, sunčanim putem kroz pustinju. Okružen je peščanim dinama sa strane i plavim svetlim nebom“.
• „Zeleni automobil koji se kreće kroz pustinjski pejzaž“.

Primećujete? Prvi primer je predugačak, dok drugi izbegava previše detalja, ali ipak daje opisnu sliku.

Ne morate svakoj slici na stranici da dodajete naslove.

Dodajte samo naslove koji pružaju dodatnu vrednost čitaocu ili poboljšavaju njegovo razumevanje slike.

Na primer: „Srednjevekovna tvrđava Golubac, Srbija, izgrađena u 19. veku spomenik je kulture od izuzetnog značaja.“

Dobra praksa je da u naslov dodate ključne reči. Tako poboljšavate relevantnost sadržaja i šanse da se slike povežu sa ključnim rečima za pretragu i pojave se u Google slikama.

Optimizacija slika za web - napredne tehnike

Omogućite lenjo učitavanje slika

Kada se primeni tehnika lenjog učitavanja slike se učitavaju samo kada treba da se pojave u vidljivom delu ekrana.

To znači da se slike koje se nalaze niže na stranici neće učitati dok ne dođu ispred očiju čitalaca.

Lazy Load je odlična tehnika, posebno ako se primenjuje sa ostalim koracima za optimizaciju slika.

Ako imate WordPress sajt, lenjo učitavanje je lako aktivirati u okviru Smush dodatka, samo pritiskom dugmeta na ON:

Lenjo učitavanje smanjuje početnu težinu web sajta, jer se prvo učitava tekstualni sadržaj i tako smanjuje broj HTTP zahteva kada prvi put neko pristupa sajtu.

Ova tehnika je posebno korisna na mobilnim uređajima i može značajno da ubrza početno vreme učitavanja sajta.

Možete je primeniti i direktnim umetanjem atributa loading = „lazy“ u HTML tag slike:

Prikazujte slike preko CDN-a

CDN je mreža servera koji su raspoređeni širom sveta. Omogućava da korisnici sajta preuzimaju sadržaj sajta sa CDN servera koji je najbliži njihovoj geografskoj lokaciji.

Na primer, ako se vaš sajt nalazi u Srbiji – posetioci će mnogo brže konzumirati sadržaj sa servera iz Evrope, nego iz SAD-a.

Ovo može da poveća brzinu učitavanja sajta, da smanji vreme preuzimanja sadržaja i dovesti do boljeg korisničkog iskustva.

CDN optimizuje slike u realnom vremenu (keširanje, kompresija) i može smanjiti veličinu datoteke slike od 40 do 80% što poboljšava performanse sajta.

Korišćenje CDN-a za slike ima i drugih prednosti:

• smanjuje potrošnju resursa servera
• ne narušava se brzina isporuke slika usled naglog povećanja poseta na sajtu
• često nude detaljnu statistiku za praćenje performansi slika
• mnogi CDN-ovi imaju zaštitnu funkciju sajta od DdoS napada

Ukoliko vam hosting provajder ne obezbeđuje CDN – najbolje je da instalirate neki CDN dodatak za WordPress. Preporučujem da pogledate CloudFlare kao CDN provajdera.

Koristite responzivne slike da odgovaraju svim uređajima

2023. mobilni saobraćaj je činio oko 60% ukupnog internet saobraćaja.

To znači da je optimizacija vašeg sajta za mobilne uređaje (što uključuje i slike) veoma važna.

Slike koje se pravilno prikazuju na različitim veličinama ekrana su responzivne – poboljšavaju korisničko iskustvo i smanjuju stope posete samo jedne stranice.

Responzivne slike su kolekcija slikovnih datoteka koje pregledač (browser) može da izabere.

To je kao takmičenje slika – skup slika na jednoj stranici, a browser svakog korisnika bira i preuzima onu sliku koja najbolje odgovara njegovim potrebama.

Responzivne slike su jedan aspekt responzivnog web dizajna.

Ako postoji problem u vezi sa slikama koje utiču na prilagodjenost vašeg sajta mobilnim uređajima – možete koristiti GTMetrix besplatan alat da identifikujete ove probleme.

Ovaj alat će testirati zahteve za slike i bajtove za slike.

• Ukupni zahtevi za slike mere broj slikovnih datoteka koje browser pokušava da učita kada učitava stranicu. Kada ovaj broj smanjite – to može dovesti do bržeg učitavanja stranice.
• Ukupni bajtovi predstavljaju veličinu svih slikovnih datoteka koje browser zahteva da bi učitao stranicu. 

Na primer, ako postoji pet slikovnih datoteka od 100KB, onda bi ukupan broj bajtova slika bio 500KB. Smanjujući ove bajtove, takođe možete ubrzati vreme učitavanja stranice.

Pomoću GTMetrixa možete da vidite FCP, kao i vreme učitavanja za slike na vašem sajtu.

FCP je metrika koja meri vreme potrebno da se prvi vidljivi sadržaj prikaže kada se sajt učita. Ovo je korisno ako je slika prvi deo sadržaja koji se na stranici pojavljuje.

Kada unesete URL svog sajta na GTMetrixu i dobijete izveštaj, pri vrhu ekrana izaberite opciju Waterfall > Images, gde vas čekaju svi detalji u vezi sa slikama na sajtu:

Jedan od najboljih načina da se smanji broj zahteva za slike je korišćenje tehnike lenjog učitavanja.

Ako tražite alat koji će vam pomoći da uštedite prostor dok istovremeno čistite medijsku biblioteku, možete koristiti WordPress dodatak Media Cleaner da pronađete neiskorišćene medijske datoteke.

On će skenirati sve medijske datoteke na sajtu i izdvojiti one koje se ne koriste kako biste ih pregledali i izbrisali.

Kreirajte mapu sajta za slike

Uključivanjem slika u mapu sajta, omogućavate Googleu da direktno pristupi vašim slikama i indeksira ih.

Na ovaj način Google dobija listu svih slika na vašem sajtu. Ovo povećava šansu da se vaše slike pojave u Google rezultatima pretrage slika.

Pomoću mape sajta dobijate prikaz lokacije, URL-a svake slike.

Mapu sajta slika možete kreirati ručno po Google uputstvu ili pomoću besplatnog alata za generisanje mape sajta kao što je XML Sitemap.

Kako da optimizujete slike za web – zaključak

Optimizacija slika za web je među prvim veštinama u održavanju sajta i igra glavnu ulogu u poboljšanju njegovih performansi. 

Sve tehnike o kojima smo pričali u članku će vam u tome pomoći:

• Izaberite odgovarajući format. Izaberite PNG za slike koje zahtevaju providnu pozadinu, JPG za fotografije, GIF za animacije i WebP za balans između veličine slike i kvaliteta.
• Kompresujte svoje slike. Koristite kompresiju bez gubitka za slike gde su važni detalji, a kompresiju sa gubitkom gde nije presudan savršen kvalitet.
• Uverite se da sve slike imaju opisne alternativne tekstove kako biste poboljšali SEO i pomogli ljudima koji slike čitaju pomoću dodatnih uređaja.
• Postavljajte slike strateški kako biste efikasno dopunili sadržaj. Ne zaboravite da slici dodate naziv, a nakon što je dodate postu i naslov.
• Koristite CDN da biste korisnicima isporučili slike i ostale medijske datoteke bez čekanja.
• Aktivirajte lenjo učitavanje gde se slike učitavaju samo kad uđu u okvir za prikaz, čime smanjujete vreme učitvanja stranice.
• Koristite originalne slike i uverite se da obezbeđuju besprekorno mobilno iskustvo.
• Pratite performanse sajta, jer optimizacija slika nije jednokratan zadatak. Takođe koristite i Google Analytics da poboljšate korisničko iskustvo.

Optimizacija slika za web ima za cilj da poboljša vidljivost i rangiranje slika u rezultatima pretrage i u pretrazi slika na Googleu. Tako usmeravate posete na svoj sajt i poboljšavate celokupno korisničko iskustvo.

Počnite sa malim koracima, kao što je alt text i ime datoteke slike, pa postepeno pređite na lenjo učitavanje i ostale tehnike.

Pomoću PageSpeed Insights-a pratite učinak sajta i stalno usavršavajte svoj pristup.

Najčešće postavljana pitanja

Zašto bi trebalo da optimizujem slike za web?

Optimizacija slika je glavna ako želite da poboljšate vreme učitavanja sajta i da poboljšate korisničko iskustvo.

Koji format slika da koristim za optimizaciju?

Za slike koje zahtevaju precizne detalje, providnu pozadinu preporučujem PNG format, dok je za fotografije i složene slike poželjniji JPG format. WebP format je popularan zato što omogućava manje veličine datoteke od PNG i JPG formata uz dobar kvalitet.

Kako da optimizujem sliku bez gubitka kvaliteta?

Da biste optimizovali slike bez gubitka kvaliteta koristite alate kao što su GIMP, Imagify i drugi. Takođe će pomoći da promenite veličinu slike na tačne dimenzije koje su vam potrebne jer manje dimenzije prirodno obezbeđuju manju veličinu datoteke.

Da li mogu da preteram sa upotrebom slika na sajtu?

Naravno. Možete preopteretiti sajt slikama, što je loše za korisničko iskustvo i obično vodi do sporijeg učitavanja sajta. Koristite samo relevantne slike koje dodaju vrednost vašem sadržaju.

Da li su mi potrebne dozvole autora za korišćenje slika na mom sajtu?

Ako na sajtu koristite slike koje su zaštićene autorskim pravima, važno je da dobijete dozvolu autora, jer tako izbegavate pravne probleme. Druga opcija je da koristite slike koje nisu zaštićene autorskim pravima ili da kreirate svoje originalne slike.

Hvala što ste pročitali ovaj članak! Stvarno cenim to!

Uložila sam vreme i energiju u njegovo pisanje kako bih pružila vrednost svojim čitaocima i blogerskoj zajednici. Značilo bi mi da lajkujete članak i razmislite o tome da ga podelite na društvenim mrežama. 

Ako vas zanimaju moćni saveti - prijavite se na moj Internet marketing newsletter.