Jak na obrázky v HTML!
Vkládání obrázků ve struktuře HTML a především jak do vašich webových stránek vkládat obrázky.
Vizuální obsah hraje klíčovou roli v uživatelském zážitku, pomáhá předávat informace, zlepšuje estetiku a činí stránky poutavějšími.
Element <img> je nejčastějším nástrojem pro oživení webu fotografiemi, ilustracemi a dalšími grafickými prvky.
Nyní si podrobně rozebereme element <img>, jeho povinné a volitelné atributy a osvědčené postupy pro jejich efektivní použití.
<img src="...">Element <img> se používá k vložení obrázku do HTML dokumentu. Je to tzv. prázdný element (void element), což znamená, že nemá uzavírací tag jako například <p>...</p>. Místo toho se zapisuje jako samostatný tag (<img /> nebo jen <img> v HTML5) a vyžaduje minimálně dva klíčové atributy: src a alt.
Důležité atributy a jejich použití:
src (Source): Tento atribut je povinný a specifikuje URL adresu (cestu) k souboru obrázku. Prohlížeč načte obrázek z této adresy a zobrazí ho na daném místě v dokumentu.
<img decoding="async" src="https://www.vasedomena.cz/obrazky/logo.png" alt="Logo firmy">
Používá se pro obrázky hostované jinde na internetu.
<img decoding="async" src="/obrazky/produkt.jpg" alt="Detail produktu">
Relativní cesty jsou preferované pro obrázky, které jsou součástí vašeho webu, protože usnadňují přesuny projektu a jsou flexibilnější.
obrazky/produkt.jpg: Obrázek je ve složce obrazky ve stejném adresáři jako HTML soubor.
/obrazky/produkt.jpg: Obrázek je ve složce obrazky v kořenovém adresáři webu.
../obrazky/produkt.jpg: Obrázek je ve složce obrazky o úroveň výše.
alt (Alternative text): Tento atribut je také povinný a poskytuje alternativní textový popis obrázku.
Je to text, který se zobrazí:
Pokud se obrázek z nějakého důvodu nenačte (např. špatná cesta, pomalé připojení, blokování prohlížečem).
Pokud si stránku prohlíží uživatel s asistenční technologií, jako je čtečka obrazovky, která text přečte nahlas.
Je kriticky důležitý pro:
Přístupnost: Zajišťuje, že uživatelé se zrakovým postižením mohou pochopit obsah a význam obrázku.
SEO (Optimalizace pro vyhledávače): Vyhledávače nemohou „vidět“ obrázky, ale čtou alt text. Ten jim pomáhá pochopit, co obrázek zobrazuje, a může zlepšit relevanci stránky pro daná klíčová slova.
Osvědčené postupy: alt text by měl být stručný, popisný a relevantní k obsahu obrázku a kontextu stránky. Neměl by to být jen seznam klíčových slov. Pokud je obrázek čistě dekorativní a nepřináší žádné informace, může být alt="" (prázdný), aby ho čtečky obrazovek ignorovaly.
Příklad:
<img decoding="async" src="slunce.jpg" alt="Západ slunce nad mořem s palmami v pozadí">
width a height: Tyto atributy definují šířku a výšku obrázku v pixelech. Měly by být uvedeny pouze číselnou hodnotou, bez jednotky (px).img { max-width: 100%; height: auto; }).
Příklad:
<img decoding="async" src="ikona.png" alt="Malá ikona" width="32" height="32">
<img decoding="async" src="fotografie.jpg" alt="Zasněžená krajina" width="800" height="600">
title: Podobně jako u odkazů, atribut title poskytuje doplňující text, který se zobrazí jako bublina (tooltip) při najetí myší na obrázek. Může doplnit alt text, ale neměl by ho nahrazovat.
Příklad:
<img decoding="async" src="galerie/portret.jpg" alt="Portrét mladé ženy s úsměvem" title="Umělecký portrét od Jana Nováka, foceno v roce 1970">
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<title>HTML Obrázky Příklad</title>
</head>
<body>
<h1>Moje fotogalerie</h1>
<main>
<p>Zde je krásný obrázek přírody:</p>
<img loading="lazy" decoding="async" src="priroda.jpg" alt="Zelená louka s rozkvetlými květinami a horami v pozadí" width="600" height="400">
<p>Logo našeho webu:</p>
<img loading="lazy" decoding="async" src="/assets/logo.png" alt="Logo Mého Webu" width="150" height="50" title="Oficiální logo">
<p>Dekorativní oddělovač (bez informativního alt textu):</p>
<img decoding="async" src="line.gif" alt="" width="100%" height="2">
</main>
<footer>
<p>© 2025 Moje Galerie.</p>
</footer>
</body>
</html>
Element <img> je klíčový pro vkládání vizuálního obsahu do vašich webových stránek.
Správné použití atributů src a alt je zásadní nejen pro zobrazení obrázků, ale také pro přístupnost a optimalizaci pro vyhledávače.
Nezapomeňte vždy poskytnout smysluplný alt text a zvažte uvedení atributů width a height pro zlepšení výkonu a stability stránky.
Ovládnutím práce s obrázky můžete výrazně zlepšit vizuální atraktivitu a srozumitelnost vašich webů.
Pro vkládání obrázků na webových stránkách lze využít různé formáty. Tradiční a obecně známé jsou zejména JPEG, PNG či GIF, které však již ne vždy splňují současné nároky na efektivitu. Modernějším a technicky pokročilejším řešením jsou formáty WEBP a AVIF, jež nabízejí výrazně lepší poměr mezi kvalitou a velikostí souboru.
Hlavním cílem je zajistit co nejnižší datovou velikost při zachování vysoké obrazové kvality, a to zejména s ohledem na dnešní displeje s vysokým rozlišením. Optimalizace formátu tak přímo přispívá k rychlejšímu načítání webu i lepšímu uživatelskému dojmu.
Kdyžtak se podívejte na článek o formátech tady na webu.
