Kuvat uutiskirjeissä: mitä kannattaa huomioida?

Anna jokaiselle kuvalle selkeä tehtävä

Tuotekuva voi esitellä uuden tuotteen. Tapahtumakuva auttaa hahmottamaan paikan tai toiminnan. Kaavio voi selittää muutoksen tekstikappaletta selkeämmin. Valitse kuva sen mukaan, mitä se auttaa lukijaa ymmärtämään juuri tässä viestissä.

Mieti, mitä lukija menettäisi, jos poistaisit kuvan. Jos kuva on pelkkä koriste, pienempi kuva tai sen pois jättäminen voi jättää viestille enemmän tilaa. Jos siinä näkyy tärkeä tuotteen yksityiskohta, valitse kuvakulma, josta se erottuu puhelimellakin.

Tämä opas käsittelee uutiskirjeen sisällössä näkyviä kuvia. Ladattavina liitteinä lähetettäviä valokuvia varten on erillinen opas kuvien pienentämiseen sähköpostia varten.

Kirjoita olennainen viesti myös kuvan ulkopuolelle

Kirjoita otsikko, tärkeimmät tiedot ja päälinkki tekstinä uutiskirje-editorissa, esimerkiksi Moosend-palvelussa. Kerro tarjouksesta alennus, ehdot ja päättymispäivä, tapahtumasta taas aika, paikka ja varauslinkki. Mainoskuva voi tukea näitä tietoja, mutta niiden ei pitäisi olla vain siinä.

Valitse alt-teksti kuvan tehtävän mukaan:

• Hyödyllistä tietoa välittävä valokuva: kuvaile lukijan tarvitsema yksityiskohta, kuten tuotteen näkyvä muoto tai ominaisuus.
• Pelkkä koristekuva: jätä alt-teksti tyhjäksi, jos kuva ei lisää tietoa eikä ole linkki. W3C:n koristekuvien ohje selittää, miksi tarpeettomat kuvaukset voivat häiritä ruudunlukijan käyttäjää.
• Kuva, joka on linkin ainoa sisältö: kerro linkin kohde tai toiminto, esimerkiksi ”Katso sininen muki”, sen sijaan että kuvailisit vain kuvan ulkonäköä. Katso W3C:n toiminnallisten kuvien ohje.

Alt-teksti ei korvaa viestin varsinaista tekstiä, sillä kaikki sähköpostiohjelmat eivät näytä sitä kaikissa tilanteissa. Mailchimp käsittelee näitä rajoituksia. Lisää esimerkkejä löydät alt-tekstioppaastamme.

Valmistele kuva uutiskirjepohjaan sopivaksi

Aloita kuvalohkolle suositelluista mitoista. Koko palstan levyinen valokuva ja pieni tuotekortti tarvitsevat erilaiset tiedostot. Rajaa kopio sille varattuun tilaan sopivaksi venyttämättä kohdetta. Voit käyttää apuna kuvan rajaustyökalua.

Erota viestissä näkyvä leveys tiedoston pikselimitoista. Jos kuva näkyy 600 pikseliä leveänä, voit verrata 600 ja 1200 pikselin levyisiä tiedostoja ja näyttää molemmat samassa 600 pikselin tilassa. Leveämpi tiedosto tarjoaa korkean resoluution näytölle enemmän kuvapikseleitä; sen ei pitäisi leventää viestiä. Se tarvitsee riittävän suuren alkuperäisen ja voi kasvattaa ladattavan tiedoston kokoa. Mitat ovat esimerkkejä: noudata oman pohjasi ohjeita ja vertaa vastaanotettuja viestejä. Mailchimpin suositukset vaihtelevat pohjan ja sisältölohkon mukaan.

Tarkista, hyväksyykö uutiskirjepalvelu tiedoston. Varmista sitten, että kuva näkyy vastaanotetussa viestissä testaamillasi ohjelmilla. Onnistunut lataus editoriin ei vielä osoita, että kuva näkyy vastaanottajille oikein. JPEG on käytännöllinen lähtökohta valokuville, PNG taas läpinäkyville kuville ja grafiikalle. Mailchimp suosittelee JPG:tä, PNG:tä tai GIF:iä uutiskirjepohjien kuvaohjeessaan. Tarkista oman palvelusi ohjeet ennen kuin käytät verkkosivulle tallennettua kuvaversiota.

Jos käytät animoitua GIF-kuvaa, tee sen ensimmäisestä ruudusta ymmärrettävä myös yksinään. Osa vastaanottajista voi nähdä vain sen; Microsoftin animaatio-ohje kertoo, miten animaatioasetukset voivat aiheuttaa tämän Outlookissa. Älä sijoita tarpeellista ohjevaihetta tai tarjousta pelkästään myöhempiin ruutuihin.

Tarkista yksityiskohtien lisäksi kuvien yhteinen tiedostokoko. Useat suuret kuvat voivat hidastaa viestin latautumista. Tiedostokoon pienennysoppaamme neuvoo tekemään pienempiä kopioita.

Esimerkki: kerro uudesta tuotteesta

Kuvitellaan kodintarvikeliike, joka esittelee uuden sinisen keraamisen mukin. Seuraavissa toteutuksissa käytetään samaa tuotekuvaa:

