Optimizacija sajta [05] Slike za sajt

Optimizacija sajta [05] Slike za sajt

Updated: 21/09/2019.

U nizu članaka o optimizaciji sajta, ovaj se bavi optimizacijom slika na sajtu. Prvo će biti objašnjeno šta je to, zatim koji je značaj, a na kraju kako se to može tehnički izvesti. Krenimo redom…

Sadržaj:
1. Šta je to optimizacija slika?
2. Značaj optimizacije slika
3. Optimizovanje slika
…3.1. Vrste kompresije slika – formati za snimanje slika
…3.2. Koju kompresiju (format slike) koristiti i kada?
…3.3. Veličina slike – “ukrajanje” i “promena veličine”
…3.4. Kako tehnički izvesti optimizaciju slika


1. Šta je to optimizacija slika?

Najsličniji primer je odeća/obuća. Ako je premala, biće neudobna, žuljati. Ako je prevelika, neće biti lako trčati/kretati se u njoj. Poželjno je da bude “taman”, tj. optimalne veličine.

Slično je i sa slikama. Ako napravite slike da budu premale, ili previše kompresovane (o tome kasnije), biće teško videti sve što treba da se vidi na njima. Ako se naprave da budu prevelike, usporavaće učitavanje stranica sajta, a (u zavisnosti od toga kako se prikazuju) mogu i zauzimati previše prostora na ekranu, čineći celu stranicu manje preglednom.

1.1. Veličina slike

Veličinu slike čine:

  • Broj tačaka (piksela) horizontalno i vertikalno, obično izraženo u formatu ” A x B” (1024×768, 60×80, 25×25 itd.).
  • Broj boja – koliko različitih boja i njihovih nijansi slika prikazuje.

Bez većeg ulaženja u detalje o bitovima, bajtovima i kompresiji: manja slika veličine 100×100 piksela, ima ukupno 10.000 piksela. Ako je ta slika crno-bela, potrebno je čuvati podatke o ukupno dve boje za svaki piksel (2 x 10.000). Ako ta slika ima više nijansi sive, ne samo crnu i belu boju, onda je reč o recimo 256 x 10.000 “podataka” o pikselima. Slika u punom koloru, sa preko milion boja – jasno je kuda ovo ide?

Naravno, posoje formati za čuvanje slika koji vrše visok nivo kompresije, pa fajlovi ne budu baš ogromni. O tome će biti reči u poglavlju o izvedbi optimizacije slika. Za sad je samo važno da se shvati zbog čega je važna veličina slike. Tj. da se ne čuva slika većeg formata nego što je potrebno.

Dakle, optimizacija slika nije ništa drugo do formatiranje slika da budu tačno onakve veličine kakva je potrebna, uz izbor odgovarajuće kompresije. Ovo je još bolje objašnjeno u narednom poglavlju, o značaju optimizacije slika.


2. Značaj optimizacije slika

Slike su vrsta fajla koji server teško može da kompresuje “u hodu”. Tj. ne možete postaviti veliku sliku, linkovati na nju, pa očekivati da je server kompresovanu i smanjenu šalje posetiocima. Ne, posetioci će morati da skinu celu, veliku sliku, pa da je eventualno (ako je stranica tako formatirana), njihov pregledač prikaže u umanjenom formatu. Na ovaj način se gubi više vremena za skidanje slike, a i pregledač posetioca sajta se nepotrebno opterećuje (ako je slabiji računar, može biti problematično – pogotovo ako ima previše velikih slika).

Na primer ikonica za prijavljivajne/odjavljivanje na nekim sajtovima: one su prikazane u određenoj veličini, reicmo 25 x 25 piksela. Mogle bi biti snimljene u formatu 250×250, pa definisane na samoj stranici da se prikažu u umanjenoj veličini (kako ne bi zauzele celu desnu vertikalnu kolonu za navigaciju), ali time bi se nepotrebno dobila oko 100 puta veća veličina fajlova koje treba skinuti, pa onda još opteretio pregledač posetioca njihovim smanjivanjem i prikazom u “instruisanoj” veličini od 25×25 piksela.

Isto važi za paletu boja. Te ikonice se mogu snimiti u 8-bitnoj paleti (256 boja), jer nema potrebe koristiti pun kolor za praktično dvobojnu sliku.

