4 dicas sobre como adicionar imagens de fundo no modelo de e-mail

Todo mundo usa imagens de fundo de e-mail nas mensagens. Eles são ótimos para chamar a atenção e é extremamente importante usá-los da maneira certa. Então, vamos começar nosso guia sobre como usar imagens de fundo em e-mails. Você descobrirá:

• por que você precisa usar imagens em newsletters;

• como usar o código HTML para inserir uma imagem de fundo;

• como adicionar uma imagem de fundo usando CSS.

Quais são os planos de fundo para e-mails?

O plano de fundo do boletim informativo é a imagem aplicada como o contorno de todos os outros elementos em um e-mail. Em vez de ser um ponto focal principal, como uma imagem de herói, é mais frequentemente sutil e complementar aos outros conteúdos da campanha.

Adicionar imagens de fundo de e-mails em HTML requer alterações no código do seu boletim informativo. Se você não sabe nada sobre codificação personalizada – o caminho certo é usar modelos prontos e gratuitos que já estão carregados em seu software de e-mail, o Atomic Email Sender. Escolha o que você gosta, adicione conteúdo e envie uma campanha.

Se você é um usuário avançado familiarizado com HTML e CSS e tem algumas habilidades para trabalhar com esses códigos, nosso artigo lhe dará algumas dicas sobre como criar uma imagem de fundo em HTML.

Por que usar o plano de fundo do e-mail

O principal benefício da imagem de plano de fundo HTML do e-mail é que você obtém possibilidades adicionais de camadas e pode colocar a mensagem principal , bem como outras imagens ou call-to-action em cima das imagens de plano de fundo do e-mail .

Em um sentido de beleza, é sempre bom receber um boletim informativo bem elaborado. Além disso, você tem permissão para usar GIFs animados como imagens de fundo do boletim informativo.

Plano de fundo de e-mail animado

Mantenha-o simples: design básico do plano de fundo do e-mail

Lembre-se de que as imagens de fundo devem ser simples e sem padrões altos que possam roubar o show. A cor de fundo do e-mail HTML não deve ser muito clara para não chamar mais atenção do que as informações principais do boletim informativo por e-mail. Lembre-se de que o plano de fundo do boletim informativo é apenas a adição ao conteúdo para tornar o e-mail com ótima aparência. As melhores imagens de fundo do boletim informativo são de estilo discreto e podem incluir elementos gráficos (texturas, gradientes, padrões, etc.).

Se você não é um profissional em design, recomendamos que você não corra riscos e evite fundos artísticos. O minimalismo está em alta agora e você pode aplicá-lo com sucesso em sua campanha de e-mail. Uma das imagens nas práticas recomendadas de e-mails é um plano de fundo gradiente para o e-mail. Brinque com a cor e escolha um fundo degradê com transição suave de acordo com o conteúdo do email. Isso pode ser feito usando CSS. Assim, você obtém um plano de fundo de e-mail que será uma ótima alternativa ao plano de fundo da imagem PNG, JPG ou GIF.

Plano de fundo de e-mail gradiente

Melhores tamanhos e formatos para imagens de boletins informativos

Formato de imagem para e-mail

Ao escolher ou criar uma imagem para usar em uma campanha de e-mail, certifique-se de salvá-la no formato correto - PNG, JPG ou GIF. Cada formato de imagem tem especificidade própria, por exemplo, imagens salvas como PNG mantêm a transparência.

Tamanho importa!

É bom ficar em contato com o seu ESP e esta é a hora de perguntar ao seu ESP sobre os limites de tamanho e peso da imagem. Veja, alguns ESPs comprimem imagens muito grandes ou pesadas demais – tudo isso afeta a qualidade da imagem e a impressão total da sua mensagem. Se sua imagem for muito grande, o e-mail pode ser bloqueado por um firewall ou filtro de e-mail e sua campanha de e-mail não chegará aos destinatários.

Como um tamanho de modelo de email ideal varia entre 600-650px, é melhor usar imagens de fundo exatamente do mesmo tamanho. Trata-se de imagens salvas como arquivo PNG e JPG.

O melhor tamanho de imagem de fundo do Outlook e do Gmail é diferente? Não, não importa qual cliente é usado para leitura de newsletters pelos receptores. O tamanho perfeito da imagem de fundo do e-mail do Gmail e do Outlook é 600-650px.

Para usar a imagem GIF como imagem de fundo e cobrir toda a área de conteúdo, mantenha seu tamanho de 1280px de largura. Deseja destacar que os arquivos GIF são suportados por quase todos os clientes de email, exceto o Outlook 2007-2013 - o usuário verá apenas o primeiro quadro no arquivo GIF animado. É por isso que coloque o quadro mais importante em primeiro lugar. Geralmente, o número de quadros em GIF animado não deve exceder 10 unidades.

