Tekstikuvat
Teksti tulee toteuttaa aitona tekstinä eikä rasteroituna kuvana, ellei kuva ole välttämätön (logo, käyttöliittymän kuvakaappaus) tai täysin käyttäjän muokattavissa.
Mitä vaaditaan
Kun sama visuaalinen esitys voidaan toteuttaa aidolla tekstillä ja CSS:llä, käytetään aitoa tekstiä. Tekstikuvat eivät skaalaudu siististi, niitä ei voi valita, selain ei voi kääntää niitä, käyttäjän CSS ei voi muotoilla niitä, ja ne pikselöityvät suurella zoomausasteella. Poikkeukset: logot, välttämättömät kuvat (kuvakaappaus, joka näyttää käyttöliittymän ulkoasun) sekä tekstikuvat, joita käyttäjä voi mukauttaa.
Miten täyttää vaatimus
- Renderöi otsikot, bannerit ja markkinointitekstit HTML-tekstinä web-fonteilla, ei vietynä PNG-tiedostoina.
- Markkinointimerkinnöissä (“Uusi”, “Ale”, “30 % alennus”) käytä CSS:llä muotoiltua
<span>-elementtiä kuvaspriten sijasta. - Jos suunnittelija toimittaa hero-kuvan, johon teksti on poltettu sisään, pyydä teksti erillisenä tasona, joka renderöidään kuvan päälle CSS:llä.
- Palvelinpäässä generoiduissa sosiaalisen median tyylisissä lainauskorteissa renderöi ne SVG:nä
<text>-elementein — SVG-teksti skaalautuu siististi ja on valittavissa. - Käytä
@font-face-sääntöä dekoratiivisten fonttien lataamiseen rasteroinnin sijaan.
Yleisiä virheitä
- Bannerimainokset, joissa kaikki teksti (“Rajoitettu aika! Osta nyt!”) on renderöity JPEG-muodossa ja sumenee 200 % zoomauksella.
- Hinnoittelukortit, joissa “$99/kk” on osa korttikuvaa eikä HTML-tekstiä.
- Osioiden erottajat, joissa tyylitelty teksti (“Palvelumme”) on toimitettu PNG:nä muotoillun
<h2>-elementin sijasta. - Toimintakehotteet, jotka ovat kokonaan kuvapohjaisia ja joiden alt-teksti toistaa visuaalisen kopion.
- Markkinointisivuilla käytetyt sähköpostimaisen kuvakaappaukset, joissa markkinointiteksti voisi olla aitoa tekstiä.
Miksi tämä on tärkeää
Tekstikuvat ovat myös käännös- ja hakukoneoptimoinnin epäonnistuminen — Google ei indeksoi niitä, Chrome ei voi kääntää niitä, ja suurennusohjelman käyttäjät näkevät ne pikselöityinä. Korjaus on yleensä triviaali: vaihda vienti HTML:ksi. Kitka on työnkulussa — suunnittelijat toimittavat JPEG-tiedostoja, koska niiden tuottaminen Figmassa on nopeampaa kuin speksin kirjoittaminen.