Suprotan primer je slika pozadine. Ona je većeg formata, kako bi prekrila ceo ekran. Da je snimljena u manjem formatu (sa manje piksela), morala bi biti razvučena i prikaz bi bio ružniji – videli bi se “kvadratići”, kao kad se slika previše zumira, pa izgleda ružno. Primer kako izgleda previše uvećana slika niže rezolucije je ispod (razvučeno sa 25×25 na 80×80 piksela):

log in
Log in “razvučen”

Ovo je “originalna” veličina, bez razvlačenja, ili smanjivanja:

log in
Log in u izvornoj veličini

Ukratko – slike veće nego što treba usporavaju učitavanje stranica, dok slike manje nego što treba izgledaju ružno (ako se “razvuku”), ili premalo na stranici.

Alat za testiranje brzine učitavanja stranica, GTmetrix, daje ovakvo upozorenje kada naiđe na stranicu sa neoptimizovanim slikama:

GTmetrix warns about not optimized images and gives an estimate of savings that would be made with image optimization
GTmetrix upozorava da slike nisu optimizovane (i piše koliko bi se dobilo na uštedi da se optimizuju)
Slika 1

Ovako to izgleda nakon optimizacije:

GTmetrix report after the images were optimized – no more warnings
GTmetrix ocene nakon optimizacije slika – nema više nikakvih upozorenja
Slika 2

Kako ovo postići? To je objašnjeno u narednom poglavlju, relativno je prosto.


3. Optimizovanje slika

Prvo će biti objašnjene različiti formati za čuvanje slika i vrste kompresije, zatim koji alati su pogodni za to, a na kraju kako optimizovati slike.

3.1. Vrste kompresije slika – formati za snimanje slika

Postoje dva osnovna načina kompresije slika: bez gubitaka i sa gubitkom i puno različitih formata za snimanje slika korištenjem bilo jednog, ili drugog načina kompresije. Kratko, uprošteno i “grubo objašnjenje” (ne 100% precizno, više u smislu da se razume princip rada):

  • Kompresija bez gubitaka obično koristi podatke o geometrijskim oblicima na slici, kako se ne bi snimao podatak o svakom pojedinačnom pikselu. Takođe, može praviti indeks korištenih boja na slici, kako bi sa manje podataka o boji, za svaki piksel samo davala vrednost iz indeksa. Suština je da kompresija bez gubitaka ostavlja potpuno identičnu sliku. Najčešće korišteni format za kompresiju bez gubitaka je .png (eng. Portable Network Graphics). Kada snimite sliku u .png, ona je po izgledu potpuno identična originalnoj sici (u kojem god formatu da je bila snimljena). Detaljnije objašnjenje .png algoritma za kompresiju (na engleskom). Drugi popularan format koji daje nešto slabiju kompresiju od .png-a, ali omogućava pravljenje animiranih slika je .gif.
  • Kompresija sa gubicima koristi drugačiji pristup – traži delove slike koji su dovoljno slični, pa se mogu zameniti većom porvršinom iste boje, sa jednom definisanom bojom i nijansom za celu površinu. Ovo je, naravno, aproksimacija, tako da se fini detalji gube. Ipak, zbog ograničenosti ljudskog oka da primećuje detalje (pogotovo različite nijanse boje), rezultat je fajl puno manje veličine, uz neprimetno narušen kvalitet slike. Najpoznatiji format za kompresiju sa gubicima je .jpg, ili .jpeg (eng. Joint Photographic Experts Group). Detaljno objašnjenje .jpg kompresije (na engleskom).

Postoji još puno različitih formata slika, ali za korištenje na web-sajtovima, gore navedeni su najpogodniji (99% računara ih može “videti” i pružaju pristojnu kompresiju svaki spram svoje namene).

Kompresija bez gubitaka ima ograničen nivo kompresije koji se može postići. Kompresija sa gubicima omogućava da se bira nivo kompresije – što je veći nivo kompresije, to je fajl manji, ali se slika više deformiše i posle određene granice, gubitak kvaliteta je vidljiv i slika počinje da izgleda “ružno”. Primer je prikazan na slici 3:

  • 3a: jpeg sa minimalnom kompresijom (“100% quality”). Veličina fajla 83 KB.
  • 3b: jpeg sa umerenom kompresijom (“60% quality”). Veličina fajla 19 KB.
  • 3c: jpeg sa visokom kompresijom (“20% quality”). Veličina fajla 13 KB.

