Optimizacija slika za web – progressive JPEG

JPEG je vrlo popularna i često korišćena metoda za lossy kompresiju (smanjivanje podataka sa gubicima) digitalnih slika. Prednost JPEG-a je mogućnost podešavanja nivoa kompresije zavisno od toga da li želite da zadržite veći kvalitet slike ili vam je ipak bitnija veličina datoteke i prostor koji će zauzeti na disku.

Upravo zbog mogućnosti podešavanja kompresije prema potrebama korisnika, JPEG je najčešće korišćen format za čuvanje slika na sajtu – više od 70% svih web stranica na Internetu koristi JPEG.

Kvalitet i veličina slika koje koristite na vašoj web stranici veoma utiču na utisak koji će vaša stranica ostaviti na posetioca. Loše kompresovane, velike slike mogu jako usporiti rad sajta, i samim tim posetiocima ostavljaju loš utisak. Upravo zbog toga, našim korisnicima preporučujemo da osim standardne optimizacije svojih stranica pripaze i na slike koje koriste na sajtu.

Koja je razlika između baseline i progressive JPEG formata?

JPEG slike se generalno učitavaju od gore prema dole, format koji je poznat pod nazivom baseline JPEG.

Progressive JPEG, za razliku od baseline varijante, omogućava prikaz slike u celini, tako da učitava podatke postepeno. To u praksi znači da će se slika korisniku prikazati odmah, ali će biti mutna i pikselizovana u početku, pa se postepeno učitati u potpunosti.

Kako progressive JPEG pomaže u optimizaciji sajta?

Kod sporijeg učitavanja baseline slika, prostor gde se slika nalazi je do završetka učitavanja prazan, što korisniku automatski daje utisak da je stranica spora. Progressive JPEG pruža bolje vizualno iskustvo za korisnike, tačnije, iako je brzina učitavanja možda ista, korisnik ima osećaj da se stranica brže učitala.

Progressive JPEG slike su takođe nešto manje, što znači da će se koristiti manje bandwidtha i manje prostora na serveru, što je veoma korisno za shared hosting korisnike.

Iako velika većina modernih pretraživača podržava progressive JPEG, treba imati na umu da ga neki ne podržavaju (na primer, gle čuda – IE8). Ukoliko ga pretraživač ne podržava, slike će se prikazati korisnicima, ali tek kada se cela datoteka učita.

Optimizacija slika za web pomoću progressive JPEG-a

Idealno bi bilo da sve veće slike na stranici zamenite njihovom progressive varijantom. Većina alata za obradu slika, poput Photoshopa ili Gimpa, omogućava lako prebacivanje slike u progressive model.

Photoshop je nedavno zakomplikovao stvari, tako što je od 2015 uklonio opciju čuvanja slika kao progressive JPEG, ali to je i dalje moguće pomoću “Save for web” opcije.Da bi sačuvali slike u novijim verzijama Photoshopa potrebno je kliknuti na File -> Export -> Save for Web (legacy), zatim odabrati “Progressive” opciju.

Osim navedenog, postoje i neke dodatne opcije koje su vam dostupne, poput Kraken.io alata (koji je dostupan i u obliku WordPress plugina), ili Optimizille, koje omogućavaju brzu i efikasnu konverziju slika u progressive model.

Kada je u pitanju optimizacija slika za web uzmite sve navedeno u obzir, poradite na fotografijama i slikama koje predstavljate svojim posetiocima, kako bi njihovo iskustvo bilo što prijatnije.