---
title: Tietoisku HTML5-banneriaineistoista
date: 2019-10-29T08:37:00Z
modified: 2025-04-02T09:14:46Z
permalink: "https://oddydigital.fi/blogi/tietoisku-html5-banneriaineistoista/"
type: post
status: publish
excerpt: HTML5 (Hypertext Markup Language) tarjoaa mainostajalle mahdollisuuden tehdä näyttäviä, toiminnallisia mainosmuotoja desktopiin, mobiiliin ja tablettiin. Suosittelemme vahvasti animoitujen ja toiminnallisten aineistojen tekemistä HTML5 -muotoon. Lue lisää.
wpid: 19960
categories:
  - Blogi
  - Digitaalinen markkinointi
  - Graafinen suunnittelu
tags:
  - Blogi
  - Digitaalinen markkinointi
  - Graafinen suunnittelu
  - Bannerituotanto
  - Materiaalituotanto
featured_image: "https://oddydigital.fi/wp-content/uploads/2019/10/oddy-html5-bannerit.jpg"
featured_image_alt: Oddy HTML5 bannerit
timestamp: 2025-04-02T09:14:46Z
---

### Tietoisku HTML5-banneriaineistoista

HTML5-bannerit (Hypertext Markup Language) tarjoaa mainostajalle mahdollisuuden tehdä näyttäviä, toiminnallisia mainosmuotoja desktopiin, mobiiliin ja tablettiin. Toiminnallisilla mainoksilla on huomattavasti positiivisempi brändimielikuva verrattuna staattisiin bannereihin ja niihin reagoidaan klikkaamalla myös herkemmin kuin perinteisiin still-bannereihin. HTML5-bannereiden avulla saat täydet tehot irti ostetusta mainospaikasta.

## Avainsanat: 

## Animoidut bannerit ovat vetovoimaisia

Banneriaineistot voidaan toimittaa kuva- (png, gif ja jpg) tai HTML5 -muodossa. Suosittelemme vahvasti animoitujen ja toiminnallisten aineistojen tekemistä HTML5 -muotoon.

Periaatteessa animaatiota sisältävien bannereiden tekeminen on helppoa. Varsinainen haaste voi tulla kuitenkin vastaan, kun banneri on valmis ja se julkaistaan, miten banneri saadaan toimimaan erilaisten mainosjärjestelmien kanssa. Oikein tehdyt HTML5-bannerit saadaan toimimaan hyvin erilaisten mainosjärjestelmien kanssa.

HTML5-aineiston ensilatauksen maksimikoko tuplasti suurempi verrattuna perinteisen kuva-aineiston maksimikokoon. Esimerkiksi boksi 300×250 px jpg/png-kuvatiedoston maksimikoko on 40 kt, kun taas vastaavan HTML5- aineiston ensilatauksen maksimikoko on yleensä 80-100 kt. Tämä mahdollistaa toiminnallisuuksien helpomman upottamisen banneripintaan ilman, että bannerista tulee liian raskas.

## Miksi toiminnalliset HTML5-bannerit?

1. Huomattavasti positiivisempi brändimielikuva
2. Toiminnallisia bannereita klikataan herkemmin
3. Täydet tehot irti ostetusta mainospaikasta
4. HTML5-aineiston ensilataus voi olla painoltaan jopa tuplasti suurempi verrattuna kuva-aineistoon
5. Erotu kilpailijoistasi, harva ymmärtää hyötyjä tai osaa tuottaa HTML5-aineistoja
6. Oikein tehdyt HTML5-bannerit saadaan toimimaan hyvin erilaisten mainosjärjestelmien kanssa

## HTML5 esimerkkitoteutuksia – Klikkaa ja katso!

- [Vuokatti Sport – Ensilumi 2019 – 980×400 px](https://oddydigital.fi/wp-content/uploads/2019/10/html5_vuokatti-sport_980x400.mov)
- [Vuokatti Sport – Perheloma 2019 – 300×600 px](https://oddydigital.fi/wp-content/uploads/2019/10/html5_vuokatti-sport_perheloma2019_300x600.mov)
- [JOT Automation – Testing 2019 – 336×280 px](https://oddydigital.fi/wp-content/uploads/2019/10/jot-automation_testing_336x280.mov)

## HTML5 aineisto-ohjeet

HTML5-bannerit ovat käytännössä sivuun linkitettyjä omia HTML-sivuja. Ne eivät saisi hidastaa eikä häiritä isäntäsivun toimintaa. Aineisto-ohjeissa kerrotaan, millaisia JavaScript kirjastoja saa käyttää tai mitä funktioita ei pitäisi käyttää. Miten linkit tehdään ja kaikkea vastaavaa teknistä. Aineisto-ohjeet kattavat periaatteet, joita bannereiden on noudatettava. Selkeitä käytännön ohjeita HTML5-bannereiden tekoon ei ole juurikaan tarjolla. HTML5 aineistoja ei kovinkaan moni osaa vielä tehdä, minkä vuoksi hyvin usein mainostajat joutuvat kääntymään taitavan graafikon puoleen.

IAB on laatinut [yleiset HTML5-ohjeet](https://www.iab.fi/media/pdf-tiedostot/standardit-ja-oppaat/html5_ohjeistus_iab_finland.pdf).

Lataa tästä [HTML5 -aineisto-ohje Google AdManageriin](https://support.google.com/admanager/answer/7046799?hl=en).

 <a role="button">
 Tutustu bannerituotannon palveluihimme
 </a>

## Tutustu myös blogeihimme aiheesta