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.
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
- HTML img tag. W3Schools Online Web Tutorials [online]. Dostupné z: https://www.w3schools.com/tags/tag_img.asp
- <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
- HTML <img> Tag – GeeksforGeeks. GeeksforGeeks | A computer science portal for geeks [online]. Dostupné z: https://www.geeksforgeeks.org/html-img-tag/
- HTML Image – javatpoint. Tutorials List – Javatpoint [online]. Copyright © Copyright 2011 [cit. 17.04.2023]. Dostupné z: https://www.javatpoint.com/html-image
- 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
