Como impressionar facilmente todos os assinantes com uma imagem de plano de fundo de e-mail (+ o código para fazer isso!)

Publicados: 2021-07-23

Os emails podem parecer um pouco previsíveis com uma imagem aqui, um bloco de texto ali ... Uma maneira de animar a experiência do assinante? Imagens de fundo. Eles são inesperados e adicionam outra dimensão ao seu design, tornando seus e-mails “pop”. Quando bem feitos, eles fazem seu e-mail parecer um milhão de dólares, mas são incrivelmente fáceis de enviar.

Continue lendo por:

Os benefícios das imagens de fundo
Exemplos de e-mail inspiradores
Considerações de design
Como codificar imagens de fundo

O que são imagens de fundo? (E qual é o ponto?)

Imagens de plano de fundo são imagens aplicadas ao plano de fundo ou atrás de um elemento. Em vez de ser o ponto focal principal do e-mail, como uma imagem de herói, eles costumam ser sutis e complementares ao outro conteúdo da campanha.

O principal benefício de usar imagens de fundo é que elas permitem que você coloque conteúdo HTML adicional sobre elas. Ao contrário de outras imagens, onde apenas a própria imagem pode existir naquele espaço, as imagens de fundo fornecem possibilidades de camadas, para que você possa ter imagens extras, texto ou frases de chamariz (CTAs) existentes nesse mesmo espaço.

exemplo de texto HTML ativo e um botão à prova de balas sobre uma imagem de fundo

Usar texto HTML ativo em cima de uma imagem de fundo, em vez de incluir esse texto como parte da imagem, significa que sua mensagem pode ser lida quando as imagens são desligadas, tornando esta uma ótima técnica para criar e-mails HTML melhores e mais acessíveis.

Além de ajudar a criar campanhas que proporcionam uma melhor experiência de leitura, as imagens de fundo também oferecem uma riqueza de possibilidades de design, diferenciando sua campanha da concorrência.

Maneiras criativas de as marcas usarem imagens de fundo

Miro colocou uma imagem de fundo contendo formas atrás de sua seção de herói, chamando a atenção para o título principal do e-mail e a mensagem, que é sobreposta por texto ativo.

Email Miro com imagem de fundo — Fonte: Emails realmente bons

Os Uplers usaram uma imagem de plano de fundo para destacar um desconto em seus serviços, com uma imagem de cupom colocada atrás de um código de cupom.

Imagem de plano de fundo de e-mail de Uplers para código de cupom — Fonte: Emails realmente bons

Figma adicionou um padrão de fundo repetitivo sutil ao corpo deste e-mail, apresentando-nos seu novo produto de quadro branco. O padrão que eles apresentam ecoa o plano de fundo encontrado no produto.

Imagem de fundo da Figma no e-mail — Veja este e-mail no Litmus Builder

Chipotle colocou uma imagem de fundo jumbo atrás deste herói jumbo impactante e área corporal, incluindo fotografia de produto e um padrão de linha. Sobre a parte superior desta imagem, eles têm um GIF animado com fundo transparente e texto ativo na área do corpo.

E-mail Chipotle Friendsgiving com imagem de fundo sutil — Fonte: Emails realmente bons

GIFs animados também podem ser usados como imagens de fundo, como este exemplo do Adobe Stock , promovendo coleções festivas com conteúdo heroico, incluindo texto ao vivo e um botão CTA colocado no topo do fundo animado.

Email do Adobe Stock com imagem de fundo GIF animada — Fonte: Emails realmente bons

Considerações de design

Ao pensar na implementação de imagens de fundo, existem algumas considerações de design que vale a pena levar em consideração.

Contraste

Para garantir que todos os leitores obtenham o valor do conteúdo sobreposto às imagens de fundo, é importante estar atento aos contrastes. Trate a imagem da mesma maneira que faria com uma cor lisa e teste as cores da imagem em comparação com as cores do conteúdo.