Na slici 3 se vidi kako posle određene granice veličina fajla ne opada ni približno u tolikoj meri u kojoj opada kvalitet slike. Takođe, vidi se da postoji granica kompresije posle koje je kvalitet slike neprihvatljivo loš.

Pronalaženje ove granice zavisi od vrste slike i željenog nivoa kvaliteta. Neke slike drastičnije gube na kvalitetu i pri nižem stepenu kompresije – zavisi koliko slika ima detalja i kakva je vrsta slike. Ovo traži i malo eksperimentisanja. Za većinu .jpg slika na ovom sajtu, prihvatljiv nivo kompresije je na “85% kvaliteta”. Ali možete pronaći šta je za Vas optimalno, za svaku vrstu slike.

3.2. Koju kompresiju (format slike) koristiti i kada?

Svaki od načina kompresije i formata slike ima svojih prednosti i mana. Bez ulaženja u detalje, kratko “uputstvo” za upotrebu:

  • Ako se slika sastoji iz manje-više pravilnih geometrijskih oblika i nema puno različitih nijansi (kao BikeGremlin logo u gornjem levom uglu ove strane, ili dugmići za prijavu i odjavu), koristiti .png. Veličina fajla za opisani tip slika često ispadne manja nego uz upotrebu .jpg kompresije (sa gubicima). Ovaj format omogućava i postavljanje providne pozadine slike, što je nekada potrebno.
  • Slike koje imaju puno nijansi, nepravilne oblike i slično (slika čoveka, pejzaž i slično), koristiti .jpg. Po mom mišljenju, nivo kvaliteta od “85%” daje neprimetne gubitke kvaliteta, uz osetno smanjenje veličine fajla (na oko 1/3 originalne veličine).
  • Za animacije – tj. niz sličica koje se menjaju – .gif format.

U krajnjem slučaju, probati snimanje slike u jednom i drugom formatu i videti kada se dobija bolji rezultat. Vremenom ovo postaje lako i intuitivno – znaćete unapred koji format je najbolji.

3.3. Veličina slike – “ukrajanje” i “promena veličine”

Pod ovime se ne misli na veličinu fajla, nego baš na veličinu slike – koliko piksela ima po širini i visini. Pre primene bilo kakve kompresije, sliku treba svesti na željenu (potrebnu, optimalnu) veličinu. Pri tome postoje dve odvojene funkcije: ukrajanje (eng. crop) i promena veličine (eng. resize).

Ovo je najbolje objasniti primerom:

Hoću da ubacim sliku Shimano Biopace pogona na sajt. Idealno bi bilo da uslikam taj pogon, pa da joj promenim veličinu na željenu i kompresujem je. Ipak, ako imam samo sliku celog bicikla sa Biopace pogonom, morao bih prvo “iseći” sliku tako da ostane samo deo koji prikazuje pogon, pa onda tako isečenu sliku postaviti na željenu veličinu, sa željenim nivoom kompresije.

A bicycle with Shimano Biopace cranks. Here, the image is resized to 750×563, so it can fit the page, but the original size was about 4000×3000 pixels, and that was the starting point.
Ceo bicikl sa Shimano Biopace pogonom. Ovde je slika preuveličana za demonstraciju (na 750×563), ali original je veličine 4000×3000 piksela
Slika 4

Zamislite sliku iznad u 4000×3000 piksela veličini i da još nije ubačena (prikazana) na sajt. Ako želim prikazati ceo bicikl, potrebno je samo promeniti veličinu i izabrati željeni stepen kompresije. Pošto je za željeni primer potrebno prikazati Biopace Pogon, a slike istog baš nema pri ruci, ostaje sečenje.

Needed image part cropped.
Isečen željeni deo slike .
Slika 5

