Grafika na stránkách

Obrázek prý vydá za tisíc slov. Cynický webmaster dodá, že z hlediska objemu dat nepochybně (spíše za víc). Obrázky na jedné straně stránky oživují a přispívají k jejich vzhledu, na straně druhé výrazně zvyšují objem dat, která je nutno po síti přenést, aby se stránka mohla zobrazit.

Vložení obrázku

Vlastní vložení obrázku do stránky je celkem jednoduché. Slouží k němu nepárový prvek img v následujícím tvaru:

<img src="adresa" alt="popis" width="šířka"
height="výška">

Povinné jsou atributy src (jeho obsahem je adresa čili lokátor obrázku, který má být do stránky vložen) a alt. Ten poskytuje alternativní popis obrázku pro negrafické klienty. Zdůrazňuji ještě jednou: alt by měl popisovat obsah obrázku. Jeho hodnotou by proto nemělo být „obrázek“, ale třeba „náš dům“ či „východní křídlo zámku“. Pokud obrázek obsahuje nadpis v grafické podobě, měl by být jeho text zopakován jako hodnota alt. Je-li obrázek čistě dekorační a nenese žádný význam, bývá zvykem uvést jako hodnotu alt prázdný řetězec.

Atributy width a height obsahují rozměry obrázku v pixelech (obrazových bodech). Nejsou povinné, ale vřele doporučuji je uvádět. Klient si je dovede zjistit z vlastního obrázku, ale nemůže začít s formátováním stránky, dokud nezná rozměry obrázků do ní vložených. Pokud mu je nesdělíte atributy width a height, musí počkat, dokud nezíská ze sítě alespoň začátek všech obrázků. To může velmi zpomalit zobrazení stránky.

Pozor! Hodnoty uvedené ve width a height jsou pro prohlížeč nedotknutelné a pokud se skutečné rozměry obrázku liší, prohlížeč jej roztáhne či stlačí na předepsané rozměry. Proto vždy dbejte, aby hodnotou těchto atributů byly skutečné rozměry obrázku.

Obrázek představuje řádkový materiál. Chová se tedy podobně jako písmeno a je-li umístěn uvnitř textu, bude za ním okolní řádek normálně pokračovat.

Asi takto.

Příprava obrázku

Vzhledem k výše zmiňovanému problému s velikostí dat příprava obrázků pro Web většinou znamená hledání vhodného kompromisu mezi kvalitou a velikostí souboru pro jeho uložení a následný přenos.

Na velikost souboru mají vliv především následující aspekty:

1. Volba formátu. Obrázky lze ukládat v několika grafických formátech, které mají své charakteristické vlastnosti určující vhodnost jejich použití. Nejčastější bývají JPEG, PNG a GIF, začíná se objevovat i SVG.

2. Rozměry obrázku. Uvědomte si, že zmenšením stran obrázku na polovinu klesne jeho plocha na čtvrtinu a něco podobného se stane i s objemem dat. Redukce rozměrů (a použití náhledu) významně přispívá ke zmenšení objemu dat na stránce.

3. Recyklace. Prohlížeč si obrázky ukládá do vyrovnávací paměti na lokálním disku. Pokud tentýž obrázek použijete na několika stránkách, přenese se jen jednou. Pro další výskyty už prohlížeč sáhne po jeho lokální kopii.

4. Vypuštění obrázku. Jistě, je to drastická metoda, ale z hlediska snížení objemu dat zdaleka nejúčinnější. Ne až tak vzácně se setkáte se stránkami přeplácanými obrázky. Zejména pokud má obrázek dekorativní charakter, který spíše navozuje náladu než aby konkrétně ilustroval věci, o nichž se píše v textu, zamyslete se nad tím, zda je jeho přínos adekvátní objemu dat, která vyžaduje.

Související témata

• Volba vhodného formátu v závislosti na charakteru obrázku.
• Vliv rozměrů na velikost obrázku.
• Vliv motivu na velikost JPEGu, aneb efektivita JPEGu.
• Vliv kvality na velikost JPEGu.
• Vliv počtu barev na velikost a kvalitu GIFu.
• Dithering aneb omezování počtu barev.
• Průhlednost – problémy a jejich řešení.
• Náhledy čili jak nahradit obrázek zmenšenou verzí.