Se você projeta usando Figma, pode adicionar plug-ins como daltônico e contraste para ver se você está atendendo às Diretrizes de Acessibilidade de Conteúdo da Web (WCAG). Existem também vários aplicativos da web, como o Verificador de contraste do WebAim, onde você pode testar as cores de seus designs.

Simplicidade

Outra maneira de garantir a legibilidade é manter as coisas simples. Planos de fundo ocupados podem dificultar a obtenção do valor de qualquer texto ativo que você coloque em sua imagem. Portanto, costuma ser útil considerar a imagem de plano de fundo como um aprimoramento, em vez de um recurso.

Fallback de cor sólida

Como nem todos os clientes de e-mail respeitarão as imagens de fundo, crie um substituto de cor sólida. Os assinantes que usam clientes de e-mail que não suportam suas imagens ainda podem ter uma ótima experiência com cores sólidas. Certifique-se de escolher uma cor substituta que corresponda ao seu design e contraste bem com os elementos do primeiro plano.

Como codificar imagens de fundo em e-mail

Antes de percorrer o código, vamos ver quais clientes renderizarão o estilo CSS do plano de fundo e quais precisam da ajuda de um fallback de VML.

A boa notícia: o suporte para CSS de fundo inline melhorou, com clientes de webmail agora suportando totalmente esse método, o que significa que o atributo HTML de fundo não é mais necessário.

A má notícia: infelizmente, o Windows 10 Mail simplesmente não gosta de imagens de fundo. Ele não renderizará CSS embutido ou o atributo de fundo HTML obsoleto. E a aplicação de VML causará problemas de renderização com uma mensagem de erro 'a imagem não pode ser exibida'.

Se você está preocupado com a experiência que os assinantes do Windows 10 Mail estão obtendo, considere deixar de fora o VML. Isso garante que as cores de fundo substitutas proporcionem ao público do Microsoft Outlook Suite uma ótima experiência de leitura de e-mail, sem a decoração extra.

como as imagens de plano de fundo do e-mail aparecem no Windows 10 Mail

Suporte ao cliente de e-mail para imagens de fundo

Cliente de email	Usando CSS inline	Usando VML
Apple Mail 14	✓	✘
Office 365 (Mac)	✓	✘
Office 365 (Windows)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Outlook 2013, 2016, 2019 (Windows 10)	✘	✓
Windows 10 Mail	✘	✘
Aplicativo Gmail (Android 10)	✓	✘
Aplicativo Gmail (iOS 13.4.1)	✓	✘
Outlook (Android 7.0)	✓	✘
Outlook (iOS 12.0)	✓	✘
Samsung Mail (Android 7.0)	✓	✘
iPad 11 Air (Gen 4 iOS 14.2)	✓	✘
iPhone 12 (iOS 14.2)	✓	✘
Correio AOL (Edge)	✓	✘
Gmail (Chrome)	✓	✘
Office 365	✓	✘
Outlook.com	✓	✘
Yahoo! Correspondência	✓	✘

Quais clientes de e-mail seus assinantes usam?

Dê uma olhada em sua própria participação no mercado de clientes de e-mail com o Litmus Email Analytics. Veja para quais clientes de e-mail você precisa otimizar suas imagens de fundo. (Dica: se o Windows 10 Mail estiver baixo, não se preocupe.)

Saiba mais →

Agora que resolvemos isso, vamos falar de código!

Uma das coisas divertidas de trazer imagens de fundo para seus e-mails é que existem algumas maneiras diferentes de fazer isso. Você pode preencher uma pequena seção ou cobrir o corpo do seu e-mail, usar uma única imagem ou um padrão de repetição e pode alternar suas imagens de fundo dependendo se o leitor está no desktop, celular, modo claro, modo escuro ou mesmo quando eles pairam ou rolam sobre sua imagem.

Cada técnica precisa de uma abordagem diferente, então vamos dar uma olhada nas melhores maneiras de codificá-las.

Imagem de fundo definida por largura ou fixa

fundo de largura fixa

