Poslední modifikace: 2022-10-14 09:49:39 UTC
obrázky
zvuk
video
synchronizovaná multimédia
klipy složené z různých objektů (audio, video, obrázky, text)
průběh klipu se řídí časem případně interakcí s uživatelem
atraktivnější a zajímavější než statické stránky
pohodlnější a účinější vstřebávání informací
náročnost na přenosovou kapacitu sítě
HTML stránka má velikost v jednotkách KB
multimédia v desítkách, stovkách KB, video záznamy pak v MB
u některých médií jsou zvýšené nároky na výkon počítače (video)
finančně i časově náročné na vytváření
musíme najít kompromis mezi množstvím přenášených dat a požadavky na estetiku stránky
MM obsah je obvykle uložen v samostatných souborech ve speciálním formátu
do HTML stránky se vkládá pouze odkaz na externí soubor s MM obsahem
zpracování a přehrání MM dat
přímo prohlížečem (obrázky, základní zvukové formáty – s příchodem HTML5 prohlížeče přímo podporují i video)
nezávislou aplikací otevřenou v novém okně (video, …)
plug-in – nezávislá aplikace, která se tváří jako součást prohlížeče, MM obsah je přímo součástí stránky
kvůli bezpečnosti a stabilitě se od plug-inů upouští
podpora je součástí HTML již od jeho raných verzí
obrázek se vloží na místo elementu img
<img src="URL adresa obrázku"
alt="textový popis obrázku">atribut alt je
důležitý
ne všechny prohlížeče podporují grafiku
zrakově postižení
k podporovaným grafickým formátům se ještě vrátíme
aby se zamezilo přepočítávání layoutu stránky je vhodné u obrázků uvádět i atributy width a height
bitmapové × vektorové
bitmapové
GIF
JPEG
PNG
vektorové
po dlouhé době je dnes standardizován formát SVG
podpora v prohlížečích
zmenšení rozlišení (to ale nejde vždy)
snížení barevné hloubky (počtu použitých barev)
komprese
ztrátová (JPEG)
bezztrátová (GIF, PNG)
pro firemní loga, schémata apod. jsou úspornější vektorové formáty
nejpoužívanější formát
umožňuje vytvářet obrázky maximálně ve 256 barvách
není příliš vhodný pro zařazování naskenovaných fotografií na stránky
animované obrázky
jedna transparentní barva
prokládané obrázky (rychlejší náhled na pomalé lince)
dříve byly problémy s licencováním, ale platnost patentů již skončila
pouze barevný režim TrueColor
ztrátová komprimace dat (vhodná především pro fotografie)
progresivní verze formátu (rychlejší zobrazení náhledu)
původně náhrada formátu GIF (nebyl omezen patenty)
umožňuje vytvářet obrázky v mnoha barevných hloubkách včetně TrueColor (dokonce i 48bitový TrueColor), v odstínech šedi apod.
alfa-kanál – pro každý bod obrázku lze určit jeho průhlednost
neumožňuje tvorbu animovaných obrázků
prokládání obrázků je oproti GIFu ještě vylepšeno
postupně se objevují novější formáty, které nabízejí zejména podstatně účinější komprimaci
nejsou podporovány všemi prohlížeči, ale podporu lze většinou doplnit pomocí pluginu nebo JS knihovny
případně lze obrázek nabízet v několika variantách pomocí elementu picture
WebP
HEIF
AVIF
vektorový formát využívající XML syntaxi
obrázek se skládá ze základních grafických elementů jako úsečka, kružnice, text, …
může být uložen v samostatném souboru nebo přímo jako součást stránky HTML
možnost podle potřeby zvětšovat/zmenšovat
s obrázkem lze manipulovat pomocí rozhraní DOM a JavaScriptu
podpora v prohlížečích
vytváření obrázků v SVG – většinu vektorových editorů umí přímo exportovat do SVG
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ukázka SVG obrázku</title>
</head>
<body>
<h1>Vektorový obrázek v SVG</h1>
<svg width="200" height="300" xmlns="http://www.w3.org/2000/svg">
<desc>This is a blue circle with a red outline</desc>
<g>
<circle style="fill: blue; stroke: red" cx="200" cy="200" r="150"/>
<text x="100" y="50"
style="font-size: 36px; font-family: Verdana">Ahoj světe</text>
</g>
</svg>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Ukázka SVG obrázku</title>
</head>
<body>
<h1>Vektorový obrázek v SVG jako obrázek</h1>
<img src="svg.svg" alt="Obrázek kruhu">
<h1>Vektorový obrázek v SVG jako objekt</h1>
<object type="image/svg+xml" data="svg.svg"
width="100%" height="100%">
</object>
<h1>Vektorový obrázek v SVG jako plugin</h1>
<embed src="svg.svg" width="100%" height="100%"
pluginspage="http://www.adobe.com/svg/viewer/install/">
</embed>
<h1>Vektorový obrázek v SVG jako objekt
kompatibilní se staršími prohlížeči</h1>
<object type="image/svg+xml" data="svg.svg"
width="100%" height="100%">
<embed src="svg.svg" width="100%" height="100%"
pluginspage="http://www.adobe.com/svg/viewer/install/">
</embed>
</object>
</body>
</html>jako obrázek
jako odkaz
animovaný obrázek
s animacemi velice opatrně, jsou většinou dost rušivé
pozadí stránky
mělo by být dostatečně kontrastní vůči textu stránky
klikací mapa
kliparty/fotobanky
skenování
grafický editor
HTML5 přidává nový element canvas
canvas tvoří obdélníkovou oblast na obrazovce, kam lze pomocí Javascriptu cokoliv kreslit
vytvoření oblasti na stránce pomocí elementu
canvas
<canvas id="platno" width="600" height="300"></canvas>v Javascriptu je potřeba vybrat správné plátno a získat jeho kontext
var context = document.getElementById('platno').getContext("2d");
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 100);
context.stroke();prohlížeče podporují 2D i 3D (tzv. WebGL)
| Canvas | SVG | |
|---|---|---|
| Výhody |
|
|
| Nevýhody |
|
|
jak snadno nabízet odlišné obrázky pro různé situace (rozlišení, poměry stran, výřezy, ...)
mnohé problémy řeší vektorový formát SVG
vektorové formáty však nelze použít vždy
picturepomocí media queries můžeme specifikovat více alternativ jednoho obrázku pro různá média
<picture>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<source
srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>jednotlivé varianty obrázku se zadávají pomocí elementu source
kvůli zpětné kompatibilitě se používá i element img
ve starších prohlížečích lze používat díky polyfillu picturefill
srcset/sizeshistoricky předcházejí elementu picture a nejsou tak flexibilní
syntaxe je poměrně obskurní a vymyká se zvyklostem HTML
výběr obrázku podle denzity displeje:
<img src="big.jpg" srcset="big.jpg 1x, big-hd.jpg 2x">výběr obrázku podle šířky okna prohlížeče:
<img src="small.png" srcset="small.png 600w, medium.png 1024w, large.png 1600w">určení šířky a výběr obrázku podle layoutu:
<img src="small.png"
srcset="small.png 600w, medium.png 1024w, large.png 1600w"
sizes="(min-width: 768px) 300px, 100vw">Inkscape – open-source vektorový editor s nativní podporou SVG