Kako optimizovati i kompresovati slike na web sajtu


Kako optimizovati i kompresovati slike na sajtu
Hvala :)

Optimizacija slika na sajtu je važan deo izrade jednog sajta, jer što je veličina slika manja to će rezultirati bržim učitavanjem vašeg sajta prilikom poseta. Saznajte kako da bez muke optimizujete slike na vašem sajtu sa dostupnim alatima na internetu.


U ovom članku nećemo opisivati razlike između formata slika koje su najčešće u upotrebi na internetu i sajtovima već ćemo to ostaviti za članak koji će uslediti. Već samo kako da optimizujete veličinu slika koje koristitite na sajtovima.

Najčešće korišćeni formati slika i dalje su u trenutku pisanja ovog članka png i jpeg formati i pored toga što imaju različite prednosti i mane jedna stvar je i dalje bitna a to je njihova veličina kada ih objavljujemo na našim sajtovima.

Kada se podvuče crta slike možete optimizovati na dva načina i to bez gubitka kvaliteta (lossless) i sa kompresovanjem i umanjenjem kvaliteta same slike. Dva alata koja su dostupna na internetu je vredno pomenuti i oni pokrivaju oba načina za kompresovanje u zavisnosti od cilja koji želite da postignete.

TinyJPG

TinyJPG optimizovanje i kompresovanje slika na internetu

Ovaj alat vam omogućava da izvršite kompresiju vaših jpg,jpeg2000 i png slika bez gubitka kvaliteta. TinyJPG možete koristiti kao besplatan servis i kao plaćeni servis za kompresovanje slika na internetu. Ukoliko ćete besplatno koristiti njihovu uslugu kompresovanja imate ograničenje da ne možete da kompresujete više od 20 slika odjednom i sama slika pojedinačno ne sme preći 5mb veličine. Ovo ograničenje nije uopšte strašno kada se razmisli.

Dobra stvar kod TinyJPG servisa je da u plaćenoj varijanti nude API pristup i ukoliko želite ili posedujete potrebno znanje možete integrisati njihov servis kompresovanja slika u vaš sajt ili aplikaciju.

Iako TinyJPG nudi kompresiju slika bez gubitka njihovog kvaliteta iznenadićete se rezultatima kompresije. Uzmimo na primer sliku koju smo zarad testa kompresovali. Originalna veličina slike je bila 351.7KB i TinyJPG je uspeo da je kompresuje na 93.6KB ! Prilično impresivno pogotovo ako uzmemo u obzir da nismo izgubli na kvalitetu.

Rezultati kompresovanja slike sa TinyJPG servisom

Ukoliko želite da na svom sajtu prikazujete slike bez kompromisa oko njihovog kvaliteta ovaj servis je savršen za vas.

Squoosh

Google Squoosh Kompresovanje slika na internetu

Ali hajde da sagledamo stvari iz druge perspektive na našim sajtovima osim slika koje imaju značaj u pogledu samog sadržaja koji je bitan za posetioca mi koristimo i razne pozadine, ikone i slično. U tom slučaju moramo da posebno obratimo pažnju na veličinu ovih elemenata jer kao dizajneri sajtova umanjenje kvaliteta se može prikriti raznim css trikovima a pritom ćemo postići brže učitavanje same strane.

Uzmimo na primer pozadinu na našoj početnoj strani. Sama slika je veličine 1920x1080 piksela i sa jačom kompresijom (75%) slike smanjili smo njenu veličinu i postavjanjem jednostavnog css pravila (background-overlay) smo umanjili mane kompresije a postigli da umanjenje kvaliteta bude gotovo neprimetno.

Kod ovakvih situacija alat za kompresovanje slika Squoosh koji dolazi iz Google kuhinje korisnih alata stupa na snagu! Za razliku od TinyJPG servisa ovaj alat vam omogućava da podesite nivo kompresije same slike po vašoj želji i podržava više formata koje možete kompresovati i par ne toliko komplikovanih naprednih opcija.

Za primer u ovom članku smo iskoristili sliku našeg logoa veličine 1920x1080 piksela sa kompresijom od 75% i nismo želeli da menjamo ostala podešavanja koja su dostupna u alatu i rezultat je bio sa 107KB na 37KB ! Prilično impresivno zar ne?

Rezultat kompresovanja slike preko Google Squoosh servisa

Sa ova dva alata pokrićete obe situacije sa kojima ćete se susresti prilikom izrade i dodavanja sadržaja na vašem sajtu. U prvom kada kvalitet slike ne sme biti narušen a potrebno nam je da izvršimo njeno maksimalno umanjenje i u drugoj varijanti kada možemo dozvoliti određeni procenat umanjenja kvaliteta u korist umanjenja veličine slike.

Recite nam šta mislite u kometarima ispod i ako smatrate da treba dodati neki alat za optimizaciju slika koji je dostupan na internetu obavestite nas o tome.

Dule
ZipZap je napisao:
Tinyjpg je zakon. Ne gubim kvalitet kod kompresije. E sada ono što sam primetio kod njih je da ako istu sliku kompresujete iznova tj. par puta za redom, deo kvaliteta će se izgubiti. Mislim da je to neki bug.

U mom slučaju photoshop završava posao po pitanju kompresije. Za sada sve kako treba.

ZipZap
Tinyjpg je zakon. Ne gubim kvalitet kod kompresije. E sada ono što sam primetio kod njih je da ako istu sliku kompresujete iznova tj. par puta za redom, deo kvaliteta će se izgubiti. Mislim da je to neki bug.

Dodajte svoj komentar ili mišljenje.