Optimizacija slika - koje slike koristiti na sajtu?

Optimizacija slika je veoma bitan segment prilikom rada na optimizaciji sajta za pretraživače. Pre svega, koje slike uopšte razmatrati u smislu korišćenja istih na web sajtu? Iz SEO ugla, najbolje bi bilo koristiti sopstvene autorske slike. Takve će slike Google registrovati kao potpuno nove na internetu, stoga originalne i naše. Kupljene slike iz nekog stock-a, biže prepoznate kao slike koje nisu naše vlasništvo. Jedino u slučaju kada kupljene slike prebacimo u crno-belu varijantu, Google ih neće registrovati kao već postojeće na internetu.

Zakonom  je  zabranjeno i neetički je korišćenje slika sa autorskim pravima, a bez dozvole ili odgovarajuće nadoknade. To se tretira kao krađa nečijeg intelektualnog dobra. Uvek bi, u najmanju ruku, trebalo tražiti dozvolu, pa čak i ako se radi o slikama koje se postavljaju na društvenim mrežama ili koje se nalaze u literaturi.

Optimizacija slika – zašto?

Slike mogu u velikoj meri uticati na brzinu web sajta, posebno ako je reč o velikim slikama visoke rezolucije. Taj problem rešava optimizacija slika pre nego što se postave na sajt. Cilj optimizacije bi bio da se u procesu ogovarajuće obrade slike smanji fajl,  ali bez značajnijeg gubitka kvaliteta slika.

Korišćenjem odgovarajućih tool-ova, slika se može kompresovati, čime se postiže smanjenje fajla, ponekad čak i do 80%, a da je gubitak na kvalitetu beznačajan. Postoje 2 vrste kompresije:

  • Lossy – dolazi do izvesnog gubitka u kvalitetu, ali on ne bi trebalo da bude primetan
  • Loosless – smanjuje se ukupna veličina fajla, ali se kvalitet zadržava

Optimizacija slika – prednosti

  • bolji SEO – optimizacija za pretraživače (brzina utiče na SEO)
  • brzina web stranice je veća
  • stopa konverzije se povećava sa brzinom (zadovoljniji korisnici, povećava se profit)
  • manje prostora slike zaizimaju, a manji je i propusni opseg (jeftiniji hosting i CDN)

Iz gore navedenog naslućujemo koliko je optimizacija slika, a koje često mogu zauzimati veliki deo sadržaja sajta, važan segment prilikom izrade sajta. Optimizacija slika je u direktnoj vezi sa boljim pozicioniranjem sajta na pretraživaču.

Ipak, bitno je uspostaviti što bolji balans između što manjeg fajla slike I što boljeg kvaliteta iste.

U optimizaciji slika bitnu ulogu imaju sledeće stavke:

  • format slike
  • kompresija slike
  • dimenzije slike

Format slike

  • Slike mogu biti u sledećim formatima: JPG, JPEG, PNG, GIF, SVG I WEBP formatu.

    Za fotografije se preporučuje  JPG format jer se dobro kompresuje. To je tzv. RASTERSKI (bitmap) format koji se čuva kao matrica piksela, odnosno tabela piksela od n redova i m kolona. Najbolji kvalitet takvih slika je u rezoluciji u kojoj je originalna slika, što znači da će skaliranjem izgubiti na kvalitetu usled promene veličine piksela.

    PNG takođe pripada ovoj grupi i preporučuje se za VEKTORSKE grafike jer njih dobro kompresuje, za jednostavnije slike, logo, infografiku i sl. ili kada želimo slike sa providnom pozadinom. U JPG formatu ne možemo dobiti providnu pozadinu jer nema alpha kanala, ali je fajl slike manji i bolja je za slike sa velikim brojem detalja i više boja.

    GIF su animirane slike.  GIF ima samo 256 boja, sve sa kompresijom. Ne gubi kvalitet, pa je najbolje rešenje za animacije.

     

    SVG slike

    SVG (Scalable Vector Graphics) je VEKTORSKA slika, zasnovan na XML-u, skalira bez gubitka kvaliteta i odlična je za responsive dizajn. Najčešće se koristi za ikonice.

    SVG je dosta manji od bitmap formata slika kao što su JPG i PNG. SVG slike su potpuno skalabilne, što znači da su istog kvaliteta u svim veličinama.

    Pošto je SVG zasnovan na XML-u, unači da se može kontrolisati pomoću CSS-a i JavaScript-a. Na taj se način proširuju mogućnosti interaktivnosti.

    SVG je deo izvornog koda, pa je odmah na raspolaganju I za njega nisu potrebni dodatni HTTP zahtevi.

    WordPress ne podržava svg format, ali se može koristiti uz pomoć odgovarajućih dodataka.

Sprajt slike - Image sprites

Možemo ubaciti čitavu sliku, a onda rezanjem (tzv. sprajtovima) omogućiti pojedinačno korišćenje delova koji su nam potrebni i gde su nam potrebni. Prednost je što svako ponovno učitavanje predstavlja novi zahtev serveru, ali u ovom slučaju imamo samo jedan zahtev jer se sve odjednom učita.

