Kuva, ääni ja video verkossa

ITKP1011 Web-julkaiseminen · korjattu laitos

Luennolla perehdytään siihen, millaisin tekniikoin kuvaa, ääntä ja videota voidaan liittää WWW-sivulle. Kuvankäsittelyä ei tässä materiaalissa käsitellä vaan oletetaan, että perusteet ovat hallinnassa. Tarvittaessa voit kerrata kuvankäsittelyluennolla.

Median liittämisessä WWW-sivulle on otettava huomioon kolme asiaa:

• Sivuston olennainen sisältö pitää olla saavutettavissa ilman mediaobjekteja. Kuvilla on oltava korvaava teksti ja videoilla tekstitykset.
• Median formaatin pitää olla sopiva kohderyhmälle.
• Median tiedostokoko on pyrittävä tiivistämään mahdollisimman pieneksi.

1. Linkittäminen

Kuvan, äänen tai videon saa WWW-sivulle yksinkertaisimmillaan lisäämällä sivulle linkin (a-elementti), joka viittaa kyseiseen tiedostoon. Linkin avulla käyttäjä voi avata tiedoston tai tallentaa sen omalle koneelleen.

Kerro linkkitekstissä, mihin linkki vie ja millainen tiedosto on kyseessä. Suuren tiedoston koko on kohteliasta mainita.

<p><a href="luentotallenne.mp4">Luentotallenne</a> (MP4, 240 Mt)</p>

2. Upottaminen

Upottamisella tarkoitetaan kuvan, videon tai äänen liittämistä suoraan WWW-sivulle. Objekti ei sisälly HTML-tiedostoon kuten esimerkiksi Word-dokumenttiin, vaan tarvitaan viite erilliseen tiedostoon. Selain näyttää objektin suoraan sivulla, jos osaa.

2.1 MIME-tyypit

MIME-tyypit ovat sähköpostissa ja HTTP-protokollassa käytetty tapa ilmaista, mitä mediatyyppiä annettu tieto on ja miten selaimen pitäisi se käsitellä.

Mediatyyppiä ei pidä yrittää päätellä tiedoston päätteestä, vaan ratkaisevaa on se, minkä tyypin palvelin ilmoittaa. Tyyppiä ei voi määrätä HTML-koodissa, vaan se asetetaan WWW-palvelimen asetuksissa. Väärä MIME-tyyppi on tavallinen syy siihen, ettei video toistu tai että selain tarjoaa tiedostoa ladattavaksi sen sijaan että näyttäisi sen.

3. Kuvat

3.1 Kuvaformaatit

Kuvat on pienennettävä kuvankäsittelyohjelmalla riittävän pieniksi ennen julkaisua, ja muokkaus on tehtävä aina alkuperäiskuvasta lähtien. Pakkaamattomat bittikarttaformaatit kuten TIFF ja BMP eivät sovi verkkoon.

SVG

SVG on XML-pohjainen vektorigrafiikan kuvauskieli. Koska kuva on kuvattu muotoina eikä pikseleinä, se skaalautuu tarkkana mihin kokoon tahansa. SVG-kuvan ulkoasua voi muokata CSS:llä, ja sitä voi myös animoida. Katso CSS-lisäesimerkin luku 5.

Vektorigrafiikkaa voi piirtää Inkscapella, joka osaa myös muuntaa kuvia vektoriformaattien välillä.

3.2 img-elementti

Kuva upotetaan dokumenttiin img-elementillä.

<img src="puukuva800.jpg"
     alt="Kaatunut puu makaa matalassa vedessä"
     width="800" height="533"
     loading="lazy" />

3.3 Sama kuva useassa koossa: srcset ja sizes

Puhelimessa ei kannata ladata 1600 pikseliä leveää kuvaa, jos näytölle mahtuu 400. srcset-attribuutilla kerrotaan selaimelle, mitä kokoja on tarjolla, ja sizes-attribuutilla se, kuinka leveänä kuva aiotaan näyttää. Selain valitsee sopivimman.

<img src="puukuva800.jpg"
     srcset="puukuva400.jpg   400w,
             puukuva800.jpg   800w,
             puukuva1600.jpg 1600w"
     sizes="(max-width: 40em) 100vw, 40em"
     alt="Kaatunut puu makaa matalassa vedessä"
     width="1600" height="1067" />

3.4 picture-elementti

picture-elementillä tarjotaan sama kuva useassa eri formaatissa tai eri tavalla rajattuna eri näytöille. Selain käy source-elementit läpi järjestyksessä ja käyttää ensimmäistä, jonka se osaa esittää ja jonka mediakysely täsmää. Jos mikään ei kelpaa, se käyttää sisällä olevaa img-elementtiä.

Tärkein käyttötapa on uuden formaatin tarjoaminen turvallisesti: selaimet, jotka osaavat AVIF- tai WebP-kuvan, saavat pienemmän tiedoston, ja muut saavat JPEG-version.