Ao aplicar imagens de plano de fundo, é sempre melhor adicionar seu código à célula da tabela que a contém. Aplicar a qualquer outro elemento HTML, como <table> ou <body>, provavelmente não obterá suporte de alguns clientes de email. Veja como deve ser:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Aqui, a imagem é feita para caber na largura e altura da célula, incluindo background-size: cover nos estilos CSS embutidos e, a seguir, posicionada no centro. Adicionar esses estilos permite que você use uma imagem 2x - o que significa que você verá uma renderização nítida em telas retina - e ela será redimensionada para caber perfeitamente em seu contêiner, mesmo quando o contêiner for redimensionado para renderização em diferentes dispositivos.

No entanto, isso também significa que se sua imagem for muito pequena ou não for dimensionada proporcionalmente ao contêiner, ela pode parecer pixelada ou esticada. Principalmente se for fotografia.

A sua imagem de fundo funciona?

Veja como nosso código para imagens de fundo funciona em seu próprio e-mail nos aplicativos de e-mail mais populares, como Gmail e Outlook.

Saiba mais →

Hoje, a maioria dos clientes de e-mail oferece suporte ao estilo de plano de fundo CSS embutido, portanto, você pode adicionar sua imagem de plano de fundo e cor de fallback usando a propriedade CSS abreviada de plano de fundo. Em outras palavras, basta aplicá-los ao estilo de 'plano de fundo'. Infelizmente, outros estilos de plano de fundo não funcionam muito bem com abreviações ao codificar embutidos, portanto, qualquer posicionamento ou dimensionamento precisaria ser escrito como estilos separados. Por exemplo, usando background-position: center; tamanho do fundo: 80%; em vez de fundo: centro / 80%; .

Fazendo isso funcionar no Outlook com um substituto de VML

O Outlook e o Office 365 para desktop também precisam de uma ajudinha para exibir imagens de fundo, pois eles também não renderizam estilos de fundo CSS. Para que nossa imagem de plano de fundo seja exibida nesses clientes de e-mail, precisamos aproveitar uma técnica popularizada por Stig Morten Myre para Campaign Monitor e aplicar a linguagem de marcação vetorial (VML) da Microsoft.

Pegando o código que já criamos, colocamos o VML necessário e um contendo <div> dentro de nossa célula da tabela:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

Para imagens que precisam preencher o contêiner sem repetição, precisamos usar 'frame' dentro da tag vml: fill. Dessa forma, você pode usar imagens 2x nesta tag. Apenas certifique-se de definir a largura do seu contêiner usando o estilo embutido na tag v: rect (no exemplo acima, está definido para 600px).

Se você quiser preenchimento em seu contêiner, algo que você pode descobrir é colocar o VML dentro do contêiner e fará com que o preenchimento seja reduzido. A maneira como corrigimos isso é envolver o VML em torno de nosso contêiner, portanto, precisamos aninhar nosso contêiner dentro de outra tabela, desta forma:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Imagem de fundo repetitiva

Você também pode adicionar um plano de fundo que se repete dentro do contêiner em que você o coloca. Um ótimo exemplo é repetir um padrão em todo o corpo do seu e-mail.

exemplo de repetição de imagem de fundo

Se a imagem que colocamos em nossa célula contêiner for menor do que o contêiner, ela se repetirá automaticamente tanto horizontal quanto verticalmente. Para repetir em apenas uma direção, estilize com CSS 'background-repeat' e adicione o valor repeat-x para repetir horizontalmente ou repeat-y para repetir verticalmente.

Para preencher todo o contêiner com um padrão totalmente repetido, o código é muito simples:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

Fazendo isso funcionar no Outlook com um substituto de VML

Novamente, se desejar ver a renderização do plano de fundo nos clientes Outlook, você pode aplicar VML. O código é um pouco diferente desta vez, com o VML colocado antes do contêiner:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

