# Animoitu sähköpostin yläkuva: nopea ja toimiva GIF

[Canonical HTML page](https://gradiently.design/fi/guide/animated-email-header)

Liike sähköpostin alussa huomataan, mutta postilaatikot ovat tarkkoja. Hyvä animoitu yläkuva on kevyt, lyhyt ja täysin ymmärrettävä silloinkin, kun se ei liiku.

## The short version

- Animoitu sähköpostin yläkuva on lähes aina GIF, sillä useimmat sähköpostiohjelmat näyttävät GIF-animaatioita ja harvat videoita.
- Jotkin Windowsin Outlook-työpöytäversiot näyttävät vain GIFin ensimmäisen ruudun, joten sen on toimittava kokonaisena suunnitelmana.
- Tavallinen yläkuvan koko on 1200×600 pikseliä, näytettynä 600 pikselin levyisenä terävyyden säilyttämiseksi tiheillä näytöillä.
- GIFin keveys merkitsee, sillä suuret kuvat latautuvat hitaasti mobiilidatalla. Lyhyt vähäliikkeinen silmukka painaa vähiten.
- Tarjoukset, päivät ja painikkeet kuuluvat oikeaan HTML-tekstiin yläkuvan alle, eivät vain animaation sisään.

**Animoitu sähköpostin yläkuva** kannattaa tehdä GIFinä noin koossa 1200×600, näyttää 600 pikselin levyisenä ja pitää lyhyenä ja kevyenä. Ensimmäisen ruudun pitää toimia valmiina suunnitelmana yksinään. Juuri tämä unohtuu usein: jotkin Windowsin Outlook-työpöytäversiot näyttävät vain ensimmäisen ruudun, ja kuvat estänyt lukija näkee vain vaihtoehtoisen tekstin. Suunnittele ensin heille ja lisää liike bonuksena muille.

## Miksi animoitu yläkuva on GIF

Sähköpostin videotuki on harvinaista ja epäluotettavaa. Animoitu GIF on kuvamuoto, joka näkyy useimmissa ohjelmissa Apple Mailista Gmailiin. Uudempien muotojen kuten animoidun WebP:n tuki on hajanaisempaa. Siksi GIF on käytännöllinen valinta rajoineen: enintään 256 väriä ruutua kohden ja videota suuremmat tiedostot. Rajat ohjaavat suunnittelua. Koko vertailu: [GIF ja MP4](https://gradiently.design/fi/guide/gif-vs-mp4).

| Asetus | Suositus | Miksi |
| --- | --- | --- |
| Muoto | GIF | Toistuu useimmissa sähköpostiohjelmissa, video ei |
| Suunnittelukoko | 1200×600 px | Kaksinkertainen näyttöleveys tiheiden näyttöjen terävyyteen |
| Näyttöleveys | 600 px | Sähköpostin tavallinen runkoleveys |
| Silmukan kesto | 2-5 sekuntia | Lyhyt silmukka on kevyt ja tuntuu silti elävältä |
| Kuvataajuus | 10-15 fps | Riittävän tasainen väriliikkeeseen ja yksinkertaisiin paljastuksiin |
| Tiedostokoko | Mahdollisimman kevyt | Suuri yläkuva latautuu hitaasti mobiilidatalla |

Nopeasti latautuvan terävän yläkuvan lähtöarvot. Jos keveys voittaa terävyyden, vie GIF 600 px leveänä.

## Suunnittele ensimmäinen ruutu varaversioksi

Ajattele ensimmäistä ruutua sähköpostin yläkuvana ja animaatiota lisänä. Jos sanat ilmestyvät tyhjästä, Outlook-lukija näkee tyhjän värilaatikon. Jos tuote tulee kahden sekunnin kohdalla, hän ei näe sitä. Laita kaikki tärkeä ensimmäiseen ruutuun ja anna liikkeen tapahtua ympärillä.

Uutiskirjeen yläkuva Lokakuun numero ja pieni Kenttämuistiinpanoja-tunniste liukuvärillä

Ensimmäinen ruutu on täydellinen. Kaikki sanat ovat paikallaan, joten vain sen näkevä ei menetä mitään.

Sama uutiskirjeen yläkuva myöhemmin silmukassa, muuttunut liukuväri paikallaan pysyvien sanojen takana

Silmukan keskellä sanat pysyvät ja väri muuttuu niiden takana. Liike tuo tunnelmaa, ei tietoa.

- **Sanat paikallaan, tausta liikkeessä.** Liikkuva väri kiinteän otsikon takana on luotettavin animoitu yläkuva.
- **Yksi pieni liike.** Vaihtuva sana, itsensä alleviivaava viiva tai pehmeä valosiirtymä. Yksi idea yläkuvaa kohden.
- **Palaa lähtöpisteeseen.** Alkuun hyppäävä silmukka näyttää rikkinäiseltä. Liitä loppuruutu alkuun kuten [saumattomassa videosilmukassa](https://gradiently.design/fi/guide/seamless-loop-video).
- **Ei välkkymistä.** Muuta kirkkautta hitaasti. Nopea välke on epämiellyttävää ja voi olla haitallista.

## Pidä GIF kevyenä

Suurin osa GIFin painosta syntyy ruutujen välillä muuttuvista pikseleistä. Koko kuvan liike tekee raskaan tiedoston. Hidas liukuväri paikallaan olevien sanojen takana on kevyempi, sillä pakkaaja voi tallentaa vain muutokset. Leveyden puolittaminen vähentää pikselit noin neljännekseen. Päätä ajoissa tarvitaanko 1200 px vai riittääkö 600 px.

1. **Suunnittele koossa 1200×600** Asettele kaikki sanat ensimmäiseen ruutuun.
2. **Pidä silmukka lyhyenä** Kahdesta viiteen sekuntia niin, että jokainen liike tekee kokonaisen kierroksen.
3. **Vie GIFinä, 10-15 fps** Käytä animaatiosta tehtyä palettia, älä yleispalettia.
4. **Tarkista tiedostokoko** Jos se on raskas, kokeile 600 px leveyttä, harvempia ruutuja tai vähempää liikettä ennen laadun alentamista.
5. **Tarkista ensimmäinen ruutu yksin** Avaa GIF vain ensimmäistä ruutua näyttävässä katselimessa tai lähetä testi Windowsin Outlookiin.

Tarkat vientikomennot, paletti ja rasterointiasetukset löytyvät [animoiduista GIFeistä](https://gradiently.design/fi/guide/gif-maker-tips).

## Animoidun sähköpostiyläkuvan HTML

Toteuta yläkuva tavallisena kuvana taulukon solussa. Määritä näyttöleveys sekä attribuutissa että tyylissä, jotta kaikki ohjelmat mitoittavat sen oikein. Lisää kuvaava vaihtoehtoinen teksti ja soluun GIFin ensimmäistä ruutua vastaava taustaväri. Kuvien ollessa estettyjä lukija näkee värisi ja sanasi tyhjän laatikon sijaan.

```html
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td bgcolor="#2e1065" style="background-color:#2e1065;">
      <img src="https://example.com/header-october.gif"
           width="600" height="300"
           alt="The October issue: new work, three reads and a studio update"
           style="display:block; width:100%; max-width:600px; height:auto; border:0;
                  color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
    </td>
  </tr>
</table>
```

1200×600-GIF näytetään koossa 600×300. Soluväri vastaa ensimmäistä ruutua, ja muotoiltu vaihtoehtoinen teksti näkyy ilman kuvia.

> **Oikea teksti yläkuvan alla** Laita tarjous, päivä ja painike oikeana HTML-tekstinä kuvan alle. Se näkyy ilman kuvia, toimii ruudunlukijalla ja postilaatikon haussa sekä pysyy terävänä kaikissa koissa.

## Tumma tila ja kuvien esto

Tumma tila voi muuttaa yläkuvan ympäristön värejä mutta jättää itse kuvan yleensä ennalleen. Täysi oma taustaväri toimii molemmissa tiloissa. Läpinäkyvä tai valkoinen reuna voi tehdä kirkkaan laatikon tummalle näytölle. Kuvan takaiset CSS-liukuvärit eivät toimi luotettavasti kaikissa ohjelmissa. Sisällytä liukuväri GIFiin ja käytä tasaväriä varalla. [Liukuvärit sähköpostissa](https://gradiently.design/fi/guide/gradients-in-email) esittelee vaihtoehdot.

### Vältä

- Vasta ensimmäisen ruudun jälkeen ilmestyviä sanoja
- Raskasta GIFiä jossa koko kuva liikkuu
- Tummaan tilaan sopimattomia läpinäkyviä reunoja
- Tyhjää tai yleistä vaihtoehtoista tekstiä kuten ”yläkuva”
- Tarjousta ja painiketta vain kuvan sisällä

### Tee

- Ensimmäinen ruutu kokonaiseksi suunnitelmaksi
- Paikallaan olevat sanat hitaasti liikkuvalle värille
- Täysi taustaväri kuvan sisään
- Yläkuvan viestin kertova vaihtoehtoinen teksti
- Oikea HTML-teksti kaikkeen toimintaan johtavaan

Gradientlyssä voit suunnitella sähköpostin yläkuvan oikeassa koossa liikkuvalle Markille, pitää sanat paikallaan ja viedä Pron GIFinä. Koska tausta on ainutlaatuinen omistamasi Mark, yläkuva näyttää brändiltäsi eikä muiden uutiskirjeiden pohjalta. Still-kuvia ja asettelua käsittelee [sähköpostin yläkuvan suunnittelu](https://gradiently.design/fi/guide/email-header-design).

## FAQ

### Toimivatko GIF-animaatiot sähköpostissa?

Useimmissa ohjelmissa kyllä. Jotkin Windowsin Outlook-työpöytäversiot näyttävät vain ensimmäisen ruudun, joten suunnittele se toimimaan yksin.

### Minkä kokoinen animoidun sähköpostiyläkuvan pitää olla?

Suunnittele 1200×600 pikselissä ja näytä 600 pikselin levyisenä. Jos keveys on tiheiden näyttöjen terävyyttä tärkeämpää, vie GIF koossa 600×300.

### Voinko käyttää videota sähköpostin yläkuvassa?

Vain harvat sähköpostiohjelmat toistavat videota, joten se ei ole luotettava valinta. Käytä GIF-animaatiota tai videoon linkittävää still-kuvaa.

### Miksi sähköpostini GIF ei liiku Outlookissa?

Jotkin Windowsin Outlook-versiot näyttävät vain ensimmäisen ruudun. Se on ohjelman rajoitus, joten ensimmäisen ruudun pitää kertoa koko viesti.

### Miten pienennän sähköpostin GIF-tiedostoa?

Lyhennä silmukkaa, laske kuvataajuus noin 10-15 fps:ään, pidä suurin osa kuvasta paikallaan ja harkitse 600 px leveyttä.