HTML in CSS za začetnike (del 09): Grafike za splet (01)

Ko shranjujete slike v grafičnem programu, so na voljo različni grafični formati. Katerega izbrati, ko želite vključiti sliko na spletno stran?



Ko želite predstaviti sliko na svoji spletni strani, imate izbiro med tremi formati.

• GIF

• JPEG

• PNG

Kateri format izbrati za katero uporabo? Ali raje izberete GIF ali PNG za fotografije? Najprej kratek pregled zmogljivosti posameznih formatov.

Ta mali pregled že prikazuje različne lastnosti formatov. Ni presenetljivo, da so določeni formati bolj primerni za posamezne namene kot drugi. Prav na tem mestu se začne naslednji odstavek. Tam je prikazano, kdaj je najbolje uporabiti določen format.

Fotografije

Brez dvoma, za fotografije uporabite JPEG. Slike se lahko zelo dobro stisnejo, pri čemer je kakovost lahko izbrana spremenljivo. Tu je najti pravo ravnovesje med kakovostjo in stopnjo stiskanja.

Slike zaslona/Diagrami

Za to je najprimernejši format PNG. PNG je zanimiv tudi za tehnične risbe, tlorise itd. PNG se lahko uporablja tudi za slike, kjer so uporabljene prosojne površine.

Pisave/Logotipi

Če imate besedilo v svojem logotipu ali sploh želite prikazati besedilo, uporabite GIF ali PNG. Zaradi boljše zmogljivosti se običajno uporablja PNG. JPEG ni primeren za prikaz pisav, saj se robovi prikazujejo nečisto.

Prosojnost

Ko gre za prikaz prosojnih območij, JPEG preprosto odpade. Ostajata GIF in PNG. Kateri od teh dveh formatov pa uporabiti, kadar gre za prosojnost? GIF lahko načeloma deluje s prosojnostjo, rezultati pa so pogosto nečisti. Pixel v formatu GIF lahko bodisi v celoti vidimo bodisi je v celoti prosojen. Pri PNG se tega pojava ne pojavi. Ta format ima dodaten alfa kanal, ki omogoča doseganje bolj natančnih rezultatov prosojnosti.

Vključevanje slik

Grafične prikaze je mogoče vključiti prek elementa img. (Upoštevajte, da se slike danes pogosto vključujejo prek CSS. Podrobne informacije o CSS bodo seveda sledile. Vseeno je prikazana HTML pot popolnoma standardna in brez skrbi jo je mogoče uporabljati tudi v HTML5.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Element img je samostojen element. S primernimi atributi je mogoče natančno opisati sliko. Najpomembnejši atribut je nedvomno src. Prek tega določimo sliko, ki jo želimo vključiti. V prikazanem primeru predvidevam, da se grafika logo.png nahaja v isti mapi kot HTML datoteka, v kateri je definiran element img.

Za dejanski prikaz slik morate pravilno navesti pot do njih. HTML ponuja različne načine za sklicevanje.

• Absolutne poti

• Absolutne poti glede na osnovni naslov

• Relativne poti glede na osnovni naslov

Najprej o absolutnih poteh. To možnost običajno uporabimo, kadar slika ni na lastnem strežniku. Denimo, želite v svojo spletno stran vključiti znanega metulja iz PSD-Tutorials.de. Teoretično bi ga lahko neposredno naložili s strežnika, na katerem je shranjen. Najprej ugotovite pot slike. Najlažje to storite tako, da kliknete sliko v brskalniku z desnim klikom miške in izberete Kopiraj URL slike.

To, kar se naloži v odložišče, bi moralo na koncu izgledati tako:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

To je torej popolna pot do slike. Te informacije že zadostujejo za vključitev slike.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Podanemu src atributu dodelimo celotno pot do slike.

Problem teh absolutnih poti je predvsem v tem, da ni prave kontrole nad vključeno vsebino. Če se slike, ki ste jih sklicevali, izbrišejo s strežnika ali pa jih prestavijo v drugo mapo, bo prišlo do napake pri prikazu.





Zato bi moralo to absolutno sklicevanje dejansko biti izjema.

Absolutne poti relativno glede na osnovni naslov

Ta možnost je primerna vedno, ko grafika leži na istem računalniku/strežniku kot HTML datoteka in je dosegljiva preko trenutnega protokola. To se sliši zapleteno, vendar ni.

Primer:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

To je celoten naslov. Naslednji del je absolutna pot.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Ta absolutna pot se nanaša relativno na osnovni naslov http://4eck-media.de.

Relativne poti relativno glede na osnovni naslov

Ta predstavljena možnost je zagotovo najpogostejša. Vedno se vzame trenutna pot kot izhodišče, od katere se končno naslovi. Spodaj ponujamo nekaj primerov. Predpostavimo, da obstaja datoteka index.htm, v katero želite vstaviti sliko. Na isti ravni obstaja tudi mapa images, v kateri se nahaja omenjena slika.

index.htm
images
--logo.png

Klic v src atributu bi v tem primeru bil tak:

src="images/logo.png"

Kako pa bi to izgledalo, če se slika nahaja v mapi, ki je nad HTML datoteko?

projekt
--images
-----logo.png
--archiv
-----index.htm

V tem primeru se index.htm nahaja dve mapi pod vključeno sliko logo.png.

src="../images/logo.png"

Sintaksa v tem primeru pomeni: Pojdi eno mapo višje, tam preklopi v mapo images in pokaži logo.png.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

V tem primeru je sintaksa takšna:

src="../../images/logo.png"

Slika logo.png v tem primeru leži dve ravni nad index.htm v mapi images.

Prerogativ relativnih poti je njihova prilagodljivost. Tako lahko projekt razvijate lokalno in ga nato kopirate na "pravi" strežnik. Poti bodo ostale nespremenjene.