Kako Optimizirati Slike za Web-stranicu i Tražilice

developeri optimiziraju slike za web

Optimizacija slika je jedna od najjednostavnijih i najučinkovitijih stvari koje možete napraviti da bi transformirali web-stranicu od dobre do odlične, jer one imaju ogroman utjecaj na brzinu web-stranice.

Srećom, možete jednostavno smanjiti njihovu veličinu/rezoluciju tj. optimizirati ih za web i performanse, kako biste poboljšali izvedbu svoje web-stranice.

Jedan od problema pri optimizaciji slikovnih datoteka jest, da se smanjuje njihova kvaliteta. To nije loša stvar sve dok ih ne pretvorite u nešto ružno.

Postoje neke tehnike ispod opisane, koje će vam omogućiti da smanjite veličinu i zadržite kvalitetu za ponosno prikazivanje na web-stranici.

 

ISTRAŽIVAČI SU OTKRILI DA, AKO KORISTITE ŠARENE SLIKE, IMATE 80% VEĆE ŠANSE DA ĆE SE POSJETITELJI ZADRŽATI I PROČITATI VAŠ SADRŽAJ DO KRAJA.

 

Prednosti Optimiziranih Slika

Prema HTTP arhivu, slikovne datoteke u prosjeku čine 54% ukupne “težine” stranice. U slici ispod, možete vidjeti da su stranice sve “teže” zbog njih.

Dakle, kada je riječ o optimizaciji WordPress web-stranice, prvo krenite od njih.

 

težina web stranica

 

Glavne prednosti:

  • Poboljšat ćete brzinu učitavanja stranica. Velike datoteke usporavaju web-stranicu, a tražilice (Google) ne vole spore web-stranice.
  • U kombinaciji s dobrim SEO dodatkom poboljšat ćete svoj SEO rezultat i dobiti više organskog (besplatnog) prometa.
  • Zahtijevaju manje prostora za pohranu na vašem serveru.
  • Izrada sigurnosnih kopija (backup) će biti brža.

 

Kako Optimizirati Slike za Web i Performanse

Primarni cilj je postići ravnotežu najniže veličine datoteke s najvišom mogućom kvalitetom.

Jedan od najpopularnijih načina je vrlo jednostavan, komprimirajte ih prije prijenosa u WordPress.

Možete to učiniti s plaćenim editorima poput Adobe Photoshopa ili Affinity Photo. Postoji i niz dostupnih besplatnih rješenja na internetu, uključujući odličan TinyPNG i Kraken Image Optimizer.

Dvije glavne stvari koje trebate uzeti u obzir su format datoteke i vrsta kompresije.

Odabirom odgovarajuće kombinacije formata datoteke i kompresije možete smanjiti veličinu slika za čak 80%. Morat ćete eksperimentirati sa svakom slikom ili formatom datoteke kako biste vidjeli što najbolje funkcionira.

Slike bi trebale biti manje od 100 KB za najbolje performanse.

 

Odaberite Odgovarajući Format Datoteka

Prije nego počnete mijenjati svoje slike, pobrinite se da ste odabrali najbolju vrstu datoteke. Postoji nekoliko vrsta grafičkih datoteka koje možete koristiti:

Rasterska Grafika

Rasterske slike su izrađene od piksela. Piksel je jedna točka tj. najmanji pojedinačni element. Svaka slika ima određeni broj piksela, kada je povećate bez mijenjanja piksela, vidjet ćete puno sitnih kvadrata tj. izgledat će zamućeno.

Formati:

JPEG (Joint Photographic Experts Group): izvrsne su za obradu i manipulacije, te za slike s velikim brojem boja i gradijenta. Veliki nedostatak je podrška za transparentnost.

Moguće je koristiti lossy (kompresija kod koje se gube podaci) i lossless (kompresija kod koje se ne gube podaci)

PNG (Portable Network Graphics): nastao je kao zamjena za GIF, nisu komprimirane što znači da imaju više detalja tj. izvrsnu kvalitetu, uz to podržavaju i transparentnost.

Loša strana je da su zbog toga veće u veličini, pa je potrebno više vremena za učitavanje. Moguće je koristiti samo lossless kompresiju.

GIF (Graphics Interchange Format): pohranjuje slikovne podatke indeksiranom bojom, što znači da standardna GIF slika može sadržavati najviše 256 boja.

Najbolji je izbor za animirane slike. Moguće je koristiti samo lossless kompresiju.

Koju Odabrati?