<picture>
  <source type="image/webp"
          srcset="puukuva400.webp 400w, puukuva800.webp 800w, puukuva1600.webp 1600w"
          sizes="(max-width: 40em) 100vw, 40em" />
  <img src="puukuva800.jpg"
       srcset="puukuva400.jpg 400w, puukuva800.jpg 800w, puukuva1600.jpg 1600w"
       sizes="(max-width: 40em) 100vw, 40em"
       alt="Kaatunut puu makaa matalassa vedessä"
       width="1600" height="1067" />
</picture>

Alla oleva kuva on toteutettu näin. Kokeile kaventaa selainikkunaa ja katso kehittäjätyökalujen verkkonäkymästä, minkä tiedoston selain hakee.

3.5 object-elementti

object-elementillä voi liittää dokumenttiin periaatteessa mitä tahansa objekteja. Jos selain ei osaa esittää tiedostoa, elementin sisään sijoitettu sisältö näytetään sen sijaan.

<p>
  <object type="image/svg+xml" data="hazor1e.svg">
    <img src="hazor1e.gif" alt="Vektorigrafiikalla piirretty ukkeli" />
  </object>
</p>

object-elementtiä tarvitsee nykyään harvoin. Käytä mieluummin picture-, video-, audio- tai iframe-elementtiä. Sama koskee vanhaa embed-elementtiä.

4. Video

Videoita voidaan välittää joko suoratoistona (stream) tai kokonaisina tiedostoina (download).

4.1 Videon ominaisuuksia

Video on aina pakattava häviöllisesti, sillä pakkaamaton liikkuva kuva veisi valtavasti tilaa. Verkossa välitettävä video pakataan vielä tiiviimmin, koska yhteyden nopeus on rajoittava tekijä.

4.2 Säiliömuoto ja kodekki

Nämä kaksi käsitettä menevät helposti sekaisin, ja niiden ero on olennainen.

• Säiliömuoto (container) määrää, miten kuva, ääni, tekstitykset ja metatiedot pakataan yhteen tiedostoon. Säiliömuodon näkee yleensä tiedostopäätteestä.
• Kodekki (codec) määrää, millä menetelmällä itse kuva- tai äänidata on pakattu. Yhdessä säiliössä voi olla eri kodekeilla pakattua sisältöä.

Sama .mp4-tiedosto voi siis sisältää videon, jonka toinen selain toistaa ja toinen ei, riippuen siitä millä kodekilla se on pakattu.

4.3 video-elementti

Oman videotiedoston voi liittää sivulle video-elementillä aivan samaan tapaan kuin img-elementillä liitetään kuvia.

Yksinkertaisimmillaan riittää kaksi attribuuttia:

<video controls="controls" src="itkp1011_testi.mp4"></video>

Kunnollisessa toteutuksessa tarjotaan useampi formaatti, esikatselukuva ja tekstitykset:

<video controls="controls" poster="esikatselu.jpg" preload="metadata" width="1280" height="720">
  <source src="luento.webm" type="video/webm" />
  <source src="luento.mp4"  type="video/mp4" />
  <track src="luento.vtt" kind="captions" srclang="fi" label="Suomi" default="default" />
  <p>Selaimesi ei osaa toistaa videota.
     <a href="luento.mp4">Lataa video (MP4, 240 Mt)</a>.</p>
</video>

video-elementti säilyttää oikean kuvasuhteen automaattisesti, joten CSS:ssä riittää määritellä leveys. Korkeus tulee oikein itsestään.

video {
  max-width: 100%;
  height: auto;
}

Elementille on olemassa myös width- ja height-attribuutit. Kerro niissä videon todelliset mitat, jotta sivu ei hyppää latauksen aikana, ja säädä näyttökoko CSS:llä.

4.4 Tekstitykset

Videon tekstitykset ovat saavutettavuusvaatimus. Ne ovat välttämättömät kuulovammaiselle, mutta hyödyttävät myös meluisassa ympäristössä katsovaa ja sitä, joka opiskelee vieraalla kielellä. Tekstitys liitetään track-elementillä, ja tiedostomuoto on WebVTT.

<track src="luento.vtt" kind="captions" srclang="fi" label="Suomi" default="default" />

WebVTT-tiedosto on tavallinen tekstitiedosto, jonka voi kirjoittaa vaikka Visual Studio Codella:

WEBVTT

00:00:00.000 --> 00:00:04.500
Tervetuloa Web-julkaiseminen-kurssin luennolle.

00:00:04.500 --> 00:00:09.000
Tänään käsittelemme kuvan, äänen ja videon liittämistä sivulle.

4.5 YouTube-videon upottaminen

