Grafika a obrázky na webu

4IZ268 – Webové technologie

Jirka Kosek

Poslední modifikace: 2022-10-14 09:49:39 UTC

Copyright © 2000–2020 Jiří Kosek

Úvod

Co to jsou multimédia

  • 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

Výhody

  • atraktivnější a zajímavější než statické stránky

  • pohodlnější a účinější vstřebávání informací

Nevýhody

  • 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

Umístění MM obsahu na stránku

  • 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í

Obrázky

Vkládání obrázků

  • 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

Grafické formáty

  • bitmapové × vektorové

  • bitmapové

    • GIF

    • JPEG

    • PNG

  • vektorové

    • po dlouhé době je dnes standardizován formát SVG

  • podpora v prohlížečích

Snižování velikosti obrázků

  • 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

GIF

  • 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

JPEG

  • pouze barevný režim TrueColor

  • ztrátová komprimace dat (vhodná především pro fotografie)

  • progresivní verze formátu (rychlejší zobrazení náhledu)

PNG

  • 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

Nové formáty

  • 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

SVG

Scalable Vector Graphics

  • 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

SVG

Ukázka zařazení přímo do stránky HTML5

<!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>

SVG

Zařazení externího obrázku

<!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>

Jak se dají použít obrázky na stránce

  • 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

Jak vytvářet obrázky

  • kliparty/fotobanky

  • skenování

  • grafický editor

Canvas

Canvas

  • 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 – ukázky

Srovnání Canvas vs. SVG

  Canvas SVG
Výhody

  • rychlý prostředek pro vykreslení jakéhokoliv 2D rastrového objektu

  • výsledek může být uložen jako obrázek (PNG/JPEG)

  • nezávislé na rozlišení

  • přímá podpora animací

  • možnost manipulace přes DOM a obsluha událostí
Nevýhody

  • operace jako animace nebo obsluha událostí je potřeba udělat „ručně“

  • horší přístupnost

  • složitější scény se vykreslují pomaleji

Responzivní obrázky

Problém

  • 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

Element picture

  • pomocí 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

Atributy srcset/sizes

  • historicky 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">

Další zdroje informací

Standardy W3C

SVG

Canvas