Obrazy w HTML5

Plansza interaktywna październik 2018

Elementy obraz, mapa i obszar
Element	Atrybuty i wartości specyficzne	Opis
<picture></picture>	globals	ilustracja^HTML5.1
<source> lub <source/>	globals, srcset, sizes, media, type	źródło^HTML5.1
<img> lub <img/>	globals, alt, src, crossorigin, usemap, ismap, width, height	obraz
<map></map>	globals, name	mapa
<area> lub <area/>	globals, alt, coords, shape, href, target, download, rel, hreflang, type	obszar

Artrybuty
Atrybut	Wartości	Opis
alt	Text	tekst alternatywny
coords	CDATA	współrzędne
crossorigin	anonymous\|use-credentials	konfigurowanie CORS^HTML5
download	CDATA	nazwa dla pliku pobranego^HTML5
height	Length (pixels \| %)	wysokość
href	URI	adres odwołania
ismap	ismap	współrzędne dodawane
name	NMTOKEN	nazwa
src	URI	adres zawartości
target	_blank \| _parent \|_self \| _top	okno otwieranego dokumentu
usemap	URIREF	nazwa mapy
shape	rect \| circle \| poly \| default	kształt mapy
width	Length (pixels \| %)	szerokość
srcset	URI	^HTML5.1
type	obowiązujący typ MIME	typ
media	media-query-list	obowiązujące reguły warunkowe
sizes	dane znakowe	rozmiar^HTML5

* Reguły mediów określone są w rekomendacji Typy mediów (ang. Media Queries) pod adresem URL: http://www.w3.org/TR/css3-mediaqueries/

Porównanie właściwości formatów obrazów
Cecha	JPEG	GIF	PNG
Półprzeźroczystość	-	-	+
Przeźroczystość	-	+	+
Animacja	-	+	-
Maksymalna liczba kolorów	16,7 milionów	256	16,7 milionów
Kompresja	stratna	bezstratna	bezstratna

Uwagi

Formaty: *.PCX, TIFF, *.RAW, *.CDR, *.AI, *.WMF, *.EPS nie są obsługiwane w elemencie img.

Planowane formaty: *.PDF, *.APNG, *.MNG, ...