Jak vložit obrázek do webu?

Jak vložit obrázek na váš web

Kvalitní obrázky dokáží na webových stránkách zdůraznit text, přidat vizuální zajímavost a zpříjemnit uživatelský zážitek. Vložení obrázku do HTML stránky je poměrně jednoduché a v tomto článku se dozvíte, jak na to.

Základní princip: tag <img>

Pro vložení obrázku do HTML stránky využijete tag <img>. Není to klasický tag s obsahem, ale takzvaný prázdný tag, který se zapisuje do kódu stránky.

Nejdůležitější atributy:

• src: Tento atribut udává cestu k souboru s obrázkem na vašem serveru. Je klíčový, protože bez správné cesty se obrázek na stránku nezobrazí. Cesta může být relativní (odpovídá umístění souboru vzhledem k HTML souboru) nebo absolutní (udává plnou adresu souboru).

   <img src="obrazky/můj_obraz.jpg" alt="Popisek obrázku">

  V tomto příkladu je obrazky/můj_obraz.jpg relativní cesta, což znamená, že soubor můj_obraz.jpg se nachází v podadresáři obrazky ve stejném adresáři jako HTML soubor.

• alt: Atribut alt slouží pro alternativní text. Je nezbytný pro uživatele s vypnutými obrázky (např. v prohlížečích s poškozeným zobrazením, nebo pro uživatele se zrakovým postižením, kteří používají čtečky obrazovky). Popis by měl být stručný, ale výstižný. V ideálním případě by popisoval, co obrázek znázorňuje.

   <img src="obrazky/můj_obraz.jpg" alt="Kočka ležící na sluníčku">

• Formáty souborů: Doporučujeme používat formáty JPEG (.jpg nebo .jpeg), PNG (.png) a GIF (.gif). Tyto formáty jsou široce podporované a poskytují dobrý kompromis mezi velikostí souboru a kvalitou obrázku. Volba formátu závisí na vašich konkrétních potřebách – například PNG se hodí pro obrázky s průhledným pozadím, zatímco JPEG je vhodný pro fotografie.

Příklad v kontextu HTML stránky:

<!DOCTYPE html>
<html>
<head>
<title>Příklad s obrázkem</title>
</head>
<body>
  <h1>Moje webová stránka</h1>

  <img src="obrazky/můj_obraz.jpg" alt="Příklad obrázku">

  <p>Níže je popsán obrázek detailněji.</p>
</body>
</html>

Důležité upozornění:

• Správná cesta: Ujistěte se, že cesta k obrázku je správná a že soubor s obrázkem skutečně existuje na serveru. Chybná cesta způsobí, že se obrázek na stránce nezobrazí.
• Optimální velikost: Pro rychlé načítání stránek je vhodné obrázky optimalizovat – použít kompresní nástroje, aby byly soubory co nejmenší.
• Responzivní design: V dnešní době je důležité, aby se obrázky správně zobrazovaly na různých zařízeních a rozlišeních. Používejte responzivní designové techniky, které upraví velikost obrázků na základě obrazovky.

Těmito tipy snadno vložíte obrázky na váš web a zajistíte, že budou vaše webové stránky krásné a uživatelsky přívětivé.