Sve o izmenama fotografija u Blogger-u (Blogspot)

Bloger je fantastična platforma za kreiranje web sadržaja. Na žalost, prosečan korisnik nije upoznat sa gomilom skrivenih funkcionalnosti koje su mu na dohvat ruke. Jedna od najmoćnih karakteristika je način na koji možete fleksibilno prilagoditi slike koje postavljate u svojim tekstovima. U ovom članku će biti opisani različiti načini optimizacije i efekti koje možete primenjivati na otpremljenim fotografijama.
Procesuiranje slika na Blogger platformi omogućava Google App Engine koji poseduje moćne  alatke za obradu fotografija. Ukoliko ste upoznati sa nekim od ovih opcija, Vaš blog možete mnogo lepše  predstaviti svojim čitaocima.

Tehnike obrade slike koje će ovde biti pokazane možete da isprobavate i testirate na još neobjavljenim postovima.

Generički URL fotografije u Blogger-u

Pre nego što počnemo objašnjavanje funkcionisanja određenih parametara za rad sa slikama, upoznajmo se sa našim osnovnim alatom. Sve promene koje budemo ovde pokazali će se raditi pomoću izmena URL-a fotografije. Iz tog razloga, potrebno je da se upoznamo sa generičkom strukturom URL-a otpremljene slike, koja se prikazuje na Blogger platformi.
Evo kako taj deo izgleda (za gornju sliku u ovom tekstu):
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s640/girl.jpg
U ovom delu sam crveno označio oznaku s640 i to je mesto na kome se dešava sva magija.
Kada u HTML uređivaču postova tražite ovu vrednost, gledajte u img oznaku. Vrednost unutar URL-a u src atributu, u Vašem slučaju, može biti veća, manja ili čak i da je ne bude! Važno je napomenuti da se radi o delu URL-a koji se dodaje neposredno pre imena otpremljene fotografije (u mom slučaju girl.jpg).
Da bi smo prilagodili sliku, potrebno je samo da menjamo taj deo URL-a! Dakle, naš zadatak nije komplikovan.

Promjena veličine i opsecanje slike

Ukoliko u gornjem primeru s640 promenimo u:

• s0 - originalne dimenzije fotografije. Ukoliko je u tekstu potrebno prikazati otpremljenu sliku u njnim originalnim dimenzijama potrebno je dodati nulu s parametru. Ovu opciju treba pažljivo koristiti jer, ukoliko je slika prevelika, može doći do neželjenih rezultata Na primer,  slika može da preklopi neki element ili čak i da neki njen deo bude izvan vidnog polja na blogu.
• sXXX - dimenzija slike će da bude XXX piksela. Na primer, ukoliko napišemo s350 dobićemo sliku sa dimenzijom od 350 piksela.
• wXXX - slika sa naznačenom širinom u pikselima. Ovaj parametar koristimo da bi smo dobili fotografiju koja je fiksne širine XXX piksela. Na primer, ukoliko napišemo w600, dobijamo sliku širine 600 piksela.
• hXXX - prilagođavamo visinu fotografije u pikselima. Ovaj parametar koristimo ukoliko želimo da dobijemo sliku fiksne visine (XXX u pikselima). Na primer, h450 prikazuje fotografiju čija je visina 450 piksela.

Ukoliko želimo da imamo sliku određene širine i visine, ona će zadržati svoj aspekt ratio (originalan odnos širine naspram dužine). U tom slučaju, parametar visine (h) ima prednost nad parametrom širine. Na primer, ako želimo gornju sliku da prikažemo 500 px široku i 150 visoku, to će da izgleda ovako:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/w500-h150/girl.jpg
Što daje rezultat:

Obratite pažnju da kada želimo da koristimo više parametara za podešavanje slike, te parametre spajamo pomoću crtice!

