Na modernim sajtovima slike su neizostavni deo. Kaže se da slika govori više od hiljadu reči, što je svakako važno za web dizajn. Davno je prošlo vreme jednostavnih sajtova.
Pre nego što objasnimo unos i postavljanje samih slika na naše HTML stranice, moramo se zadržati i pojasniti neke detalje. Svaka slika koju želimo da postavimo mora biti pripremljena za net. Nikako nije dobra praksa korišćenje fotografija direktno sa digitalnog aparata, niti preuzimanje sa neta i direktno prebacivanje na naše stranice.
Slika mora biti u odgovarajućem formatu
Postoje samo tri formata slika koje danas možemo koristiti na web stranicama. To su JPG, GIF i PNG.
JPG format (Joint Photographic Experts Group) koristi .jpg ili .jpeg ekstenziju. Ovaj format ne podržava providnost (engl. Transparency) niti animaciju, ali je odličan za komprimovanje fotografija jer podržava milione boja. U programima za obradu slika možemo izabrati koliku degradaciju kvaliteta ćemo tolerisati u zamenu za manju veličinu fajla. Svaki put prilikom snimanja gube se određene informacije, te je strogo preporučeno da čuvamo originale posebno.
GIF (Graphic Interchange Format) je ograničen na 256 boja. GIF-ovi su odlični za tehničke crteže i za male slike (ikonice, thumb sličice i sl.). GIF-ovi mogu da pamte 2,4,16… boja, pa se može dosta uštedeti na veličini prilikom kreiranja fajlova. GIF fajlovi se kompresuju horizontalno, tj. ukoliko na GIF slici piksel ima malu varijaciju boja u horizontalnom pravcu, mnogo lakše se transformiše u manju veličinu. GIF format podržava providnost (uz dosta ograničenja) i animaciju, što znači da možemo kreirati efekat kretanja i sl. U početnim fazama razvoja internetaGIF animacije su stalno korišćene, čak i kada nisu bile potrebne. Danas se sve manje koriste.
PNG (Portable Network Graphic) je noviji format podržan od strane svih aktuelnih web čitača, a kombinuje funkcionalnosti GIF-a i JPEG-a. Ovaj resterski format za slike koristi kompresiju bez gubitka. Koristi RGB i sistem boja u sivim tonovima. Postoje dva tipa formata:
- PNG-8, sadrži 8-bitnu informaciju o bojama (slično GIF-u).
- PNG-24, sadrži 24-bitnu informaciju o bojama (kombinuje najbolje od GIF i JPG).
PNG-8 ne podržava animaciju, ali podržava transparentnost i to mnogo bolje nego GIF, dok PNG-24 podržava još bolju transparentnost i kvalitet slike bolji nego JPG. Ipak, PNG fajlovi su dosta veći, a i raniji browseri se ne snalaze najbolje sa njim (npr. IE6 ne podržava transparentni PNG).
Kada bismo rezimirali sva tri tipa, možemo doći do ovog zaključka:
- JPG – najbolji za fotografije i slike sa puno detalja.
- GIF – najbolji za ikonice i male sličice.
- PNG – kombinuje najbolje od GIF i PNG, ali na uštrb veličine fajlova. Nije podržan od ranijih browsera, mada to polako postaje nebitno, jer se IE6 sve manje koristi.
Slika mora biti u odgovarajućoj rezoluciji i dimenzijama
Sav prikaz sajtova se vrši na monitorima računara i drugih digitalnih uređaja. Prikaz na monitorima je sačinjen od sitnih tačaka koji se nazivaju pikseli[1] (engl. pixels). Svaka slika je takođe sačinjena od piksela i termin rezolucijaoznačava broj piksela (tačaka) po inču (dots per inch – dpi). Standardna rezolucija u kojoj većina monitora prikazuje sajtove je 72dpii uvek treba snimati slike u toj rezoluciji.
Pored rezolucije, moramo posebno voditi računa i o dimenzijama, tj. o širini (engl. Width) i visini (engl. Height) slika. Dimenzije moraju biti iste one u kojima će se prikazati slika na stranici.
Ukoliko su dimenzije i/ili rezolucija drugačije u samoj slici od prikaza na stranici, doći će do degradacije slika i veoma lošeg prikaza. Zato je bitno zapamtiti da je potrebno slike uvek prvo pripremiti u Adobe Photoshopu ili sličnom alatu i tek onda importovati u HTML dokument.
Za svaku sliku moramo imati pravo da je upotrebimo
Iako ovo nije tehnički deo i ne spada direktno u tematiku ovog predavanje, ovo je veoma važan aspekt koji se često zanemaruje. Svaka slika podleže copyright[2] pravilima i uvek je neko autor. Obavezno proverite pod kojim uslovima i pod kojom licencom je neko delo objavljeno i da li imate pravo da ga iskoristite. Česta početnička greška je otvaranje Google images pretrage i direktno kopiranje slika, što je u većini slučajeva povreda nečijeg autorskog prava. Dakle, uvek proverite licencu slike i da li je dozvoljeno koristiti je. Sa druge strane postoje specijalizovani sajtovi za distribuciju slika, kao što su istockphoto, fotolia, gettyimages, sxc.hu i mnogi drugi. Većina slika se naplaćuje, ali možete pronaći i besplatne ukoliko je budžet ograničen.
Organizovanje strukture fajlova
Za razliku od mnogih fajlova koji se danas koriste, HTML stranice ne čuvaju direktno same fajlove slika u html fajlu. Na primer, ako u MS Word alatu unesemo određeni tekst i par slika, po snimanju dobijamo jedan doc fajl. Ako taj jedan doc fajl pošaljemo prijatelju i on ga otvori na svom računaru, sav tekst i slike će biti prisutne, dakle, učitavaju se iz tog jednog fajla. Nasuprot tome, ako u HTML dokument unesemo tekst i par slika, po snimanju dobijamo HTML fajl, ali u kome slike nisu ugrađene. Ako bi sada samo taj HTML fajl poslali prijatelju, na njegovom računaru, prilikom pokretanja fajla, video bi se samo tekst i prazan prostor, bez slika, a na mestima gde su one bile postavljene. HTML fajl je sačuvao pozicije slika, njihove dimenzije i pokušava da ih prikaže, ali ih ne nalazi jer su one van HTML fajla i nismo ih poslali.
Kao linkove, tako i slike možemo pozvati radi prikaza ili putem apsolutne ili putem relativne putanje, ali ih uvek treba postavljati preko relativnih putanja.
Ukoliko sve slike postavimo unutar root foldera sajta i pozivamo ih putem relativnih putanja, ne može se desiti da neku sliku slučajno „izgubimo“ prilikom slanja ili postavljanja sajta. Rekli smo, kopiramo uvek ceo root folder, a pošto su putanje relativne, sve će biti ok.
Dodavanje slika
Radi dodavanja slika na HTML stranicu, koristimo <img> tag. Pomenuti tag je samozatvarajući, odnosno nema početak i kraj, ali mora sadržati sledeća dva atributa:
- Src – ovaj atribut označava URL odakle se poziva slika (slika je uvek van HTML fajla)
- Alt – ovaj atribut definiše tekst koji će se prikazati posetiocu sajta ukoliko se, iz bilo kog razloga, nije prikazala slika. U tom slučaju, prikazaće se pomenuti tekst u okviru predviđenim za sliku. Ipak, ne bi trebalo bukvalno opisivati sliku, već pružiti info o njenoj svrsi. Na primer, alt tekst slike upozorenja ne bi trebalo da bude “Žuti trougao sa crnim okvirom i znakom uzvika”, već “Upozorenje!” i slično. Alt tekst koriste i pretraživači poput Googla radi indeksiranja. Po standardima W3C alt tekst je obavezan na slici.
Ovaj tag u primeru će pozvati sliku image.jpg (A) iz istog foldera u kome se nalazi i sam html fajl. Ukoliko se slika ne prikaže, u praznom okviru, ispisaće se Alt tekst (B)
Opcioni atributi nad img tagom:
- Title – Možemo koristiti ovaj atribut ako želimo da unesemo još informacija o slici. Većina modernih browsera prikazuje ovaj tekst kao tooltip[3] kada se mišem pređe preko slike.
- Width i Height – Širina i visina slike u pikselima. Ukoliko nisu postavljeni ovi atributi, browser će iz samog fajla slike očitati vrednosti. Ukoliko se unose, ovi atributi trebaju oslikavati realno stanje, odnosno, ako imamo sliku logo.png koja je 120px (piksela) visoka i 300px široka, img tag u HTML kôdu bi mogao da izgleda:
<img src=”logo.png” alt=”Ime slike” width=”300”height=”120” />
Ukoliko se pitate, redosled atributa u jednom HTML tagu nije bitan. To se odnosi i na img, ali i na ostale tagove.
- Align – koristio se za pozicioniranje slika u odnosu na okružujuće elemente. Upotrebljeno je prošlo vreme u prethodnoj rečenici jer je ovaj atribut je zabranjen u HTML5, ali i u ranijim verzijama HTML/xHTML jezika, umesto njega, preporučena je upotreba CSS opisa za pozicioniranje.Pošto su slike inline elementi, ukoliko ih postavimo unutar paragrafa, ponašaće se kao karakter teksta, po default podešavanjima. Standardne vrednosti ovog atributa su bottom, left, middle, right i top uz još neke dodatne. Njihovo ponašanje vidimo na slici ispod:
Slike, odnosno img tagovi u HTML jeziku su takozvani inline elementi. O inline i block elementima ćemo govoriti detaljnije u nekoj od narednih lekcija. Ono što je bitno za sada je da block elementi uvek počinju u novom redu, dok se inline elementi ponašaju kao slovo teksta, počinju u nastavku prethodnog elementa.
[1] Najmanja, nedeljiva tačka na ekranu monitora ili sličnog uređaja. Može prikazati jednu boju. Kombinacijom mnoštva piksela dobijamo sliku.
[2] (autorsko pravo) je pravo koje uživaju stvaraoci (autori) književnih, naučnih i umetničkih dela (autorska dela), a koje im daje isključivo pravo korišćenja ili odobravanja drugima korišćenja svog dela, a uključuje i sistem zaštite tih prava. U objektivnom smislu, ono je sistem pravnih pravila i načela koje regulišu prava koje zakon daje autoru dela.
[3] Tooltip je čest element grafičkih interfejsa. Koristi se zajedno sa kursorom miša. Kada korisnik postavi kursor iznad određenog elementa, bez klika na element, tooltip se može pojaviti sa informacijama o elementu iznad koga je kursor. Tooltip ne postoji na mobilnim i touch uređajima jer nema kursora.