Sprajt slike je, ustvari, kolekcija manjih slika stavljenih u samo jednu veću sliku. Da bi se izbeglo generisanje višestrukih zahteva serveru i usporavanje učitavanja, ako imamo web stranicu sa mnogo slika, koriste se sprijtovi slika. Oni smanjuju broj zahteva serveru i štede propusni opseg.

WEBP format

Google je sa WebP formatom slike pokušao da postigne najbolje od JPEG, PNG I GIF (dobra kompresija, kvalitet, transparentnost i mogućnost animacije). Postiže se za oko 30% manji fajl nego kod JPEG ili PNG.

WebP zadržava kvalitet slike i uz značajnu kompresiju, tj. smanjenje veličine.

Možemo reći da webp u suštini kombinuje karakteristike svih ostalih formata slike (JPEG, PNG i GIF) zajedno, s tim što za razliku od njih nudi bolji odnos kvaliteta i kompresije. Na izlazu daje veličine datoteka koje su u proseku oko 30% manje od JPEG-a ili PNG-a bez razlike u kvalitetu. Pored toga on zadržava i transparentnost (alfa kanal) kao kod PNG, kao i mogućnost animiranja slika poput GIF formata.

Pošto webp nema potpunu podršku kod nekih pretraživača, dobro bi bilo uz webp format imati iste te slike u nekom JPEG ili PNG formatu, kako bi se prikazale u slučaju da se webp ne prikaže. To se može postići nekim dodacima ili dodavanjem odgovarajućeg koda. Takođe postoje dodaci za izvoz slika u webp format. Jedan od popularnih alata je Squoosh.

WordPress ne podržava webp format, ali se može koristiti uz pomoć odgovarajućih dodataka ili, još bolje, dodavanjem odgovarajućeg koda u functions.php. 

Uglavnom, Google daje prednost webp-u kao svom proizvodu, a imajući u vidu brzinu sajta i ostale performanse, svakako bi izbor webp formata doprineo SEO-u.

Optimizacija slika – kompresija

Adobe Photoshop, GIMP, Affinity Photo i mnogi drugi alati već imaju ugrađene funkcije za kompresije slike.

Postoje i alati kao što su TinyPNG ili JPEGmini koji su odlični za kompresiju slika.

Na raspolaganju su nam i WordPress dodaci, od kojih je jedan od najpopularnijih EWWW Image Optimizer, a koji vrše automatsku kompresiju slike prilikom prvobitnog upload-ovanja.

Dimenzije slike

Fotografije visoke rezolucije, na primer 300 DPI (300 dots per inch – 300 tački po inču) i dimenzije od 2000 piksela i više su visokog kvaliteta. One su odlične za grafički dizajn i štampu, ali su neodgovarajuće za sajtove. Veličinu slika možemo jednostavno izmeniti pomoću programa za izmenu slika.

  • Za slike koje su predviđene kao velike da stoje u zaglavlju: 1920x1080px (Full HD rezolucija) – odnos širina : visina 16 : 9
  • Za manje slike je dovoljna: 1024x768px (dobija se dobar kvalitet, a onda se dodatno kroz WordPress može korigovati veličina da se uklapa tamo gde je potrebno) – odnos širina : visina 4 : 3
  • Ukoliko je potrebno negde postaviti slike kvadratnog oblika unutar postova ili galerija (odnos širina : visina 1 : 1): optimalno bi bilo 600x600px

Napomena: DPI (dots per inch) je važan za štampane medije, dok je za WEB relevantna rezolucija slike u pikselima (na primer, za web je dovoljan dpi 72, dok je za štampane medije premali). Zato ignorisati dpi, ali umesto toga obratiti pažnju na veličinu slike u smislu koliko memorije zauzima jer prevelike slike usporavaju stranicu:

Idealno je ako je veličina slike ispod 200KB

Pošto se često podrazumeva da slike dolaze sa raznih izvora i u raznim rezolucijama i dimenzijama, uvek je preporučljivo unapred ih prilagoditi, koliko je moguće, a posebno u smislu da ne zauzimaju više od 200KB memorije (koriste se alati za kompresiju) i da zadovoljavaju određeni odnos širine i visine (posebno u slučaju galerija). Time se postiže da stranica izgledala uredno, a da slike primetno ne usporavaju otvaranje stranice.

Optimizacija slika - alati i dodaci

Pre nego što postavimo slike na sajt, trebalo bi koristiti neki od sledećih alata za optimiziranje slika:

  • Adobe Photoshop
  • GIMP
  • ImageOptim
  • JPEGmini

Najpopularniji WordPress dodaci za kompresiju slika:

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

CDN za prikazivanje slika

CDN (Content Delivery Network) čini da se sajt učitava podjednako brzo bilo gde u svetu bez obzira u kojoj državi se nalazi server na kome je postavljen taj sajt. Razlog toga je što se uz pomoć CDN čuva statički sadržaj našeg sajta na više servera postavljenih širom sveta.