Nová tištěná kniha o SEO
SEO Akademie Collabim
S láskou a vidinou klientů píše Collabim Nejpoužívanější český SEO nástroj

HTML tag : Vkládání obrázků na web

Základními stavebními kameny webových stránek jsou HTML tagy, kterých známe okolo 100 různých druhů. V následujícím článku se zaměříme na HTML tag <img>. Dočtete se, jak a ve spojení se kterými atributy se používá.

HTML tag <img> slouží k přidání obrázků na webové stránky. Technicky se nicméně nejedná o vložení, ale obrázky se s webovou stránkou pouze propojují. Značka tedy vytváří prostor pro odkazovaný obrázek.

Je pro vás SEO zatím velká neznámá a chcete se dozvědět, co to obnáší? Vydali jsme knihu, která obsahuje všechny základní informace a postupy, které pro SEO budete potřebovat. V knize najdete vysvětlení základních SEO pojmů, metody pro optimalizaci nebo třeba i to, jak SEO vyhodnocovat. Chci knihu Základy SEO: Jasně a stručně >>

Tag <img> má dva základní atributy:

  • src – určuje cestu k obrázku (je povinný) a může obsahovat buď název souboru nebo jeho URL,
  • alt – textový popis obrázku, tzv. alternativní text (není povinný, ale z hlediska SEO a UX je nesmírně užitečný).

Alternativní text se hodí obzvlášť v případě, pokud se obrázek z nějakého důvodu nenačte (např. chyba sítě, blokování obsahu atd.) nebo je třeba jej zobrazit zrakově handicapovanému uživateli. Vyhledávače také používají alt text k získání informací, co se na obrázku nachází. Prohlížeč zobrazí alt text také ve chvíli, kdy na obrázek najedete kurzorem.

HTML element <img> obsahuje pouze atributy a nepoužívá se u něj uzavírací značka (v XHTML ale tato značka uzavřená být musí). Tag je tedy nepárový. Z atributů lze kromě src a alt jmenovat mnoho dalších, kterými jej lze doplnit:

  • height – určuje výšku obrázku (v pixelech),
  • wight – určuje šířku obrázku (v pixelech),
  • crossorigin – používá se k importu obrázků z webů třetích stran umožňujích použití cross-origin přístupu,
  • sizes – používá se k určení velikostí obrázků pro různá rozvržení stránky
  • a další.

Praktické použití tagu <img> vypadá například následovně:

<img src="/obrazky/collabim-logo.jpg" alt="Logo Collabimu" width="140" height="100">

Definice výšky a šířky jednotlivě při každém použití tagu <img> však v dnešní době není tou nejideálnější možností. Daleko vhodnějším a praktičtějším je použití kaskádových stylů (CSS).

Obrázek lze také použít jako hypertextový odkaz. Za tímto účelem je třeba tag <img> propojit s tagem <a>. Pokud bychom chtěli použít obrázek loga SEO Akademie Collabimu k prokliknutí na příslušnou stránku, vypadalo by to v praxi nějak takto:

< a href = "https://www.collabim.cz/akademie/" > 
< img src = "seo-akademie-collabim-logo.jpg" height = "100" width = "100" > </ a >

Nejčastější formáty obrázků na webu

Na webových stránkách se potkáte s různými formáty obrázků. Mezi nejpoužívanější patří tyto:

  • JPEG – určený pro ztrátovou kompresi, používá se obvykle u fotografií,
  • PNG – pro bezztrátovou kompresi, lepší kvalita než JPEG,
  • GIF – dobrá volba pro jednoduché obrázky a animace,
  • SVG – vektorový formát obrázku,
  • AVIF – díky vysokému výkonu ideální i pro animace,
  • WebP – vhodný pro obrázky i animace, lepší komprese než JPEG a PNG.

Chyby při načítání obrázků

Dojde-li k chybě při načítání nebo vykreslování obrázku, pak je příčinou zpravidla jedna z následujících možností:

  • chyba sítě,
  • atribut src je prázdný,
  • adresa URL uvedená v scr vede na tutéž stránku, na které se uživatel právě nachází,
  • obrázek je poškozen,
  • metadata obrázku jsou poškozena, nelze tedy načíst jeho rozměry, a ani do atributů tagu <img> nebyly rozměry zadány,
  • obrázek je ve formátu, který váš prohlížeč nepodporuje,
  • HTML tagy nejsou použity správně.

S optimalizací obrázků souvisí i zpětné vyhledávání obrázků. O tom jak na Vyhledávání podle obrázku nebo fotky se dočtete v článku.

Více pro HTML odkazy se dočtete v článku HTML odkazy: definice, druhy a praktické SEO tipy na práci s nimi.

Autor: SEOPRAKTICKY.CZ

Použité zdroje

  1. HTML img tag. W3Schools Online Web Tutorials [online]. Dostupné z: https://www.w3schools.com/tags/tag_img.asp
  2. <img>: The Image Embed element – HTML: HyperText Markup Language | MDN. [online]. Copyright ©1998 [cit. 17.04.2023]. Dostupné z: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
  3. HTML <img> Tag – GeeksforGeeks. GeeksforGeeks | A computer science portal for geeks [online]. Dostupné z: https://www.geeksforgeeks.org/html-img-tag/
  4. HTML Image – javatpoint. Tutorials List – Javatpoint [online]. Copyright © Copyright 2011 [cit. 17.04.2023]. Dostupné z: https://www.javatpoint.com/html-image
  5. HTML <img> Tag. W3docs | Tutorials, Quizzes, Certificates, Frameworks, Solutions [online]. Copyright © W3docs. All rights reserved. [cit. 18.04.2023]. Dostupné z: https://www.w3docs.com/learn-html/html-img-tag.html
Nemáte představu, kolik tržeb ze SEO Vašemu webu či e-shopu měšíčně utíká? Rádi Vám budeme věnovat čas osobně. Ukážeme Vám, o kolik peněz byste mohli každý měsíc vydělat více jen díky SEO! A to ZDARMA. Chci konzultaci ZDARMA >>

Další články

Jak se hýbe český internet? Sledujte denní statistiky!

Zobrazit