Para gerenciamento conveniente de e-mails, use o estúdio de e-mail. Também temos um ótimo gerenciador de listas de e-mail para gerenciar listas de e-mail. Usando o extrator de e-mails, você pode coletar endereços de e-mail para enviar cartas.

Torne seu e-mail compatível com dispositivos móveis

Lembre-se de que mais da metade das mensagens de e-mail que as pessoas abrem usando dispositivos móveis. Você deve considerar isso ao criar seu design de email. Prepare a versão mobile-friendly do boletim informativo com tamanho de imagem menor para evitar problemas com carregamento de e-mail demorado, etc. Como fazer com que o e-mail seja exibido corretamente no smartphone? Use o CSS para ajustar a imagem de fundo para cada tela específica do smartphone. Os destinatários ficarão gratos pelo design de qualidade, economizando tempo e tráfego!

Como ter imagem de fundo no email? Vamos descobrir como trabalhar com imagens de fundo em nosso software de envio de e-mail - Atomic Mail Sender.

Como adicionar imagens de fundo - Atomic Mail Sender Rocks

Existem quatro métodos principais para adicionar imagens de fundo:

• Usando atributos de tabela para inserir imagem de fundo em HTML
• Usando CSS embutido
• Usando CSS incorporado
• Usando fundos à prova de balas

Vamos imaginar que você já tenha um modelo de email em HTML e queira apenas adicionar uma imagem de plano de fundo a ele. Como os boletins variam de acordo com os ramos de negócios e a codificação também varia, pegaremos um dos modelos prontos do Atomic Mail Sender para mostrar os principais princípios da implementação em segundo plano.

1. Atributos da tabela como forma de adicionar imagem de fundo em HTML

Se você der uma olhada no modelo de email projetado por tabelas, verá a primeira tabela principal que inclui outros blocos de tabela menores. Isto é o que precisamos – esta primeira tabela de abertura e o atributo background .

O atributo mencionado pode ser aplicado a toda a tabela (tag <table>) ou à célula da tabela (tag <td>).

O atributo background contém um URL onde sua imagem de plano de fundo está hospedada.

Por exemplo:

<td width="100%" align="center" bgcolor="#fcd539" border="0" cellspacing="0" cellpadding="0" background="https://path-to-image/title.png"></td>

Para clientes que não suportam imagens de fundo, você precisa mencionar a cor de fundo (bgcolor), bem como o texto ALT. Seja escrupuloso ao escolher a cor para o fundo. Todos os elementos de conteúdo e o texto da mensagem devem ser claramente legíveis em segundo plano. Alguns leitores não ligam as imagens, por isso é bom usar textos ALT. Não use apenas textos alternativos comuns que você pode usar para necessidades de SEO. Imagine que esta é a única alternativa à imagem e use seus textos ALT como call-to-action. Faça-os soar bem e cativante! Você vai lucrar com isso. Ou um leitor ativa as imagens para ver a imagem ou apenas segue o link para ver a oferta.

Antes da:

E-mail sem fundo

Depois:

E-mail com fundo padrão

Sem imagem de fundo, mas com uma cor de fundo:

E-mail com fundo simples

Se você não possui um site, recomendamos que salve as imagens que usa para plano de fundo em serviços gratuitos ou servidores públicos. Sempre digite o caminho absoluto para o arquivo de imagem de fundo.

Então, isso é como usar o código HTML para adicionar uma imagem de fundo. Agora vamos passar para a próxima forma de sua inserção.

2. Como usar o código CSS embutido para imagem de fundo

O princípio de funcionamento é o mesmo mencionado acima, altere o código da primeira tabela de abertura ou célula da tabela. A diferença é que você trabalha com o atributo style .

O exemplo de código HTML:

<td width="100%" align="center" border="0" cellspacing="0" cellpadding="0"></td>

• Adicione a seguinte propriedade: background-repeat: no-repeat; à mesa para que a imagem de fundo não se repita. Então, não será assim: Será exibido assim: Imagens de fundo não repetidas
• tamanho do fundo: capa; - esta importante propriedade permite cobrir todo o espaço disponível da newsletter com a sua imagem. Especialmente útil para campanhas de e-mail móvel quando você está limitado com o espaço do boletim informativo e a imagem necessária para ser redimensionada.

É bom ter um link que leve a uma versão WEB da sua mensagem de e-mail. Às vezes é impossível ver as imagens, isso pode acontecer por causa de um erro ou por causa de um cliente de e-mail ruim. É uma boa prática ter um link para uma versão WEB do e-mail. Apenas faça soar como "Problema ao visualizar imagens? Clique aqui para uma versão WEB"

3. Tabela CSS incorporada para criação de imagem de fundo