Rajaa toisen toteutuksen valokuva niin, että muki ja kahva näkyvät puhelimellakin. Jos valokuva toimii erillisenä linkkinä tuotteeseen, anna sille sopiva alt-teksti ja tarkista sen kohde tekstilinkin lisäksi.

Tarkista viesti vastaanottajan näkökulmasta

Editorin esikatselu auttaa sisällön asettelussa, mutta sähköpostiohjelmat voivat näyttää saman viestin eri tavoin. Lähetä testiviesti uutiskirjepalvelustasi ja avaa vastaanotettu viesti puhelimella ja tietokoneella. Testaa mahdollisuuksien mukaan yleisösi käyttämiä ohjelmia, kuten Gmailia, Outlookia tai Apple Mailia. Mailchimpin esikatselu- ja testausohje kertoo, miksi tarvitaan sekä esikatselua että testilähetyksiä.

• Tarkista kuvan pääkohde ja rajaus. Näkyvätkö kasvot, tuotteet ja tärkeät yksityiskohdat ilman venymistä tai asettelun leventymistä?
• Katso kuvaa sen näyttökoossa. Ymmärtääkö sen ilman suurentamista? Kirjoita myös tarpeelliset merkinnät ja kaavioiden selitykset viestin tekstiksi.
• Kokeile vaaleaa ja tummaa tilaa, jos ne ovat käytettävissä. Tumma logo läpinäkyvällä taustalla voi kadota tummaa taustaa vasten. Kokeile versiota, jossa on erottuva reunaviiva tai kuvaan tallennettu sopiva tasainen tausta, ja tarkista molemmat tilat. Mailchimpin tumman tilan ohje käsittelee logon erottuvuutta ja ohjelmien välisiä eroja.
• Katso viestiä kuvien lataus estettynä, jos ohjelma sallii sen. Lue jäljelle jäävä sisältö, tarkista alt-tekstit ja varmista päälinkin löytyminen.
• Avaa linkit. Tarkista kuvalinkit ja painikkeet erikseen: ne voivat johtaa eri osoitteisiin.

Jos kuva puuttuu, selvitä syy

Tee seuraavat tarkistukset järjestyksessä. Perinteinen Outlook voi estää ulkoisten kuvien lataamisen, kuten Microsoftin latausohje kertoo. Gmail voi jättää kuvat näyttämättä epäilyttävinä pitämissään viesteissä; katso Gmailin kuva-asetukset.

1. Tarkista kuvien lataus vastaanotetusta testiviestistä. Jos ohjelma tarjoaa kuvien näyttämistä tai lataamista, salli se omalle testiviestillesi. Jos kuvat ilmestyvät, ohjelma esti niiden latauksen. Pakkaaminen ei ohita tätä asetusta.
2. Etsi ongelmakuva uutiskirje-editorista. Avaa kuvalohko ja varmista, että olet valinnut kuvakirjastosta oikean tiedoston. Jos tiedosto puuttuu, lataa tallessa oleva kopio uudelleen ja valitse uusi tiedosto. Jos kuva on ulkoisella palvelimella, tarkista lohkon käyttämä osoite.
3. Tarkista pääsy ulkoiseen tiedostoon. Avaa kuvan suora osoite selaimen yksityisessä ikkunassa kirjautumatta sisään. Kirjautumisnäkymä tai jakamissivu ei ole kuvatiedosto. Käytä sen sijaan palvelun kuvakirjastoa tai sopivaa julkista kuvaosoitetta. Onnistunut avaus varmistaa vain pääsyn selaimella ilman kirjautumista, ei kuvan näkyvyyttä kaikissa sähköpostiohjelmissa.
4. Selvitä ohjelmien väliset erot. Jos tiedosto on saatavilla mutta ei näy yhdessä ohjelmassa, tarkista ensin kyseisen ohjelman kuvien latausasetukset. Vertaa sitten kuvamuotoa uutiskirjepalvelusi ohjeisiin. Kokeile valokuvalle JPEG-kopiota tai läpinäkyvyyttä vaativalle kuvalle PNG:tä ja lisää se tavallisen kuvalohkon kautta. Jos itse tehty pohja ei edelleenkään toimi, pyydä sen ylläpitäjää tarkistamaan kuvan HTML-merkinnät.
5. Lähetä korjauksen jälkeen uusi testiviesti. Avaa se ohjelmassa, jossa ongelma ilmeni. Tarkista kuva, sen ajantasainen alt-teksti sekä kuvalinkin ja erillisen tekstilinkin kohteet, jos ne ovat käytössä.

Mailchimpin vianmääritysohje käsittelee kuvaosoitteiden, rajatun pääsyn ja kuvan näyttämisen ongelmia. Noudata oman palvelusi ohjeita kuvakirjaston tiedostojen valinnassa ja korvaamisessa.

Viimeinen tarkistus ennen lähettämistä

• Rajaus, yksityiskohdat ja tiedostokoko sopivat pohjaan.
• Pääviesti ja linkki toimivat ilman kuvia.
• Alt-teksti vastaa kunkin kuvan tehtävää.
• Mahdollisen GIF-kuvan ensimmäinen ruutu toimii yksinään, ja logot erottuvat vaaleassa ja tummassa tilassa.
• Lopullinen testiviesti on tarkistettu tarvittavissa ohjelmissa. Myös kuvien lähteet ja linkkien kohteet on tarkistettu.