Virid Interatividade Digital

Blog de Email Marketing

Conteúdos elaborados por especialistas do setor.

Busca

Dica

Saiba como fazer para o Gmail não adicionar margem nas imagens de seu email marketing


Compartilhar

Percebemos que o Gmail começou a se comportar como o Hotmail, adicionando uma margem em torno das imagens. Como você pode ver abaixo:

?

A grande maioria dos profissionais de email marketing já estão alertas, como mencionam em seus sites o Campaign Monitor,Email-Worx e Graphicmail, por exemplo. Este problema está afetando o Gmail quando visualizado no IE7, no Firefox (windows e Mac), Google Chrome e Safari. Mas há uma maneira muito simples de corrigir isso.

Você pode corrigir este problema em todos os navegadores citados acima, é só adicionar display: block na tag de imagem, desta forma:

< img src=”image.jpg” style=”display: block;” >

E pronto, seu template está corrigido! Usando esta mesma propriedade de HTML, você evita falhas de renderização de imagens no Gmail e Hotmail, já que ambos têm o mesmo problema com imagens.

Comente!

  1. Edson disse:

    Acho que aprendi essa “técnica” com vocês. Porém, prefiro usar o formato nativo ALIGN da tag utilizando assim: align=”absmiddle” (de “absolute middle”).

  2. Olá Edson,

    O absmiddle alinha a imagem no meio de um texto! E mesmo você inserindo essa propriedade no código, ainda sim o Gmail e o Hotmail vão deixar todas as imagens com essa borda branca.

  3. Ygor Sarkis disse:

    Realmente isso acontece, vou testar a dica.

    Obg.

  4. Marco Soares disse:

    Sensacional a dica pessoal! Brigadão!

  5. Isabela Gómez disse:

    Muito boa a dica!

    Pena que tantos desenvolvedores não gastem um minuto do seu tempo para buscar no google a solução para esse problema (chegar aqui é rápido)e disparem o e-mail marketing sem nem ver. Mais de 90% dos emails que tenho recebido, de empresas grandes, ainda chegam com a imagem assim, parecendo cortada, ou com margem como disseram. Se “a grande maioria dos prossionais de email marketing já estão alertas”, a grande maioria das empresas grandes não parecem estar trabalhando com profissionais… Enfim, tomara que cheguem logo a essa dica.

    Abs

  6. fabio jose disse:

    muito bom

  7. ANISIO COSTA disse:

    Eu já uso o a técnica do midle, mas estou aprendendo cada vez mais.

  8. cyrus disse:

    Muito bom. Perfeito!

  9. Dark Angel disse:

    Desculpa a burrice mas, como faço para inserir este comando

    para resolver este problema no Gmail e Hotmail?
    Obrigado.

  10. Você precisa adicionar: style=”display: block;” na tag de imagem!

  11. Gustavo disse:

    Valeu pela dica. Vou usá-la agora mesmo. Vcs como sempre, referência no setor. Grande abraço!

  12. Muito obrigado pela dica, já estava ficando louco com essa falha.

    Gde. Abraço.

  13. Paulo disse:

    Realmente muito bom!

  14. Gilberto Bá disse:

    Olá, a técnica vista acima não funcionou, quando abro o Gmail no Firefox ou Chrome.

    Abraços a todos…

  15. Any Zamaro (Equipe Virid) disse:

    Olá Gilberto!
    Você pode corrigir este problema em todos os navegadores citados acima, é só adicionar display: block na tag de imagem, desta forma:

    < img src="image.jpg" style="display: block;" >

  16. Obrigado pela dica :)

    Foi muito util

  17. Breno disse:

    A teoria é boa, mas não funciona.

  18. Any Zamaro (Equipe Virid) disse:

    Oi Breno,

    Qual email está usando e qual o sistema operacional?

  19. Gabriel Moura disse:

    Muito bom o tutorial. Algumas pessoas não conseguiram, mas acho que foi o mesmo erro que deu pra mim aqui antes de funcionar.

    O caracter para as aspas que o tutorial usa são aspas “aberta e fechada”, e não as aspas do html.

    Tentem trocar

    por

    Aqui não funcionava quando eu usava (””) ao invés de (“”).

    Obrigado pela ótimo dica.

  20. @Maiconfz disse:

    Vlw pela dica.

  21. Guillermo disse:

    Obrigado pela dica, funcionou perfeitamente. A prova é mandar um emkt pro gmail. Estando correto lá, estará em qqer outro lugar. Abs