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

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.

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ä.

• 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.
• 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. 1

   Suunnittele koossa 1200×600

   Asettele kaikki sanat ensimmäiseen ruutuun.

2. 2

   Pidä silmukka lyhyenä

   Kahdesta viiteen sekuntia niin, että jokainen liike tekee kokonaisen kierroksen.

3. 3

   Vie GIFinä, 10-15 fps

   Käytä animaatiosta tehtyä palettia, älä yleispalettia.

4. 4

   Tarkista tiedostokoko

   Jos se on raskas, kokeile 600 px leveyttä, harvempia ruutuja tai vähempää liikettä ennen laadun alentamista.

5. 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ä.

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.

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

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 esittelee vaihtoehdot.

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.