Ako vaša slika ima puno različitih boja koristite JPEG, ako je jednostavnija i trebate transparentnost koristite PNG.

 

Vektorska Grafika

Slike generirane matematički, iz osnovnih geometrijskih oblika kao što su točke, linije i krivulje.

Formati: SVG, EPS i AI.

Zbog njihove računalno generirane prirode, vektorske slikovne datoteke dolaze s brojnim prednostima:

  • Vektorske datoteke mogu se povećati i smanjivati na bilo koju veličinu bez izobličenja ili gubitka detalja i savršeno će se prikazivati pri svakoj rezoluciji.
  • Sastoje se od niza programskih uputa, što znači da su male veličine.
  • Izvrstan su izbor za izradu grafičkih elemenata kao što su ilustracija i logotip.

 

Kompresija: Kvaliteta vs Veličina

Ispod je primjer što se može dogoditi ako previše komprimirate sliku.

Prva koristi lossless kompresiju, što je rezultiralo višom kvalitetom, ali i većom veličinom datoteke (84 KB).

Druga je komprimirana s vrlo visokom lossy kompresijom, što rezultira vrlo niskom kvalitetom, ali i manjoj veličini datoteke (14 KB).

Lossless kompresija (84 KB)

 

optimizirana slika s lossless kompresijom

 

Vrlo visoka lossy kompresija (14 KB)

 

slika optimizirana s visokom lossy kompresijom

 

Ponovimo, cilj je pronaći ravnotežu između stope kompresije (kvalitete) i veličine datoteke.

Ponovno sam komprimirao sliku srednje visokom lossy kompresijom i kako možete vidjeti ispod, kvaliteta sada izgleda dobro.

Srednje visoka lossy kompresija (47 KB)

 

fotografija srednje visoko kompresirana

 

 

Najbolji Online Alati i Programi za Komprimiranje

Postoji mnogo online alata i programa koje možete koristiti za komprimiranje tj. optimizaciju. Neki vam daju alate s kojima vi upravljate, neki rade za vas.

Osobno, najčešće koristim TinyPNG.

Evo nekoliko dodatnih programa i online alata:

  • Adobe Photoshop
  • JPEG Mini
  • Kraken Image Optimizer

Za više alata pročitajte najbolji besplatni programi za uređivanje fotografija i slika.

 

Rezolucija Slika za Web

Još jedna vrlo važna stvar kada je riječ o optimizaciji slikovnih datoteka, trebate ih prenijeti u WordPress promijenjene veličine tj. rezolucije.

Bez obzira na format datoteka, nikad ne biste trebali prenositi slike visoke rezolucije na svoju web-stranicu samo za potrebe prikaza.

Slideshow Pune Širine

Za prikaz slajdova (koji se automatski protežu do pune veličine web preglednika) preporučujem vam širinu od minimalno 1920 piksela. Što se tiče visine, pokušajte zadržati slike u omjeru od oko 3:1.

Minijature i Slike u Objavama

Prvo saznajte koju veličinu vaša web-stranica prikazuje (pomoću web preglednika tj. alata “inspect element” odnosno “provjeri” ili napravite snimku zaslona i izmjerite veličinu slike) zatim udvostručite taj broj.

Na primjer, ova tema prikazuje širinu slika (u objavama) od 640 piksela.

 

rezolucija fotografija

 

No, ako bolje pogledamo, tema koristi dvostruku veličinu slike (1280 piksela), kako bi one izgledale odlično na retina zaslonima.

 

inspect element u chrome pregledniku

 

Velike Slike u “Lightboxu”

Kad god se slika treba povećati na zaslonu (na primjer, u lightboxu nakon što posjetitelj klikne na minijaturu), pokušajte ju zadržati u širini od najviše 1500 piksela odnosno visine od oko 800-900 piksela.

Ograničavanjem dimenzija, veličina datoteka bit će relativno mala, pa će prijelaz između slika biti brži (ako slideshow omogućuje navigaciju između slika).

Ako želite promijeniti veličinu slika online, vrlo dobar je Picresize.

 

WordPress Dodaci za Optimizaciju Slika

Srećom, s WordPressom ne morate sve ručno raditi. Postoji nekoliko dodataka koji će automatski optimizirati vaše slikovne datoteke nakon što ih prenesete.

Neki će čak optimizirati slike koje ste već prenijeli. Odlična značajka, pogotovo ako imate web-stranicu s mnogo slikovnih datoteka.

