Náhled

Rozměrné obrázky přinášejí dva problémy. Vyžadují velký objem dat, což zpomaluje načítání stránky. Kromě toho jejich velké rozměry představují problém pro formátování stránky – nemusí se vejít do standardní šířky sloupce pro text a podobně. Řešením tohoto problému jsou náhledy. Jedná se o zmenšenou verzi obrázku, která funguje jako odkaz na velký obrázek.

Řekněme, že mám velký obrázek vhouba.jpg o rozměrech 480 × 640 pixelů. Vyrobím jeho zmenšenou verzi houba70.jpg o rozměrech 78 × 100 pixelů a velikosti něco málo přes 2 kB.

Tuto zmenšenou verzi vložím do stránky a učiním z ní odkaz na hlavní houbovitý obrázek. Výsledná konstrukce má zdrojový kód:

<a href="vhouba.jpg"><img src="houba70.jpg" alt="houba" width="78"
height="100" /></a>

a na stránce vypadá následovně:

Náhled (zmenšená verze) dává čtenáři představu, co jej čeká na výsledném obrázku. Pokud má zájem o jeho plnou verzi, stačí klepnout na náhled a klient mu ji stáhne a zobrazí.

Nikdy, opakuji nikdy nepoužívejte jako náhled velkou verzi obrázku, kterou byste pomocí atributů width a height zmenšili na velikost náhledu. V našem případě by tato zběsilost vypadala následovně:

<a href="vhouba.jpg"><img src="vhouba.jpg" alt="houba" width="78"
height="100" /></a>

(Změnila se jen hodnota atributu src u prvku img.) Tím totiž zcela zabíjíte nejvýznamnější přínos náhledů, a sice zmenšení objemu dat nutných pro zobrazení stránky. Tentokrát prohlížeč musí stáhnout celý velký obrázek, aby jej následně mohl zmenšit na velikost náhledu. To už raději použijte následující konstrukci

<h1>Jsem trouba a nestydím se za to!</h1>

která je významově ekvivalentní, ale zobrazí se mnohem rychleji.