Slika 5 zauzima manje mesta na ekranu od slike 4, a prikazuje ono što je potrebno uvećano u odnosu na sliku 4. Ovo je postignuto isecanjem željenog dela, pa onda promenom njegove veličine na 433×253 piksela. Napomena – da nije smanjena veličina slike nakon isecanja, ova slika bi bila širine preko 1000 piksela i visine preko 500, zauzimajući ogroman prostor na ekranu. Dodatna prednost je naravno i puno manji fajl – kada se ne čuva slika većeg formata nego što je potrebno.

Radi boljeg kvaliteta, idealno je slikati ono što se želi prikazati, tako da bude potrebno minimalno isecanja.

3.4. Kako tehnički izvesti optimizaciju slika

Prva stvar, koja važi za WordPress i nema direktno veze sa optimizacijom slika. Vezana je za činjenicu da WordPress pri uploadu slike pravi nekoliko različitih formata i sve ih (nepotrebno) čuva na serveru. Na slici 6 je prikazano kako podesiti da se to ne dešava, ili da broj dodatnih slika bude minimalan (formati koje korištena WordPress tema pravi su neizbežni, bez malo više muke).

Set all the values as shown in the picture.
Postaviti sve vrednosti kao na slici.
Slika 6

Na temama koje koristim, WordPress obično pravi jednu dodatnu verziju slike ako je uploadovana šira od 768 piksela.

Onda uzeti program za obradu slika. Dobar besplatan koji koristim je paint.net. Otvoriti sliku koja se želi obraditi u programu. Postoji i odličan besplatni online alat koji često koristim, pod imenom Squoosh.

Izaberite alat za četvrtastu, ili elipsastu selekciju i označite deo slike koji treba iseći.

Choosing a rectangle select tool and marking the area to be cropped to.
Izbor četvrtaste alatke za selekciju i obeležavanje dela slike koji se želi iseći.
Slika 7

Zatim u glavnom meniju izaberite “Crop to Selection”. Ostaće vam slika koje se sastoji samo iz prethodno obeleženog dela.

Option for cropping to the selected image size.
Opcija za isecanje željenog dela slike
Slika 8

Opcija za promenu veličine, nakon isecanja, nalazi se odmah ispod “Crop to Selection” opcije, u istom meniju (slika 8). Kliknite na nju i unesite željenu veličinu slike.

Image resizing.
Promena veličina
Slika 9

Ako je čekirana opcija “Maintain aspect ratio”, dovoljno je promeniti samo širinu (“Width” ), ili samo visinu (“Height” ), druga veličina će se automatski proporcionalno promeniti.

Sada ostaje još snimanje u željenom formatu i izbor nivoa kompresije (File -> Save As… iz glavnog menija). Pri izboru imena fajla, gledajte da ime bude takvo da Vama (a i Googlu) bude jasno šta se na slici nalazi na osnovu imena – biće svima lakše kasnije.

Choosing the image saving format.
Izbor željenog formata za snimanje slike.
Slika 10

U zavisnosti od izabranog formata, opcije se razlikuju. Za jpg je potrebno izabrati nivo kvaliteta (što je veći kvalitet, to je veći i fajl).

Choosing options when saving to .jpg format. Picture 11
Biranje opcija pri snimanju u .jpg format.
Slika 11

Kod izbora .png formata, ponuđeno je više opcija (slika 12).

Options when saving to .png format. Picture 12
Opcije pri snimanju u .png format.
Slika 12
  • Bit Depth – kolika paleta boja da se koristi. Png ima najviše smisla kod slika sa manje boja, tako da ako je potrebno više od 8 bita, bolje je snimiti sliku u .jpg formatu, generalno.
  • Dithering level – ostavite na podrazumevanom 7. Pomeranje slajdera levo-desno prikazuje promene u “preview” ekranu desno, tako da se može izabrati i opcija koja Vama izgleda najlepše.
  • Transparency threshold – na kom pragu da se piksel smatra i snimi kao providan. Podrazumevana vrednost 128 je uglavnom OK, ali može se eksperimentisati sa slajderom i videti na ekranu desno kakav rezultat se dobija.

To je to o optimizaciji slika, verujem da je dovoljno da biste znali šta i kako uraditi. Sva pitanja, dopune i kritike možete ostaviti u komentarima.

Ostali članci iz serije:

Share...

Komentiraj

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.