• wXXX-hXXX-c -opsecanje slike (uopšteno, oznaka c) na određene dimenzije. zajedno sa parametrima širine i visine. Na primer, w600-h250-c će prikazati samo gornji levi deo slike do širine od 600 px i visine 250.
• wXXX-hXXX-n -opsecanje slike iz centra. Ovo je parametar koji je sličan prethodnom (c) sa jednom razlikom: umesto da se fotografija opseca sa vrha, ovde se prikazuje njen centralni deo.
• wXXX-hXXX-p -pametno kvadratno opsecanje. Ovaj parametar će pronaći najvažniji deo slike, a zatim ga i izrezati počevši od njenog centra. Odnos širine i visine se neće sačuvati. Primenjujući na gornju sliku: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/w500-h150-p/girl.jpg , čime dobijamo:
  
• wXXX-hXXX-pa - pametno opsecanje uz zadržavanje odnosa širine i dužine originalne fotografije. Razlika u odnosu na prethodni je u tome što se zadržava originalni aspekt ratio, pri čemu će parametar visine (h) da ima prednost.
• wXXX-hXXX-pf -ovo je pametno opsecanje sa prepoznavanjem lica. Ova opcija, kao i prethodne pokušava da pametno opseče fotografiju uz pomoć prepoznavanja lica. Odnos širine i dužine neće biti sačuvan i opsecanje se vrši od centra. Primer je: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/w250-h50-pf/girl.jpg. 
• wXXX-cc -opsecanje slike u vidu kružnice. Ako želite da se u tekstu pojavljuje kružna slika (na primer, avatar korisnika) koristićete ovaj parametar. Ako su zajedno navedeni parametar za širinu i visinu, visina će imati prednost (postaće prečnik kružnice). Važno je napomenuti da će isečen deo slike (površina izvan kruga) biti providan. Ako na našoj slici promenimo ove parametre u w500-h150-cc, dobijamo:
  
• wXXX-ci -opsecanje slike u vidu kvadrata. Ovaj parametar (na primer w700-h150-ci) će nam dati deo fotografije u vidu kvadrata gde je njegova širina najmanja dimenzija od zadatih parametara širine ili visine.
• wXXX-nu -ovaj parametar sprečava promenu veličine (skaliranje) slike iznad njenih originalnih dimenzija. Kada se slika prikazuje veća nego što su njene originalne dimenzije, dolazi do ružne pojave u kojoj se vide pikseli. Da se to ne bi dešavalo, možemo koristiti ovaj parametar i time se obezbediti da se ne može prikazati slika veća od svoje originalne dimenzije. Na primer, ako je širina otpremljene slike 700 piksela, Blogger će pokušati da je prikaže u većoj širini (w1600). Ako to izmenimo u w1600-nu, slika neće biti prikazana uvećana.

Ovo su samo neki od korisnih parametara za promenu veličine i opsecanje slika. Da bi ste ih bolje upoznali, testirajte ih u nekom od svojih neobjavljenih tekstova.

Parametri za efekte, filtrere i izmene fotografija u Blogger-u

Prethodno smo objasnili osnovne parametre za podešavanje fotografija, a sada je vreme da pređemo na napredne tehnike sa kojima možemo uređivati ili poboljšavati otpremljene slike. Neke od narednih opcija se veoma retko koriste, a neke ćete upotrebljavati svakodnevno.

Okretanje slike (flip)

Vertikalno okretanje slike

Da biste vertikalno obrnuli sliku, koristite parametar fv. Na primer, s650-fv će vertikalno okrenuti fotografiju veličine 650 piksela. Ako to primenimo na sliku iz ovog teksta, imamo:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s650-fv/girl.jpg
Čime dobijamo:

Vodoravno okretanje slike

Da bi smo sliku okrenuli po horizontali (vodoravno) koristimo -fh parametar.
Ako to primenimo na našu fotografiju:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s300-fh/girl.jpg

Čime dobijamo:

Rotiranje fotografije

Ako želimo da rotiramo sliku, koristimo -r parametar. Za njega treba da se prosledi i ugao. Dostupna su tri ugla rotacije: 90, 180 i 270 stepeni. Primetite da je s0-r180 vertikalno okretanje fotografije.
U našem primeru:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s350-r90/girl.jpg
daje:

Prikazivanje slika u različitim formatima

