Slike na web stranicama

Sada, kad imamo tekst, vrijeme je da naše stranice obogatimo i pokojom novom slikom.

Nakon sljedećih nekoliko lekcija zakoračit ćete u svijet multimedije na web stranicama, no i ti prvi koraci mogu vaše stranice učiniti vrlo privlačnima.

Ishodi učenja

Nakon ovog poglavlja ćete moći:

• umetnuti slike na web stranicu
• postaviti sliku na mjesto po želji: u odlomak, pokraj teksta
• namjestiti podatke o visini i širini slike, navesti primjere u kojima se vidi kako ih se može pogrešno odabrati, te pokazati što znači „promjena veličine slike” navođenjem visine i širine koje ne odgovaraju stvarnim vrijednostima
• namjestiti alternativni tekst i nabrojiti tri situacije u kojima se on upotrebljava.

U ovom poglavlju očekuju vas dvije bonus lekcije koje se bave sadržajima izvan HTML-a, ali su korisni u stvaranju web stranica. Nakon prve bonus lekcije ćete možda neki od programa s kojima ste se susretali prepoznati kao mogućeg pomoćnika u pripremi slika za vaše web stranice, a možda ćete se odlučiti za upotrebu nekog novog programa. Nakon druge bonus lekcije moći ćete odrediti koji bi grafički format bio prikladan za vaše ilustracije.

Aktivnosti u ovom poglavlju

Aktivnosti u ovom poglavlju slične su aktivnostima u prethodnom: malo teorije, puno primjera i vježbi. Predlažemo vam da primjere provjerite na svom računalu.

Nemojte zaboraviti i na izradu vježbi koje ćete naći u svakoj lekciji. Za predložene vježbe sve su vam slike na raspolaganju u tečaju, iako vjerujemo da ćete ipak najviše vremena provesti izabirući slike za primjere koje ćete sami željeti isprobati.

Glavna aktivnost vezana uz ovo poglavlje nalazi se izvan ovog tečaja i obuhvaća svladavanje barem osnova priprema slika za objavljivanje na webu. Za sada si samo isplanirajte vrijeme za tu aktivnost, ali nemojte skretati s teme ovog tečaja. Razlog je jednostavan: vježbe na ovom tečaju možete raditi i sa slikama preuzetim s weba, a osim toga vas u ovom tečaju čekaju još neka znanja nužna za dovršavanje vašeg prvog web sjedišta.

Slike definiramo oznakom <img> i neizostavnim atributom src, koji sadrži putanju i naziv datoteke slike. Zasad ćemo pretpostaviti da je slika u istoj mapi kao i stranica, pa će se u atributu src naći samo njezino ime.

Oznaku <img> mogu opisivati još neki atributi, od kojih su od danas aktualnih u strogoj definiciji HTML-a 4.01 najčešći:

width

Širina slike definirana u pikselima (npr. "100") ili postocima raspoloživog prostora za sliku (npr. "80%").

height

Visina slike definirana u pikselima ili postocima.

alt

Alternativni tekst (opis slike) koji se prikazuje u preglednicima koji ne podržavaju prikaz slika ili ako slika ne postoji. Isti tekst prikazuje se dok slika nije učitana, a mogu ga pročitati i čitači ekrana namijenjeni slijepim osobama. Obavezan atribut u strogom HTML 4.01.

U prethodnoj smo lekciji spomenuli atribute width i height koji određuju dimenzije prikazane slike.

Ti atributi nisu obavezni, ali ih je dobro pisati, a još je važnije ispravno ih izabrati, Naime:

• Idealno je da atributi width i height sadrže vrijednosti koje odgovaraju širini i visini slike koju treba prikazati.

• Ako tih parametara nema, prvo će biti prikazana stranica bez mjesta rezerviranog za sliku, a tek će se po učitavanju slike preostali sadržaj razmjestiti na konačno mjesto – posjetitelju pred očima.

• Ako su parametri width i height veći od dimenzija slike, slika će biti rastegnuta i djelovat će mutno.

• Ako su navedeni parametri manji od dimenzija slike, prenosit će se velika slika te prikazati umanjeno. Dakle, vrijeme prijenosa će biti nepotrebno veliko.

• Ako je slika smanjena neproporcionalno (npr. ako je vrijednost parametra width polovina širine slike, a vrijednost parametra height trećina izvorne visine slike), slika će biti izobličena.

Zbog svega navedenoga pozivamo vas da naučite prilagođavati slike za prikaz na webu u nekom od odgovarajućih programa.

Ponovimo sad način pisanja oznake <img> te isprobajmo neke od navedenih problema u jednom zadatku.