Em primeiro lugar, você precisa adicionar uma tag CSS <style> no cabeçalho da sua mensagem de e-mail. Certifique-se de que não haja outras propriedades de plano de fundo no código HTML existente, caso contrário, elas podem substituir a imagem de plano de fundo.

O exemplo de código CSS é o seguinte:

<style> .bgImage { background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-size: cover; } </style>

Em seguida, vamos diretamente para o CSS incorporado no modelo de e-mail. Use a classe para configurar a correspondência com o estilo CSS que você escreveu no cabeçalho do e-mail.

<td class="bgImage"></td>

4. Imagens de fundo à prova de balas no e-mail

O princípio à prova de balas para imagens de fundo combina o uso do atributo HTML com o Vector Markup Language (VML) da Microsoft. Essa abordagem ajuda a criar um modelo de email com plano de fundo que será exibido em cada cliente de email.

Hoje existe um servidor gratuito para gerar o código de fundo à prova de balas automaticamente. Acesse https://backgrounds.cm/ e experimente.

Basta especificar a URL da imagem de fundo desejada, especificar a cor do backup e escolher se esta regra deve ser aplicada a todo o corpo da newsletter ou apenas a uma célula da tabela. Como resultado, você obtém o código HTML pronto para inserir em seu modelo.

Como as imagens de fundo são exibidas em clientes de e-mail

Há um problema: as imagens de fundo podem não ser suportadas por alguns clientes de e-mail. Por exemplo, versões mais antigas do Android. Além disso, algumas versões de clientes do Gmail não exibirão totalmente seus modelos de e-mail com imagens, não importa o quanto você tente. Certifique-se de manter isso em mente ao criar sua newsletter. E para facilitar o entendimento da questão, utilize esta tabela.

Fonte: https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email

Para tornar seu trabalho em campanhas de e-mail ainda mais eficaz, desenvolvemos um software para extrair e-mail de texto em seu computador. Em seguida, usando um remetente em massa de e-mail automático, você pode fazer envios em massa. Quando todos os e-mails forem enviados, rastreie-os convenientemente com o software de rastreamento de e-mail.

Um pouco mais de dicas

• Largura de e-mail recomendada – 600px (máx. 650px). É a garantia de que sua mensagem de e-mail será exibida corretamente em todos os dispositivos e em todos os clientes de e-mail.
• A altura de e-mail recomendada depende do tamanho do conteúdo, mas não deve exceder 200 pixels, na melhor das hipóteses.
• Tamanho de fonte recomendado – 14px, com espaço de linha 1,5.
• A cor do texto deve contrastar com a cor de fundo.

Para falar a verdade, não existem regras precisas que determinarão o tamanho dos elementos de email para que você possa experimentar formas e tamanhos, mas não torne o modelo muito incomum e estranho para os usuários.

Como ter uma imagem de fundo no e-mail usando o Atomic Mail Sender?

Bem, você aprendeu sobre os planos de fundo do boletim informativo e como configurá-los. Mas em qual ferramenta é possível testar esse conhecimento e obter um resultado visual? Use o Atomic Mail Sender para esses fins. Esta ferramenta tem um editor HTML embutido. Assim, escreva seu código, avalie o resultado visualmente e envie a newsletter do mesmo programa imediatamente. Vamos dar uma olhada.

Newsletter com fundo gradiente no Atomic Mail Sender

Editor de HTML no Atomic Mail Sender

Conjure o código e envie e-mails com qualquer plano de fundo no programa Atomic Mail Sender.

A imagem de fundo é uma boa maneira de decorar o modelo de email. Mas não substitua o conteúdo do email apenas pela imagem. Não crie e-mails totalmente baseados em imagens. Este ainda é um erro real de e-mail marketing. Às vezes você abre um e-mail e tudo o que vê são quadrados com cruzes vermelhas. Claro que não permito imagens de todos os remetentes, e isso significa que definitivamente sentirei falta deste e-mail, mesmo que não seja uma farsa ou spam. Certifique-se de que seu e-mail pareça informativo e útil sem imagens.

Use os modelos de e-mail gratuitos do Atomic Mail Sender para se inspirar e criar e-mails de marca própria com imagens de fundo deslumbrantes. Deixe-nos saber se você tiver alguma dúvida nos comentários abaixo.

Em nossa lista de software, também há extrator de números de telefone para coletar números de telefone, pesquisa de e-mail whois para encontrar informações sobre o proprietário do e-mail e um verificador de e-mail para verificar o endereço de e-mail, para fazê-lo online, use o verificador de e-mail online.

Quer criar correspondências coloridas e enviá-las usando a mesma ferramenta? Baixe uma versão de teste do Atomic Mail Sender e encante os destinatários com boletins informativos estéticos!