Obrazy w HTML5

Plansza interaktywna październik 2018

URL:
http://www.plotkarka.eu/Pi/html5/obrazy.html
Autor:
Radosław Kowaluk

Obrazy i mapy

Pierwsze zdjęcie w Internecie - 18 lipca 1992

Les Horribles Cernettes
Elementy obraz, mapa i obszar
Element Atrybuty i wartości specyficzne Opis
<picture></picture> globals ilustracjaHTML5.1
<source> lub <source/> globals, srcset, sizes, media, type źródłoHTML5.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

Typy plików

Atrybuty

Artrybuty
Atrybut Wartości Opis
alt Text tekst alternatywny
coords CDATA współrzędne
crossorigin anonymous|use-credentials konfigurowanie CORSHTML5
download CDATA nazwa dla pliku pobranegoHTML5
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 rozmiarHTML5

Hiperłącze graficze i mapy

Wartości atrybutów

Wartości atrybutów
Wartość Opis
anonymous ?HTML5
rect prostokąt {coords(x1,y1,x2,y2)}
CDATA dane znakowe
circle koło {coords(x,y,r)}
ContentType typ zależny od kontekstu
NMTOKEN tekst
poly wielokąt {coords(x1,y1,x2,y2, x3,y3 ...)}
default cały obszar
Text tekst
Length (pixels | %) liczba pikseli lub procent
ismap współrzędne dodawane
URI identyfikator zasobów
URIREF identyfikator odwołania
use-credentials ?HTML5
_blank nowe okno
_parent macierzyste okno
_self aktualne okno
_top główne okno
media-query-list Reuły mediów*

* 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/

Zapis binarny - base64

Porównanie właściwości formatów obrazów
CechaJPEGGIFPNG
Półprzeźroczystość--+
Przeźroczystość-++
Animacja-+-
Maksymalna liczba kolorów16,7 milionów25616,7 milionów
Kompresjastratnabezstratnabezstratna

Uwagi

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

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

Nowe elementy