E-mail marketing e automação

Como usar imagens de alta resolução para telas Retina em seu e-mail HTML

Tela Retina é um termo de marketing usado por Apple para descrever uma tela de alta resolução que possui uma densidade de pixels alta o suficiente para que o olho humano seja incapaz de distinguir pixels individuais a uma distância de visualização típica. Uma tela retina normalmente tem uma densidade de pixels de 300 pixels por polegada (ppi) ou superior, que é significativamente maior do que uma tela padrão com uma densidade de pixels de 72 ppi.

As telas Retina agora são bastante populares para monitores, laptops, dispositivos móveis e tablets. Muitos fabricantes agora oferecem telas de alta resolução com densidades de pixels que correspondem ou excedem as telas Retina da Apple.

CSS para exibir uma imagem de resolução mais alta para uma tela Retina

Você pode usar o seguinte código CSS para carregar uma imagem de alta resolução para uma tela Retina. Este código detecta a densidade de pixels do dispositivo e carrega a imagem com o @ 2x sufixo para telas Retina, enquanto carrega a imagem de resolução padrão para outras telas.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}

Outra abordagem é usar gráficos vetoriais ou SVG imagens, que podem ser dimensionadas para qualquer resolução sem perder qualidade. Aqui está um exemplo:

<div style="max-width: 300px;">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</div>

Neste exemplo, o código SVG é incorporado diretamente no e-mail HTML usando o <svg> marcação. O viewBox O atributo define as dimensões da imagem SVG, enquanto o xmlns O atributo especifica o namespace XML para SVG.

A max-width propriedade é definida no div elemento para garantir que a imagem SVG seja dimensionada automaticamente para caber no espaço disponível, até uma largura máxima de 300px neste caso. Esta é uma prática recomendada para garantir que as imagens SVG sejam exibidas corretamente em todos os dispositivos e clientes de e-mail.

Nota: O suporte SVG pode variar dependendo do cliente de e-mail, por isso é importante testar seu e-mail em vários clientes para garantir que a imagem SVG seja exibida corretamente.

Outra maneira de codificar e-mails HTML para telas Retina é utilizar srcset. O uso do atributo srcset permite que você forneça imagens de alta resolução para telas Retina enquanto garante que as imagens sejam dimensionadas adequadamente para dispositivos de resolução mais baixa.

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

Neste exemplo, o srcset O atributo fornece duas fontes de imagem: image.jpg para dispositivos com resolução de 600 pixels ou menos, e image@2x.jpg para dispositivos com resolução de 1200 pixels ou mais. O 600w e 1200w os descritores especificam o tamanho das imagens em pixels, o que ajuda o navegador a determinar qual imagem baixar com base na resolução do dispositivo.

Nem todos os clientes de e-mail suportam o srcset atributo. O nível de suporte para srcset pode variar muito dependendo do cliente de e-mail, por isso é importante testar seus e-mails em vários clientes para garantir que as imagens sejam exibidas corretamente.

HTML para imagens em e-mail otimizado para telas Retina

é possível codificar um e-mail HTML responsivo que exibirá corretamente uma imagem em uma resolução otimizada para telas retina. Veja como:

  1. Crie uma imagem de alta resolução com o dobro do tamanho da imagem real que deseja exibir no e-mail. Por exemplo, se você deseja exibir uma imagem de 300×200, crie uma imagem de 600×400.
  2. Salve a imagem de alta resolução com o @ 2x sufixo. Por exemplo, se sua imagem original for image.png, salve a versão de alta resolução como imagem@2x.png.
  3. Em seu código de e-mail HTML, use o seguinte código para exibir a imagem:
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
  <img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->

<!--[if (gte mso 9)|(IE)]> é um comentário condicional usado para direcionar versões específicas do Microsoft Outlook, que usa o Microsoft Word para renderizar emails em HTML. O mecanismo de renderização HTML do Microsoft Word pode ser bem diferente de outros clientes de e-mail e navegadores da Web, por isso geralmente requer tratamento especial. O

(gte mso 9) A condição verifica se a versão do Microsoft Office é maior ou igual a 9, que corresponde ao Microsoft Office 2000. A condição |(IE) A condição verifica se o cliente é o Internet Explorer, que é frequentemente usado pelo Microsoft Outlook.

E-mail HTML com imagens otimizadas para tela Retina

Aqui está um exemplo de um código de e-mail HTML responsivo que exibe uma imagem em uma resolução otimizada para telas retina:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Retina-Optimized Email</title>
  <style>
    /* Mobile-specific styles */
    @media only screen and (max-width: 480px) {
      /* Add mobile-specific styles here */
    }
    
    /* High-density display styles */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      img {
        display: block;
        width: 300px !important;
        height: 200px !important;
        max-width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 40px 0 30px 0;">
        <img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <!--[if (gte mso 9)|(IE)]>
          <img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

Dicas de imagem de exibição de retina

Aqui estão algumas dicas adicionais sobre como otimizar seus e-mails em HTML para imagens otimizadas para telas Retina:

  • Certifique-se de sempre ter suas tags de imagem incluídas usando alt texto para fornecer contexto para a imagem.
  • Otimize imagens para a web para reduzir o tamanho do arquivo sem comprometer a qualidade da imagem. Isso pode incluir o uso compressão de imagem ferramentas, reduzindo o número de cores usadas na imagem e redimensionando a imagem para suas dimensões ideais antes de carregá-la no e-mail.
  • Evite imagens de fundo grandes que podem diminuir o tempo de carregamento do e-mail.
  • GIFs animados podem ser maiores em tamanho de arquivo do que imagens estáticas devido aos vários quadros necessários para criar a animação, certifique-se de mantê-los bem abaixo de 1 Mb.

Douglas Karr

Douglas Karr é CMO de AbrirINSIGHTS e o fundador da Martech Zone. Douglas ajudou dezenas de startups de MarTech bem-sucedidas, auxiliou na due diligence de mais de US$ 5 bilhões em aquisições e investimentos da Martech e continua a auxiliar empresas na implementação e automatização de suas estratégias de vendas e marketing. Douglas é um especialista e palestrante em transformação digital e MarTech reconhecido internacionalmente. Douglas também é autor publicado de um guia para leigos e de um livro sobre liderança empresarial.

Artigos Relacionados

Voltar ao topo botão
Fechar

Adblock detectado

Martech Zone é capaz de fornecer a você esse conteúdo sem nenhum custo porque monetizamos nosso site por meio de receita de anúncios, links de afiliados e patrocínios. Agradeceríamos se você removesse seu bloqueador de anúncios ao visualizar nosso site.