Kompresovanje slika za brži web sajt uz jednostavnu i besplatnu aplikaciju
Kompresovanje slika je jedan od glavnih uzroka sporih sajtova. Slike koje se prethodno ne kompresuju i redimenzioniraju, a postave se na sajt, obično zauzimaju i 15 puta više nego što je zapravo potrebno. Pokazaću ti kako da kompresuješ slike u par koraka.
Tabela sadržaja
Krenimo od toga, šta je kompresija slika?
Kompresija slika je proces prilikom kojeg smanjujemo težinu slike sa što manjim smanjenjem kvaliteta slike. Jednostavno rečeno, zašto da imaš sliku koja ima 10 mb ako istu tu sliku sa istim kvalitetom možeš postaviti na sajt, a da ona zauzima 100kb? Zamisli, samo 100 puta manja težina slike 🙂
Kompresija slika je višestruko korisna za tvoj sajt. Na taj način ćeš olakšati sajt i ubrzati učitavanje web stranica, što će direktno uticati i na SEO, s obzirom da je brzina sajta bitna stavka i signal za optimizaciju sajta.
Matematika je jednostavna, napraviš stranicu na kojoj ima 5 slika, svaka slika zauzima po 10mb, to je 50mb po stranici samo od slika. Posle ovog članka uradiš kompresiju istih tih slika i one zauzimaju 5x100kb što je 500kb na toj stranici za slike.
Sve je tu super ali ajde da vidimo jel to zaista tako, idemo na super aplikaciju…
Squoosh.app aplikacija za kompresovanje slika
Squoosh.app je besplatna aplikacija za kompresovanje slika bez potrebe da se instalira na vaš računar jer se sve odvija direktno na samom sajtu. Tako da, ukoliko ne koristiš ili ako se ne snalaziš u Photoshopu, preko ove alatke možeš uraditi kompresiju slike za par sekundi i onda je postaviti na sajt.
Na squoosh.app aplikaciji možeš da uradiš sledeće:
- promeniš format slike
- promeniš dimenzije slike
- promeniš kvalitet slike
uživaš i ti i posetioci tvog sajta u bržem sajtu.
Ovako izgleda squoosh.app gde kompresujem slike, a u nastavku ću ti pokazati i preko snimka kako sve možeš da uradiš u 10 sekundi.
Nemoj postavljati bilbord na sajt...
Dimenzija samih slika je takođe veoma važna. Opet ćemo malo pametovati: Zašto postaviti sliku na sajt koja svojom veličinom može stati i na bilbord?
Ogromne slike će biti i dalje teške posle kompresovanja, zato je važno da se slike pravilno dimenzioniraju jer posetilac svakako neće videti sliku u dimenziji koju ti postaviš nego onoliko koliko mu uređaj koji koristi dozvoli.
Recimo logo na sajtu zauzima prostor od 150px x 50px, staviti logo koji je dimenzija 3000 x 1000px nema nikakvu svrhu, a pored toga će biti i daleko teži. Ako uzmemo u obzir da se pored toga još i nalazi na samom početku sajta i da će njega učitavati među prvim stvarima. Eto već usporavanja sajta na samom početku.
Balansiraj izmeđuti dimenzija i potrebnog kvaliteta slika!
Najbolji način da odrediš koja veličina slike je potrebna tvom sajtu jeste da pogledaš gde će ta slika stajati i koja je njena svrha. Ako je u pitanju slika koja će biti kao pozadina za sajt ili jedan deo sajta onda njena širina može biti 1920 piksela. Nije slučajno što je baš toliko pixela u pitanju, jednostavno najveći deo laptopova koristi upravo tu rezoluciju te na taj način uzimaš maksimalno, ali ne previše.
To je slučaj kada pričamo o desktop verziji, naravno za mobilnu verziju treba postaviti drugu sliku jer je nepotrebno da slika širine 1920px bude na mobilnom koji je širom 400 – 500px. Može naravno, ali je nepotrebno i biće sporije učitavanje sajta.
Ukoliko ćeš sliku postavljati za proizvod na internet prodavnici, onda se ta slika nalazi sa jedne strane ekrana ali ova slika se često i klikće kako bi se uveličano pregledala. Zato je super da ova slika bude 1080px x 1080px. Na taj način će slika biti dovoljno velika da se na njoj sve lepo vidi i kad se uveliča, a sa druge strane ne prevelika da dodatno opretećuje sajt.
Ako postavljamo ikonice na sajtu, u zavisnosti od mesta koje nam je potrebno, te ikonice je najbolje staviti u svg format i veličinu 50×50, 100×100 a nekad i manje. Ovo je priča o dimenzijama slika koje sam morao da se dotaknem, a o kojoj ćemo više pričati i posvetiti joj se do najsitnijih detalja u budućim člancima. Jer ovo predstavlja jedan od najčešćih problema na sajtovima, a u vezi je sa optimizacijom slika.
Smanji težinu slika u par koraka na Squoosh.app
Nema velike filozofije (više :D). Bacamo se na posao i u par koraka radimo kompresiju slike koja će imati isti kvalitet, a težina će da padne sa 1.41mb na 97kb.
- Ubacivanje slike na squoosh.app
- Odabir dimenzije slike
- Odabir formata slike (jpeg, png, webp, …)
- Određivanje kvaliteta nove slike
- Upoređivanje originalne i nove slike
GOTOV POSAO!
Magični nutricionista za slike…
Javi mi rezultate nakon kompresovanja slika preko ove super alatke i pošalji nove rezultate brzine učitavanja sajta. Uživaj 🙂
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