Važno je da se ne oslanjate samo na dodatke. Na primjer, ne biste trebali prenijeti slike od par MB u zbirku media. Brzo ćete popuniti zakupljeni prostor na serveru.

Najbolja metoda: promijenite veličinu datoteke, zatim je prenesite u WordPress i upotrijebite jedan od sljedećih dodataka za komprimiranje.

WP Smush

Odličan WP Smush dodatak ima besplatnu i premium verziju. Smanjuje veličinu datoteka bez smanjenja kvalitete.

Funkcionira tako da skenira sliku i smanjuje joj veličinu kada ju prenesete u WordPress. Također će skenirati i smanjiti već prenesene. Podržava JPEG, GIF i PNG.

TinyPNG

TinyPNG koristi online alate TinyJPG i TinyPNG za optimizaciju JPG i PNG datoteka. Automatski komprimira nove i postojeće JPG datoteke do 60% i PNG do 80% bez vidljivog gubitka na kvaliteti.

Pretvara CMYK u RBG radi uštede prostora.

Imagify Image Optimizer

Imagify je stvorio isti razvojni programer koji je izradio WP Rocket, najbolji dodatak za cache. Kompatibilan je s WooCommerceom i NextGen Gallery.

Možete birati između tri različite razine kompresije, tj. normalan, agresivan i ultra.

 

Optimizacija Slika za SEO u 2 Koraka

Jeste li znali da pretraživanje slika na Googleu, premašuje sva pretraživanja na Facebooku, Yahoou, Amazonu i YouTubeu?

 

Strukturni krug ili kružni grafikon tražilica u postocima

 

Bez potrebnih optimizacija, nijedna od tražilica neće moći prepoznati i indeksirati vaše slike u svoje rezultate.

Za više informacija, pročitajte Googleove savjete za pojavljivanje slika u pretraživanju.

1. Promijenite Naziv Slike

Uvijek promijenite naziv slike prije nego što ju prenesete na svoju web-stranicu.

Upotrijebite opisne nazive koji prikazuju vaše ključne riječi, a ne besmislene generičke nazive.

Upotrijebite crticu (-) između riječi u nazivu, jer Google čita slikovne datoteke s crticama kao pojedinačne riječi. Na primjer, pogrešno je nazvati sliku seo_optimizacija_sadržaja.jpg ili seooptimizacijasadržaja.jpg.

 

naziv datoteka u file exploreru windows 10

 

2. Dodajte Alt Tekst

Naziv i alt tekst su jednako važni. Alt tekst je izvorno osmišljen kako bi pružio tekstualno objašnjenje slike za korisnike koji ju ne mogu vidjeti.

Google, alt tekst koristi kako bi lakše prepoznao relevantnost (predmet) slike za sadržaj oko nje.

Probajte uključiti ključnu riječ u alt tekst najmanje jedne slikovne datoteke na stranici.

Izbjegavajte pretrpavanje alt teksta ključnim riječima, Google takav sadržaj smatra spamom tj. kažnjava niskim rangom u SERP-u.

 

Narančasta mačka leži pored kaktusa

 

Nedovoljan alt tekst: <img src=”mačka.jpg” alt=”Mačka”/>

Dobar alt tekst: <img src=”mačka.jpg” alt=”Mačka leži”/>

Najbolji alt tekst: <img src=”mačka.jpg” alt=”Narančasta mačka leži pored kaktusa”/>

Za puno više informacija oko SEO-a, pročitajte kako napraviti SEO optimizaciju odnosno kako optimizirati web-stranicu za tražilice.

 

Kako Saznati Ima li Web-stranica Problem s Veličinama Slika

Testirajte svoju web-stranicu na Google PageSpeed Insightsu, ako imate problema, vidjet ćete ovo:

 

testiranje web lokacije na PageSpeed insights

 

Kliknite na “Postavite slike u odgovarajućoj veličini”, prikazat će vam se slike koje trebate komprimirati.

Google preporučuje lossless kompresiju koja može uštedjeti mnogo (bajtova) podataka.

Slijedite sljedeća tri koraka podešavanja prema potrebama vaše web-stranice.

1. Odaberite odgovarajući format slike.

2. Odrežite (crop) tj. promijenite veličinu slika za maksimalni vizualni utjecaj na web-stranicama poput Picresize, komprimirajte slike na web-stranicama poput TinyPNG za minimalnu veličinu datoteke ili iskoristite WordPress dodatak.

3. Uzmite dodatno vrijeme kako bi optimizirali sve slike za SEO, dobit ćete veći promet s tražilica.