Blogger nam nudi mogućnost da mi prikažemo naše fotografije u različitom formatu od onoga u kojem su napravljene i otpremljene. Drugim rečima, mi možemo samo jednim parametrom da ih konvertujemo!
Pogledajmo kako.

Konvertovanje slike u JPG format

Parametar -rj nam služi da bi smo dobili sliku u JPG formatu. Na primer, ako smo otpremili PNG sliku, pomoću parametra s600-rj će se na blogu prikazivati ista takva slika, ali u JPG formatu.
Na primer:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhma6ZV5_VItgLg-_FzMmiDAcPcfLlrBLp55ceIuZOrh-3Kz-oztkGB-ipkwb_Jb_tA8CyyLTxwh7f7NEQZErNTAQi27RQ2BUAtU7CuFE1pvPiHSNyreqleKidfLp7HoL2moLcrg4StOUEu/s320-rj/Nema%2Bgrida.PNG
Dobijamo:

Konvertovanje fotografije u PNG format

Da biste prikazali sliku u PNG formatu, koristite -rp parametar. Na primer:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s350-rp/girl.jpg
Dobijamo:

Konvertovanje fotografije u WebP format

Ukoliko ste koristili makar jedan alat koji analizira brzinu Vašeg sajta, sigurno ste primetili preporuku da slike prikazujete u Google-ovom WebP formatu koji je optimizovan za prikaz slika na internetu. U Bloggeru, svaku fotografiju možete prikazati u ovom formatu pomoću -rw parametra. Na primer:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s350-rw/girl.jpg
Dobijamo:

Konvertovanje fotografija u GIF format

Da bi smo sliku prikazali u GIF formatu, koristimo -rg parametar. Na primer:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s350-rg/girl.jpg
Dobijamo:

Primena opcija JPEG formata

Možda niste znali ali JPEG format se može podeliti u 3 vrste: standardni JPEG, optimizirani JPEG i progresivni. Konvertovanje u neku od ovih tipova možemo uraditi preko -v parametra kojem su dodati brojevi 0, 1, 2 ili 3.

Na primer, s300-v0 ili s300-v1. Ukoliko povećavamo broj na 2 ili 3, kvalitet prikazane fotografije će biti jako loš, pa ih zato ne treba koristiti. Uostalom, uverite se sami:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s600-v3/girl.jpg
Rezultat:

Kompresovanje JPEG slike

Ako nam je stalo do brzine bloga, nije preporučljivo ubacivanje ogromnih slika u tekstove. Ali, ukoliko koristimo kompresiju fotografija, mi možemo smanjiti njihovu veličinu (misli se na memoriju koju zauzimaju) što nam smanjuje ukupnu veličinu web stranice.
U Blogger-u je dostupan -l parametar za kompresiju fotografije koji će smanjiti veličinu datoteke slike ali će istovremeno i da negativno utiče na kvalitet slike. Primer je s0-rj-l85 koji će kompresovati sliku za 15%.

Napravite MP4 video iz animirane GIF sličice

Ako želimo da konvertujemo animirani GIF u MP4 video format, koristićemo -rh parametar. Evo primera.

<video width="160" controls>

<source src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRMMN5_OxJRR22-r8IFhCWzOA46GpAPViDz-fIBx3Cr80xXaUy3Gv7dCcUaLPFmumNGjXtyrzU-oGM9tPxaTWTXEs2eIJKo5t2mzv9RLfpdLbhuNfAeXZjXtY9DCTFXZKnreDxN3AGmn92/s160-rh/Buba.gif" type="video/mp4">

</video>
Što nam daje:

Širina dobijenog snimka se može promeniti prema našim željama. Obratite pažnju da smo u ovom primeru koristili HTML5 oznake <video> umesto uobičajenog <img> taga.

Izvlačenje sličice iz GIF animacije

Ako ne želite da prikazujete animaciju, možete jednostavno od GIF slike kreirati njenu statičnu verziju. Za to nam služi -k parametar. Na primer, s100-k stvara statički oblik GIF animacije.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRMMN5_OxJRR22-r8IFhCWzOA46GpAPViDz-fIBx3Cr80xXaUy3Gv7dCcUaLPFmumNGjXtyrzU-oGM9tPxaTWTXEs2eIJKo5t2mzv9RLfpdLbhuNfAeXZjXtY9DCTFXZKnreDxN3AGmn92/s160-k/Buba.gif
Daje:

Efekti na fotografijama u Blogger-u

Pokazaću Vam još par zgodnih opcija kojima možete ulepšati fotografije na Blogger-u.

Podešavanje okvira i rama slike

Navikli smo da za podešavanje okvira oko slike koristimo određena CSS stilizovanja. U Bloggeru to možemo postići bez otkucane jedne linije CSS kôda.

Da bi smo uspeli da dobijemo prilagođenu ivicu i okvir, često kombinujemo dva parametra.
Prvi parametar -b će našoj slici dodati ivicu debljine određenog broja piksela.

Drugi parametar -c se koristi za naznačavanje željene boje ivice. Boja mora biti izražena u heksadecimalnom formatu.
Ukoliko našu sliku iskodiramo sa s350-b15-c0xfff5ee parametrom, dobićemo sliku čija je debljina okvira 15 piksela, a boja okvira je seashell 1 (#fff5ee). Uverite se u to:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s350-b15-c0xfff5ee/girl.jpg
Dobijamo:

Keširanje slika u Blogger-u

Keširanje resursa je jedna od najvažnih karakteristika koja služi za pružanje brzog učitavanja sajta na strani njegovih čitataoca (tj na strani web pregledača). Da bi se određeni resursi keširali, potrebno je navesti vreme za koje web pregledač u svojoj privremenoj memoriji treba da ih čuva.

Za slike u Blogger-u možete da koristite -e parametar. Na primer, s100-e7 će keširati tu sliku na  korisnikovom računaru u narednih nedelju (7) dana.

Zamućenje slika

Na internetu ne bi trebali da koristimo zamućene slike jer to odbija posetioce sajtova. U nekim određenim slučajevima će nam možda to i trebati. U Blogger-u postoji i parametar za zamućivanje (zamagljivanje) slika.

fSoften parametar ima 3 broja koji definišu efekt zamagljivanja. Ako na našu sliku primenimo fSoften=1,7,0:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s350-b15-c0xfff5ee-fSoften=1,7,0/girl.jpg
Dobijamo:

U ovom primeru se broj u sredini može menjati od 0 do 100 kako bi ste podesili intenzitet efekta zamućenja.
Obratite pažnju da se ovaj efekat zamućenja ne treba primenjivati na slike sa osetljivim sadržajem! Često se na slikama može naći neko lice ili neki sadržaj koji ne želimo prikazati. Takve fotografije se najčešće zamagljuju kako ne bi uznemirili čitaoce ili nekome naneli štetu. U našem slučaju smo mi dodali efekat na fotografiju, ali samu fotografiju nismo izmenili i ona je vidljiva u svom originalnom obliku!

Dodajte gradaciju boja i senke okvira na sliku

U Blogger-u mi mo\emo bey CSS da slikama dodajemo efekat gradacije boje u kombinaciji sa prilagođenom bojom njene senke.

To postižemo pomoću opcije fVignette. U našem primeru možemo da dodamo nešto tipa fVignette=2,90,1.9,0,fff5ee  da bi smo dodali gradijent i senku:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxvZi7CbyoOnW25oitbaFRti6I9rPQaHMxdTUssViITK2mAMpW00-EGE70BwbKXa34lyFcG3mZWu2_zK1f9JhaSatg3DR88KmgqJ7pEGJRmac8WHl6WYQtBur63Od0A3f5Aw2xt_8bsax/s350-fVignette=1,90,1.9,0,fff5ee/girl.jpg
Dobijamo:

Decimalni broj (treći parametar) se koristi za podešavanje površine pokrivanja gradijentom, a heksadecimalni kod boje (poslednji parametar) se koristi za specifikaciju boje senke.

Zaključak

Danas ste naučili nove "trikove" za rad sa fotografijama u Blogger-u. Bio bih srećan kada bi ste i to svoje znanje iskoristili kako bi prikazivali bolje slike svojim čitaocima.