Jak dát do HTML obrázek?

Obrázek jako malířské plátno ve vašem HTML: Vkládání a péče o detaily

Vizuální prvky hrají klíčovou roli v poutavosti a srozumitelnosti webových stránek. Obrázky mohou sdělit složité informace, vyvolat emoce a celkově zlepšit uživatelskou zkušenost. HTML nabízí jednoduchý a efektivní způsob, jak obrázky do webových stránek integrovat. Pojďme se podívat, jak na to, a prozkoumat i pár triků, které se vám budou hodit.

Základní kámen: tag <img/>

Tag <img> je základní stavební kámen pro vkládání obrázků do HTML dokumentu. Na rozdíl od většiny HTML tagů se jedná o tag párový – nemá ukončovací tag </img>. Všechny informace potřebné pro zobrazení obrázku jsou obsaženy v atributech uvnitř samotného tagu.

src: Adresa domů pro váš obrázek

Atribut src (source - zdroj) je nejdůležitější atribut tagu <img>. Určuje cestu k obrázkovému souboru, který chcete zobrazit. Cesta může být relativní nebo absolutní.

• Relativní cesta: Používá se, když je obrázek uložen ve stejném adresáři nebo v podadresáři jako HTML soubor. Jak už bylo zmíněno, pokud je obrázek v tomtéž adresáři, postačí zadat pouze jeho název, například:

  <img src="krajina.jpg" alt="Krásná krajina"/>

  Pokud je obrázek v podadresáři, uveďte cestu k němu:

  <img src="obrazky/podzim/list.png" alt="Žlutý javorový list"/>

• Absolutní cesta: Udává kompletní URL adresu obrázku, včetně domény. Používá se, když obrázek není uložen na stejném serveru jako HTML soubor.

  <img src="https://www.example.com/obrazky/slunecnice.jpg" alt="Pole slunečnic"/>

alt: Záchranný kruh pro SEO a přístupnost

Atribut alt (alternative text - alternativní text) slouží k popisu obrázku. Je to nesmírně důležitý atribut, a to hned z několika důvodů:

• Přístupnost: Pokud se obrázek nezobrazí (například kvůli chybě, pomalému připojení nebo z důvodu, že uživatel používá čtečku obrazovky), zobrazí se místo něj text z atributu alt. To umožňuje lidem se zrakovým postižením porozumět obsahu obrázku.
• SEO (Search Engine Optimization): Vyhledávače používají atribut alt k pochopení obsahu obrázku. Dobře napsaný alternativní text může zlepšit pozici webové stránky ve výsledcích vyhledávání.
• Kontext: I pro uživatele, kteří obrázek vidí, může být alt text užitečný pro doplnění kontextu.

Příklady kvalitního a špatného použití atributu alt:

• Špatně: <img src="kocka.jpg" alt="obrazek"> (Příliš obecné)
• Špatně: <img src="kocka.jpg" alt=""> (Chybí text, který by byl zobrazen v případě problému s obrázkem)
• Dobře: <img src="kocka.jpg" alt="Hrající si perská kočka s červenou koulí vlny"> (Specifické a popisné)

Další atributy pro doladění:

Kromě src a alt existují i další atributy, které vám umožní lépe kontrolovat zobrazení obrázku:

• width a height: Tyto atributy definují šířku a výšku obrázku v pixelech. Doporučuje se je používat, aby prohlížeč mohl předem rezervovat místo pro obrázek, což zlepší výkon webové stránky. Pozor: Změna rozměrů pomocí těchto atributů může zkreslit obrázek, pokud nezachováte poměr stran. Lepší je úprava rozměrů přímo v grafickém editoru.
• title: Tento atribut přidá titulek, který se zobrazí, když uživatel najede myší na obrázek.
• loading: Tento atribut (s hodnotami lazy, eager nebo auto) určuje, zda se má obrázek načíst ihned, nebo až ve chvíli, kdy se dostane do zorného pole uživatele (tzv. lazy loading). Lazy loading může výrazně zlepšit rychlost načítání stránky.

Příklad kompletního kódu:

<img src="obrazky/priroda/les.jpg" alt="Hustý smrkový les s paprsky slunce" width="600" height="400" title="Kouzelný les" loading="lazy">

Závěrem

Vkládání obrázků do HTML je jednoduchý, ale klíčový proces pro vytváření poutavých a uživatelsky přívětivých webových stránek. Dbejte na správné používání atributu alt pro zajištění přístupnosti a optimalizaci pro vyhledávače. Experimentujte s dalšími atributy pro doladění vzhledu a výkonu vašich stránek. S trochou praxe se vkládání obrázků stane vaší druhou přirozeností.