Omien videoiden sijoittaminen YouTubeen ja upottaminen sieltä on yleensä parempi vaihtoehto kuin videotiedoston pitäminen omalla palvelimella: palvelu hoitaa pakkaamisen useaan laatuun, kaistan ja tekstitykset.

Tarvittavan koodin saa YouTubesta videon omalta sivulta valitsemalla Jaa ja sitten Upota. Koodi on seuraavaa muotoa:

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/3u1S8VBlMAA"
        frameborder="0" allowfullscreen></iframe>

Huomaa, että iframe-elementissä käytetty osoite ei ole sama kuin videon suora osoite. YouTuben antama koodi ei ole suositusten mukainen, ja siitä kannattaa korjata kolme asiaa.

Korjattu versio:

<iframe class="youtube"
        src="https://www.youtube.com/embed/3u1S8VBlMAA"
        title="Kuva, ääni ja video verkossa, luentovideo"
        allow="fullscreen" loading="lazy"></iframe>

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

5. Ääni

Ääni upotetaan sivulle samaan tapaan kuin video, mutta audio-elementillä.

<audio controls="controls">
  <source src="musa.opus" type="audio/ogg" />
  <source src="musa.mp3"  type="audio/mpeg" />
  <p>Selaimesi ei osaa toistaa ääntä. <a href="musa.mp3">Lataa tiedosto</a>.</p>
</audio>

Puhetallenteille pätee sama saavutettavuusvaatimus kuin videolle: tarjoa myös tekstivastine. Äänitiedostoon ei voi liittää tekstitystä, joten kirjoita litterointi sivulle tai linkitä se erillisenä tiedostona.

6. Tekijänoikeudet

Kuva, video ja musiikki ovat tekijänoikeuden suojaamia teoksia. Suoja syntyy automaattisesti teoksen luomishetkellä: mitään merkintää ei tarvita, eikä merkinnän puuttuminen tarkoita, että teos olisi vapaasti käytettävissä. Se, että kuva löytyy hakukoneella, ei anna mitään oikeutta käyttää sitä.

6.1 Creative Commons -lisenssit

Creative Commons on joukko valmiita lisenssejä, joilla tekijä antaa etukäteen luvan käyttää teostaan tietyin ehdoin. Lisenssi koostuu ehtolyhenteistä.

Esimerkiksi CC BY-SA tarkoittaa, että teosta saa käyttää ja muokata, kunhan tekijä mainitaan ja lopputulos julkaistaan samalla lisenssillä.

6.2 Lähdemerkintä

Kun lisenssi vaatii tekijän mainitsemisen, merkitse neljä asiaa: teoksen nimi, tekijä, lähde ja lisenssi. Kuvateksti on luonteva paikka.

<figure>
  <img src="jyvasjarvi.jpg" alt="Jyväsjärvi auringonlaskussa" />
  <figcaption>
    Kuva: <a href="https://example.org/kuvat/123">Jyväsjärvi</a>,
    Matti Meikäläinen,
    lisenssi <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
  </figcaption>
</figure>

6.3 Mistä aineistoa löytää

• Openverse hakee avoimesti lisensoituja kuvia ja ääniä useasta lähteestä kerralla ja näyttää lisenssin.
• Wikimedia Commons, laaja ja lisenssitiedoiltaan huolellinen.
• Unsplash ja Pexels, valokuvia omalla käyttöluvallaan. Lue ehdot: ne eivät ole Creative Commons -lisenssejä.

7. Tulostettavaksi tarkoitetut dokumentit

PDF-muotoa käytetään, kun dokumentin ulkoasun halutaan pysyvän täsmälleen halutunlaisena. Kaikki nykyselaimet näyttävät PDF-tiedostot suoraan, joten erillistä lukuohjelmaa ei tarvita. PDF-tiedostoja voi tuottaa lähes millä tahansa tekstinkäsittelyohjelmalla, muun muassa Wordilla, LibreOfficella ja LaTeXilla.

Verkkosivulla julkaistua PDF-tiedostoa koskevat samat saavutettavuusvaatimukset kuin sivua itseään. Käytännössä se tarkoittaa kolmea asiaa:

• Tiedosto on tuotettava ohjelmasta, joka säilyttää rakenteen, eikä skannaamalla. Skannattu PDF on pelkkä kuva, josta ruudunlukija ei saa mitään.
• Otsikkotyylit on merkittävä alkuperäisessä dokumentissa, jolloin ne siirtyvät PDF-tiedostoon rakenteena.
• Kuville on annettava vaihtoehtoinen teksti jo alkuperäisessä dokumentissa.

8. Lisätietoa

• MDN: Images in HTML ja Responsive images.
• MDN: Video and audio content.
• MDN: Media types and formats, kattava selvitys säiliömuodoista ja kodekeista.
• MDN: WebVTT, tekstitystiedoston muoto.
• Creative Commons -lisenssit.
• Saavutettavuusvaatimukset.fi.