Para fazer com que o plano de fundo se repita, preencha a tag v: fill com o tipo 'bloco'. Sem surpresa, existem alguns problemas de renderização com o Windows 10 Mail e, com fundos repetidos, os problemas de renderização podem ser muito mais desagradáveis. Portanto, omitir o VML pode ser a abordagem mais segura se você tiver qualquer assinante do Windows 10 Mail.

Técnicas avançadas

Imagens de fundo fixas e repetitivas oferecem muitas oportunidades de aumentar o nível de seus designs de e-mail, mas há mais:

Troca de imagem de contraste

Agora que o Modo escuro está disponível em vários clientes de e-mail - e respeitar as preferências do assinante ajuda você a alcançar um público mais amplo e construir confiança - trocar a imagem de fundo é uma ótima maneira de complementar um design de modo claro ou escuro. E é um aprimoramento simples e divertido também.

modos de contraste

Para implementar isso, você precisa adicionar algum CSS incorporado às consultas de mídia do Modo escuro. Isso garantirá que sua imagem de plano de fundo no modo escuro seja veiculada em clientes de e-mail compatíveis com este tipo de consulta de mídia:

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

Vale a pena adicionar uma cor alternativa escura. Isso ajudará com os clientes de e-mail que não carregam imagens sem que o leitor tome uma atitude e garante que sua mensagem possa ser lida quando a imagem não tiver sido carregada.

Agora, em seu HTML, aplique sua classe à célula que contém sua imagem de plano de fundo em modo de luz. Simples!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Tome nota : algo que é difícil de projetar, e ainda mais difícil de codificar, são os clientes de e-mail que invertem as cores do seu e-mail em um ambiente de modo escuro, ignorando completamente todo o trabalho árduo que você coloca para escrever consultas de mídia no modo escuro.

É quase impossível fazer com que esses clientes de e-mail funcionem. No entanto, você pode brincar com imagens de fundo que têm um nível de transparência e aplicar uma cor de fundo de alto contraste ao seu contêiner, como branco para o modo claro e preto para o modo escuro. Isso permitirá que a cor de fundo seja invertida. Eu tentei isso com o próximo exemplo:

imagem de plano de fundo do e-mail em diferentes cenários de Modo escuro

Minha imagem de fundo em chevron tem uma opacidade de 30% nas setas e é totalmente transparente entre elas. Isso significa que, quando clientes de e-mail ofensivos assumem o controle da renderização do Modo escuro, o conteúdo é legível.

Para obter mais informações sobre a codificação para o modo escuro e suporte ao cliente de e-mail, consulte nosso Guia definitivo para o modo escuro de e-mail.

Fundo interativo

Que tal encantar os assinantes com alguma interatividade? Você pode espalhar um pouco de alegria com um simples efeito de passar o mouse ou rollover, alterando o plano de fundo do seu contêiner conforme o leitor move o cursor sobre o seu conteúdo.

alternar imagem de plano de fundo do e-mail ao passar o mouse ou rollover

Você precisa de um pouco de CSS incorporado para fazer isso funcionar. Coloque isso dentro de sua tag <style>:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

Agora tudo que você precisa fazer é aplicar esta classe à célula da sua tabela, assim:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Aumente o nível dos seus designs

Com uma grande variedade de oportunidades, usar imagens de plano de fundo para aprimorar seus designs de e-mail é uma ótima maneira de forçar a barra e fazer com que seus e-mails se destaquem na multidão. Para ajudá-lo a colocar essas técnicas em prática, criamos um recurso útil onde você pode obter o código apresentado nesta postagem.

Adoraríamos ver como você usa imagens de fundo em seus e-mails - compartilhe seus exemplos nos comentários abaixo.

Garanta que suas imagens de fundo funcionem - com Litmus

Funcionou? Visualize suas imagens de fundo (e o resto do seu e-mail) em mais de 100 clientes de e-mail, aplicativos e dispositivos com Litmus. E diga olá aos e-mails da marca e sem erros.

Comece seu teste grátis →

Publicado originalmente em 24 de maio de 2019, por Jason Rodriguez. Última atualização em 21 de julho de 2021.