Photoshop, Paint Shop Pro, GIMP i Paint.NET među najpopularnijim su programima za obradu grafike i pripremu grafičkih elemenata za web. Ukratko ćemo vam predstaviti ova četiri programa, ali ne zaboravite da postoji i mnoštvo drugih programa za obradu grafike. Na vama je da odaberete svog favorita.

Komercijalni programi

Program Adobe Photoshop je najpopularniji program ove vrste, svojevrsni standard u grafičkoj industriji. Nudi mnoštvo mogućnosti, no njegova izuzetno visoka cijena i složenost uporabe čine ga neprivlačnim većini kućnih korisnika.

Jednostavnija verzija programa Photoshop zove se Photoshop Elements i zadovoljava potrebe većine korisnika.

Ikone programa Photoshop i Photoshop Elements.

Među ostalim komercijalnim programima ističu se dva programa tvrtke Corel. Prvi je Corel PhotoPaint, dio paketa raznovrsnih programa Corel DRAW, a drugi je razvijen iz malog shareware programa i postao omiljen alat kućnih korisnika, ali i profesionalaca. To je PaintShop Pro koji sadrži mnoštvo mogućnosti i mnogo je jednostavniji za uporabu od Photoshopa i PhotoPainta, a odlikuje se i prihvatljivom cijenom.

Besplatni programi

GIMP je besplatan program vrlo dobrih mogućnosti, no do verzije 2.6 korisnicima operacijskog sustava Windows isprva poprilično kompliciranog sučelja.

Ikona programa The GIMP.

Paint.NET jednostavan je program manjih mogućnosti od ranije navedenih, ali zato i potpunim početnicima jednostavniji za svladavanje.

Ikona programa Paint.NET.

Među ostalim programima za obradu slika ističu se Photoscape, te preglednici slika s mogućnošću jednostavne obrade (Picasa, IrfanView i drugi).

Brzina prijenosa podataka na Internetu čak i danas predstavlja problem. Kako bi se taj problem učinio što bezbolnijim, a naše se stranice što brže učitavale, za slike koje upotrebljavamo na našim web stranicama izabiremo grafički format koji smanjuje veličinu datoteke tako, da najviše smanji datoteku i najmanje uništi sliku koju želimo objaviti.

GIF

Ovaj se format preporuča upotrebljavati za grafike koje ne sadrže više od 256 boja. Kako gotovo svaka fotografija sadrži milijune boja, ovaj format pri spremanju fotografija najčešće izbjegavamo.

Tajna GIF formata je u tome što uz podatke o slici u sebi sadrži i posebnu paletu od najmanje dvije do najviše 256 boja. Zato je on pogodan za pohranjivanje slika s relativno malo boja.

Dijelove slike je moguće odrediti kao prozirne (engl. transparent), pa će kroz te dijelove slike biti vidljiva pozadina na kojoj se slika nalazi.

Uvećana slika crnog slova „A” s definiranom prozirnošću
na dvije različite podloge.

Po svim navedenim mogućnostima formata GIF postoji i bolji format, PNG. GIF se zadržao dijelom iz navike, a dijelom zbog mogućnosti da se u tom slikovnom formatu pohranjuju jednostavne animacije.

JPEG

JPEG je format koji koristimo za spremanje fotografija, koje sadrže više od 256 boja.

JPEG format nudi različite stupnjeve optimizacije, no svakim od njih se gubi na kvaliteti slike. Svejedno, stupanj optimizacije uvijek je moguće postaviti tako da gubitak kvalitete na fotografijama bude prihvatljiv, većini promatrača često i neprimjetan. Ipak, zbog gubitka kvalitete nije pogodan za slike s jednobojnim plohama.

GIF i JPEG optimizacija.

JPEG format ne podržava prozirnost.

PNG

Najmlađi je od spomenuta tri formata, ujedinjuje najbolje od prethodna dva. Omogućuje spremanje palete od 17 do 256 boja, ali i 8-bitne grayscale palete (paleta sivih tonova) i pune, 24-bitne, palete (16,7 milijuna boja). Podržava prozirnost, ali i alpha prozirnost, kojom se određuje stupanj prozirnosti, pa rubovi slika ostaju „meki”.

Uvećana slika crnog slova „A” s definiranom alpha prozirnošću
na dvije različite podloge.

Format PNG je manje raširen od ranije navedenih formata GIF i JPEG jer je do prije nekoliko godina većina korisnika upotrebljavala web preglednike koji nisu podržavali alpha prozirnost. Danas popularnost PNG formata raste.

Format PNG je osobito pogodan za slike s jednobojnim plohama i puno boja, koje često dolaze od kosih crta na prijelazima ploha, kao na prethodnoj slici. Upotrebljava se, na primjer, za grafikone, slike ekrana, logotipove i sl.