Zašto optimizirati slike za web stranicu?

 

Slike koje ste stvorili u programima kao što su Photoshop i Ilustrator izgledaju prekrasno, ali često slike su prevelike i "teške". To se događa zato što su slike izrađene u obliku sa kojim je lako manipulirati sa njima

Ako su slike veličinama velike i po 1 mb po slici, te ako ste iste upotrijebili za web one će jako usporiti web stranicu.

 

Optimiziranje slika za web znači uštedu ili sastavljanja svoje slike na web-friendly formatu, ovisno o tome što slika sadrži.

Slike sadrže piksele koje vidimo na ekranu kao podatke. Ti se podaci mogu nepotrebno dodati za veličinu slike, što dovodi do više vremena učitavanja slike i duže vrijeme da korisnik pregleda web stranicu na kojoj se nalazi slika.

Uspoređujući cijenu u odnosu na korist, optimizacija slika za web stranica trebala bi biti na vrhu Vaših prioriteta.

Kako se to radi?

U jednostavnim uvjetima, optimiziranje slika vrši se uklanjanjem svih nepotrebnih podataka koji su spremljeni u sliku i koristi se na Vašoj web stranici.

Pravim optimiziranjem slika za web može smanjiti ukupnu veličinu učitavanja stranice do 80%.

Postoje dva oblika kompresije koje moramo razumjeti, Lossy i Lossless.

Slike spremljene u Lossy formatu će se malo razlikovati od izvorne slike komprimirana. Imajte na umu da je ovo samo iz vrlo pomnog promatranja. Lossy kompresija je dobra za web, jer slike koriste malu količinu memorije, ali može izgledati kao i izvorna slika.

Slike spremljene u Lossless formatu sadržavaju sve podatke kao orginalna slika. Iz tog razloga ove slike nose puno više podataka, a i usporedno s tim i datoteka je puno veća.

Također možete optimizirati slike za web smanjujući izvorne dimenzije. Promjena veličine slike na samoj stranici pomoću CSS-a je korisna, ali problem je što će web preglednik i dalje će preuzeti cijelu izvornu datoteku, a zatim promijeniti veličinu i prikazati ga krajnjem korisniku.