Please enable JavaScript.
Coggle requires JavaScript to display documents.
Grafika a obrázky (Obrázky (SVG (XML syntaxe, Základní grafické elementy,…
Grafika a obrázky
Obrázky
Vkládání
Element
img
:!: Atribut
alt
Podpora prohlížečů grafiky
Zrakově postižení
:warning: Atributy
width
a
height
Grafické formáty
Bitmapové
GIF
JPEG
PNG
Vektorové
SVG
Podpora v prohlížečích
Snižování velikosti
Zmenšení rozlišení
Snížení barevné hloubky (počet barev)
Komprese
Ztrátová (JPEG)
Bezztrátová (GIF, PNG)
Vektorové formáty
Firemní loga
Schémata
GIF
Nejpoužívanější
Max. 256 barev
Naskenované fotografie
Animované obrázky
Jedna transparentní barva
Prokládané obrázky
JPEG
Barevný režim TrueColor
Ztrátová komprimace dat (fotografie)
Progresivní verze formátu (rychlejší zobrazení náhledu)
PNG
Původně místo GIF
Mnoho barevných hloubek
Odstíny šedi
Alfa-kanál
Animované obrázky
Vylepšené prokládání obrázků
SVG
XML syntaxe
Základní grafické elementy
V samostatném souboru
Součást HTML stránky
Možnost zvětšovat / zmenšovat
Manipulace pomocí DOM a JS
Podpora v prohlížečích
Použití na stránce
Obrázek
Odkaz
Animovaný obrázek
Pozadí
Klikací mapa
Canvas
HTML5
Obdélníková oblast
Kreslení pomocí JS
Element
Podpora pro 2D rasrtové plátno
Přidávání podpory pro 3D (tzv. WebGL)
Úvod
Co jsou
Obrázky
Zvuk
Video
Synchronizovaná multimédia
Klipy z různých objektů
Řídí se časem
:heavy_plus_sign: Výhody
Atraktivnější
Zajímavější
Pohodlnější účinnější vstřebávání informací
:heavy_minus_sign: Nevýhody
Náročnost na přenosovou kapacitu sítě
HTML - jednotky KB
Multimédia - desítky až stovky KB
Video - MB
Zvýšené nároky na výkon PC
Náročné na vytváření
Finančně
Časově
Kompromis
Množství přenášených dat
Požadavky na estetiku stránky
Umístění na stránku
Samostatně
Odkaz na externí soubor
Zpracování a přehrání
Prohlížečem
Nezávislou aplikací
Plug-in
Upouštění kvůli bezpečnosti
Responzivní obrázky
Element
picture
Media queries
Varianty - element
source
Zpětná kompatibilita - element
img
Všechny prohlížeče
Díky polyfillu
picturefill
Atributy SRCSET / SIZES
Předchází elementu
picture
Méně flexibilní
Obskurní syntaxe
Výběr podle
Denzity displeje
Šířky okna
Layoutu