HTML & CSS pre začiatočníkov (časť 09): Obrázky pre web (01)

Ak si uložíte obrázky v grafickom programe, ponúkajú sa rôzne formáty obrázkov. Ktorý z nich by ste však mali zvoliť, keď ide o vloženie obrázka do webovej stránky?



Ak chcete predstaviť obrázok na svojej webovej stránke, máte na výber zo troch formátov.

• GIF

• JPEG

• PNG

Ktorý formát však zvoliť pre aký účel? Radšej použiť GIF alebo PNG na fotografie? Najprv krátky prehľad o schopnostiach jednotlivých formátov.

Táto malá prehľad ukazuje rozdielne vlastnosti formátov. Preto nie je prekvapujúce, že sa určité formáty lepšie hodia pre jednotlivé použitie ako iné. Práve v tomto bode sa začína nasledujúci odsek. Tam sa ukáže, kedy sa najlepšie používa ktorý formát.

Fotografie

Nepochybne, pre fotografie sa používa formát JPEG. Pretože tu je možné obrázky veľmi dobre komprimovať, pričom kvalitu je možné voliť variabilne. Tu nájdete správnu rovnováhu medzi kvalitou a kompresnou mierou.

Snímky obrazoviek/Diagramy

Pre tento účel je najlepšie použiť formát PNG. PNG je zaujímavý aj pre technické výkresy, pôdorysy atď. PNG môže byť tiež použité na obrázkoch, pri ktorých sa pracuje s transparentnými oblasťami.

Písma/Logá

Ak máte text vo svojom logu alebo vôbec chcete zobraziť písmo, mali by ste použiť GIF alebo PNG. Avšak kvôli lepšiemu výkonu sa obvykle volí PNG. JPEG je v každom prípade nevhodný pre zobrazovanie písma, pretože okraje sa zobrazujú nečisto.

Transparentnosť

Ak ide o zobrazenie transparentných oblastí, JPEG je predsa len vylúčené. Zostávajú teda GIF a PNG. Ktorý z týchto dvoch formátov však použiť, keď záleží na transparentnosti? GIF teoreticky dokáže pracovať s transparentnosťou, ale výsledky sú zvyčajne nečisté. Pixel v formáte GIF môže byť buď úplne viditeľný, alebo úplne transparentný. Pri PNG tento jav nenastáva. Tento formát má dodatočný alfa kanál, vďaka ktorému môžu byť dosiahnuté jemnejšie výsledky transparentnosti.

Vloženie obrázkov

Grafiky je možné vložiť pomocou prvku img. (Majte prosím na pamäti, že obrázky sa teraz veľmi často vkladajú cez CSS. Podrobné informácie o CSS budú samozrejme nasledovať. Ukázaná cesta v HTML je však úplne konformná so štandardom a môže byť pokojne použitá aj v HTML5.)

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

O prvku img je samostatný prvok. Pomocou príslušných atribútov je možné bližšie popísať obrázok. Najdôležitejší atribút je bezpochyby src. Pretože sa tým určuje obrázok, ktorý sa má vložiť. V zobrazenom príklade predpokladám, že obrázok logo.png sa nachádza vo rovnakom adresári ako súbor HTML, v ktorom je element img definovaný.

Aby sa obrázky skutočne zobrazili, musí sa k nim správne uviesť cesta. HTML ponúka rôzne možnosti pre odkazovanie.

• Absolútne cesty

• Absolútne určené cesty voči základnej adrese

• Relatívne určené cesty voči základnej adrese

Najprv k absolútnym cestám. Túto možnosť sa obvykle používa vždy, ak sa obrázok nenachádza na vlastnom serveri. Predpokladajme, že chcete vložiť známy motýľ od PSD-Tutorials.de na svoju webovú stránku. Teoreticky by ste ho mohli načítať priamo zo servera, na ktorom je uložený. Najskôr zistite cestu k obrázku. Najjednoduchšie to urobíte tak, že kliknete pravým tlačidlom myši na obrázok v prehliadači a potom zvolíte Kopírovať URL obrázka.

To, čo sa načíta do schránky, by malo na konci vyzerať takto:

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

Jedná sa teda o úplnú adresu obrázka. Tieto informácie sú postačujúce na vloženie obrázka.

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

Čiže atribútu src priradíme úplnú cestu obrázka.

Problémom s týmito absolutnými cestami je však skutočnosť, že nemáme skutočnú kontrolu nad vloženým obsahom. Ak sa teda obrázok, na ktorý odkazujete, vymaže zo servera alebo sa presunie do iného adresára, vznikne chyba v zobrazení.





Preto by toto absolútne odkazovanie malo byť skutočne výnimkou.

Absolútne cesty relatívne k základnej adrese

Táto možnosť sa ponúka vždy vtedy, keď je obrázok uložený na rovnakom počítači/serveri ako HTML súbor a je dosiahnuteľný aktuálnym protokolom. Znie to zložito, ale v skutočnosti to také nie je.

Príklad:

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

Ide o úplnú adresu. Nasledujúca časť je absolútna cesta.

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

Táto absolútna cesta sa vzťahuje relativne k základnej adrese http://4eck-media.de.

Relatívne cesty relatívne k základnej adrese

Táto teraz predstavená možnosť je určite najbežnejšia. Vždy sa berie aktuálna cesta ako referenčný bod, z ktorého sa nakoniec adresuje. Tu je niekoľko príkladov. Predpokladajme, že existuje súbor index.htm, do ktorého chcete vložiť obrázok. Okrem toho existuje na rovnakej úrovni adresárov priečinok images, v ktorom je uvedený obrázok.

index.htm
images
--logo.png

Volanie v atribúte src by v tomto prípade vyzeralo nasledovne:

src="images/logo.png"

Ako by to vyzeralo, ak by sa obrázok nachádzal v adresári, ktorý je nad HTML súborom?

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

V tomto prípade je súbor index.htm o úroveň nižšie než obrázok na vloženie logo.png.

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

Syntax tu teda znamená: Prejdite o úroveň výš, prejdite do adresára images a zobrazte logo.png.

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

V tomto prípade syntax vyzerá takto:

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

Obrázok logo.png v tomto prípade leží dve úrovne nad súborom index.htm v adresári images.

Výhodou relatívnych ciest je ich flexibilita. Môžete tak lokálne vyvíjať projekt a potom ho skopírovať na "skutočný" server. Po tomto kroku budú cesty stále správne.