Optimizacija slika za sajt ukratko znači prilagođavanje veličine slike Google-ovim pravilima učitavanja sajta. Međutim, da bi slika održala svoj kvalitet i ostala jednako validna kako za Google tako i za korisnika, potrebno je formatiranje.
Pored kvalitetnog teksta, slika je drugi obavezan faktor svake kvalitetne komunikacije sa korisnikom. Iako marketing stručnjaci upozoravaju da je bolje držati se žive reči, slika je nešto što ostaje u memoriji korisnika, nekada ostavljajući mnogo veći efekat nego zvuk.
Međutim, pravila marketinga su jedno, a Google-ova pravila nešto drugo. Nešto što smo svakako pominjali i u prethodnim tekstovima je brzina sajta, tačnije brzina učitavanja sadržaja na sajtu. Što se sadržaj sporije učitava, ma koliko god on i bio zanimljiv, korisnik ga verovatno neće otvoriti.
Google pravila optimizacije – između ljubavi i mržnje
Korisnici društvenih mreža i nove internet generacije imaju izuzetno izoštrena čula za kvalitet i trajanje sadržaja. Sva pravila marketinga su prilagođena korisnicima, i sva Google-ova pravila su prilagođena korisnicima. Pogađate, ništa od toga nije u skladu sa Vašim pravilima. Zato…koliko god Vaša slika imala smisla sa estetske i edukativne strane, možda ne bi trebalo da je stavljate na svoj blog, jer njena veličina iznosi čak 600kb. Šta sada ovo znači?
Ovo znači da ako imate mnogo slika, vrlo je verovatno da će performans sajta biti narušen. A to Google ne voli. Dakle, mnogo slika – sporo učitavanje sajta – Google se ljuti. U slučaju da pokušate da udovoljite Google-u, pa uradite nešto poput smanjivanja formata slike, a slika izgubi svoj kvalitet i postane mutna, imamo sledeću situaciju – menjate veličinu slike – slika je mutna – Google se ljuti. Ovu frustraciju je moguće rešiti, ali uz proverenu taktiku i podršku određenih programa.
54% težine sajta čine slike
HTTP arhiva, iz decembra meseca, 2017. godine navodi podatak da čak 54 % težine sajta čine slike. To bi trebalo da znači da prvo što treba da uradimo je optimizacija slika. To nije uopšte težak posao, ali ironično najmanje se radi.
Optimizacija slika – benefiti:
Poboljšavanje brzine učitavanja stranice.
Vidljivosti u rezultatima, u pretraživaču. Velike slike usporavaju sajt, a Google mrzi spore sajtove.
Brže kreiranje rezervnih kopija.
Smanjivanje vremena učitavanja slika.
Smanjivanje prostora na Vašem serveru. Velike slike traže više prostora na serveru što košta više. A i koliko smo videli iz priloženog, ni Google nije oduševljen ogromnim fotografijama.
Formatiranje? Šta je to?
Primarni cilj formatiranja slike je pronalaženje ravnoteže između veličine slike i prihvatljivog kvaliteta. Ovo možete uraditi u fotošopu (Adobe Photoshop) ili putem WordPress dodataka, od kojih ćemo neke uskoro pomenuti.
Dve osnovne stvari koje treba uzeti u obzir su format datoteke i vrsta kompresije koju koristite. Izborom odgovarajuće kombinacije formata fajla i tipa kompresije možete smanjiti veličinu slike za čak 5 puta. Morate eksperimentisati sa svakim formatom slike kako biste videli šta daje najviše rezultata.
Format datoteke – PNG, JPEG, GIF
Pre nego što počnete da menjate svoje slike, uverite se da ste izabrali najbolji tip datoteke. Postoji nekoliko vrsta datoteka koje možete koristiti:
PNG – kvalitet se prilikom kompresije ne gubi, ali je veličina fajla veća
JPEG – dozvoljava podešavanje slike spram balansa kvaliteta i veličine slike
GIF – koristi samo 256 boja. To je najbolji izbor za animirane slike. Ona koristi samo kompresiju bez gubitaka kvaliteta.
Postoji i nekoliko drugih formata, kao što su JPEG KSR i VebP, ali oni nisu univerzalno podržani od svih pretraživača. Idealno, trebalo bi da koristite JPEG (ili JPG) format za slike sa mnogo boje i PNG format za jednostavnije slike.
Kako je preporučljivo da težina veb stranice bude do 1MB, ne bi trebalo stavljati velike slike. Međutim, velika slika i mutna slika jednako su neprihvatljive Google-u. Šta činiti u ovom slučaju? Pred Vama su tri slike, prva slika ima 356kb, druga slika ima 40kb, a treća slika ima 124kb, što je najprihvatljivije za održavanje kvaliteta slike.
Slika 1- 356 kb veličina slike
Slika 2 – 40kb veličina slike (primetiti promenu u kvalitetu)
Slika 3 – 124kb veličina slike, a kvalitet slike nije promenjen
Kompresija sa i bez gubitka kvaliteta slike
U prethodnom slučaju mi smo se opredelili za korak eliminacije kvaliteta slike, tačnije izabrali smo opciju da malo narušimo kvalitet slike, a u korist smanjenja veličine, ali tako da izgled slike ne bude u potpunosti narušen već u onoj meri koja najviše odgovara originalnoj slici.
U slučaju zadržavanja kvaliteta slike, potrebno je da slika bude nekompresovana sve dok se ne prikaže. Ovo se može uraditi u fotošopu i fajl optimizeru (FileOptimizer). Mnogi plugin-ovi podržavaju Gzip kompresiju na slikama (minimiziranje). Međutim, bez obzira na korišćen alat za kompresiju, bitno je da ima opciju čuvanja slike za veb stranicu (save for web) čime se dobija optimalna kompresija slike.
Programi za kompresovanje slika koje možete koristiti su Adobe Photoshop, Affinity Photo, Gimp, Paint.Net, GIFsicle, FileOptimizer, TinyPNG i sl.
Da li CSS menja veličinu slike?
Ako koristite WordPress Vaše slike će prilikom uploadovanja biti smanjene na određenu veličinu, a za WordPress biblioteku. Da bismo sprečili da CSS menja veličinu slike potrebno je da se osiguramo da maksimalna širina odgovara širini Vašeg sajta. Ova podešavanja možete naći u okviru opcije: settings – media.
WordPress nudi mogućnost postavljanja fotografije male veličine u okviru nekog teksta, ali ne zaboravimo da se originalna veličina slike koju ste uploadovali nije promenila. Ako želite da promenite veličinu slika i da sačuvate prostor na disku tako što nećete čuvati original, možete koristiti besplatni dodatak koji se zove Imsaniti (Imsanity).
Imsaniti dozvoljava ograničavanje slike na normalnu veličinu, pre nego se otpremi, tačnije prikaže u WordPressu. Naravno, WordPress je zato i osmislio pluginove koji će Vam pomoći u olakšavanju ove vrste posla, s tim da je naša sugestija da bez obzira na preporučene pluginove unapred kompresujete sliku spram odgovarajućeg kvaliteta i veličine.
Pluginove koje preporučujemo su Imagify, WP Smush i Tiny PNG
Slika 4 – WorPress dodatak-Imagify
Imagify ima kompleksnu optimizaciju gde možete birati između tri različita nivoa kompresije: normalne, jake i ultrazvučne. Ima i funkciju za vraćanje, pa ako niste zadovoljni kvalitetom, možete jednom da kliknete na obnavljanje i ponovno kompresovanje na nivou koji više odgovara Vašim potrebama. Postoji besplatna verzija i verzija koja se plaća. Ograničeni ste na veličinu od 25 MB slika mesečno sa besplatnim nalogom.
Slika 5 – WorPress dodatak-WP Smush
WP Smush je kompatibilan sa nekim od najpopularnijih pluginova medijske biblioteke kao što su VP All Import i VPML. Sve optimizacije slika se rade kompresijom bez gubitaka, čime se zadržava kvalitet slike. Nije bitno u kojem direktorijumu se slike čuvaju, pošto ih ovaj plugin brzo pronalazi i kompresuje.
On će skenirati slike i kompresovati ih dok se uploaduju u biblioteku. Može kompresovati i do 50 fajlova odjednom, a radi sa svim tipovima datoteka, JPEG, PNG, GIF. Veličina datoteka je ograničena na 1MB. Smush ima mogućnost automatskog podešavanja širine i visine za sve slike, a kao i svi ostali pluginovi ima besplatnu i plaćenu verziju.
Slika 5 – WorPress dodatak-TinyPNG
TinyPNG koristi TinyJPG i TinyPNG datoteke za optimizaciju JPG I PNG slika. Ovaj program će pretvoriti CMIK u RBG kako bi uštedeo prostor. Snima JPEG slike do 60% i PNG slike do 80% bez vidljivog gubitka u kvalitetu slike. Ovaj plugin nema ograničenje veličine datoteke.
Primeri dobre prakse
I za kraj, praksa uvek daje najbolje rezultate, pa vodite računa o sledećim stavkama:
Koristite WordPress pluginove za kompresovanje i optimizaciju slika. Ovim štedite prostor na serveru.
Koristite vektorske slike kad god je to moguće uz vaše PNG i JPG fajlove.
Umanjite veličine svojih slika (JPG, PNG, SVG) sa Gzip kompresijom.
Uklonite nepotrebne podatke na slici (neki detalji, poput oštrine određenih delova slike obično nisu presudni za izgled slike).
Koristite CSS3 efekte koliko god je moguće.
Sačuvajte svoje slike u odgovarajućim dimenzijama umesto da dozvolite HTML-u ili CSS-u da ih sami menjaju.
Eksperimentišite u cilju pronalaženja najboljeg podešavanja za svaki format.
Koristite GIF ako vam je potrebna animacija.
Koristite PNG ako vam potrebno da zadržite kvalitet i visoku rezoluciju.
Koristite JPG za opšte fotografije i screenshot-ove.
Skalirajte svoje slike na veličinu ekrana da biste smanjili broj piksela.
Uklonite sve nepotrebne metapodatke.
Automatizujte proces koliko god je to moguće.
Sačuvajte slike kao ,,optimizovane za veb“ (save for web).
