Artigo

Como adicionar imagens no corpo do e-mail?

Esta funcionalidade não é nada difícil, basta seguir o passo-a-passo abaixo.

  • HOSPEDANDO A IMAGEM EM ALGUM SITE:

Antes de mais nada, você deverá hospedar a sua imagem em algum site na Internet. Pode ser no seu blog, site pessoal ou mesmo em sites de fotos, como no Flickr, por exemplo. Você precisará copiar a URL da sua imagem. URL é aquele endereço que fica no topo do navegador e que normalmente começa com http://.

  • EDITANDO O E-MAIL EM HTML:

No corpo do e-mail, você deverá habilitar a formatação em HTML. Alguns e-mails possuem um local em que você clica em Editor HTML ou apenas HTML; em outros, há um botão com o símbolo < >. Ao habilitá-lo, é como se agora você pudesse ver o gene da sua mensagem (cada vez que você altera a cor de uma palavra, por trás disso, existe um código em HTML sendo inserido dizendo que aquela palavra deverá ser vermelha; assim funciona para palavras em negrito, itálico etc).

Feito esta habilitação, você deverá escrever o comando:

<img src="URL" />

Sendo que a URL é aquele endereço da imagem.

Deste modo, quando você desabilitar o botão de HTML do seu e-mail, deverá aparecer a imagem.

  • URL DA IMAGEM NO FLICKR:

Para quem é usuário do Flickr, a forma de se obter a URL de uma imagem é assim:

  1. faça o upload da imagem que quer inserir no e-mail;
  2. clique nesta imagem de modo a cair na tela principal da própria imagem (aquela em que você pode fazer comentários e onde à direita estão as Informações adicionais);
  3. clique na lupa Todos os tamanhos, que está na barra logo acima da imagem;
  4. escolha o tamanho da imagem que quer usar;
  5. abaixo da imagem, haverá uma caixa com o código HTML, algo parecido com:
    <a href="http://www.flickr.com/photos/alickel/2688247747/" title="Whisker por ali ckel, no Flickr"><img src="http://farm4.static.flickr.com/3020/2688247747_31b99f67e1.jpg" width="500" height="375" alt="Whisker" /></a>
  6. você deverá copiar o endereço que aparece entre aspas no src= (no exemplo, eu destaquei em negrito, mas ele não estará assim no código). É importante que você não copie as aspas, mas sim apenas o que está entre elas;
  7. faça um teste: copie este endereço e cole no seu navegador. Deverá aparecer algo assim:
    http://farm4.static.flickr.com/3020/2688247747_31b99f67e1.jpg;
  8. Esta é a URL que você irá inserir no código HMTL no corpo do seu e-mail. Ficará assim:
    <img src="http://farm4.static.flickr.com/3020/2688247747_31b99f67e1.jpg" />

Esta semana precisei usar esta funcionalidade pela primeira vez e como não é absolutamente trivial (também não é nada difícil), optei por publicar o passo-a-passo aqui no Das Haus, de modo a ter onde consultar em usos futuros. Ainda que haja diversos tutoriais como este em sites brasileiros, é sempre bom tê-lo aqui.

Comentários (11 comentários)

Desde quando html é coisa de desenvolvedor? A última vez que cometi este engano foi 15 anos atrás :)

Falando de forma não muito estrita, precisar do / pra fechar a tag img depende do padrão que você está seguindo. Se você está usando HTML, não precisa colocar o /. Aliás, não deve: http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.2

Agora, você pode estar usando XHTML! XHTML é basicamente o sucessor (ou uma família de sucessores) do HTML, e é bem mais estrito. Em particular, se sua página diz que vai seguir o padrão XHTML, então ela precisa fechar as tags (ou seja, usar o /): http://www.w3.org/TR/xhtml1/#h-4.3

Agora, a questão é, você está usando HTML ou XHTML? Bom, veja o fonte desta página (Ctrl-u, no firefox). A primeira linha é:

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”

Aí está: XHTML 1.0 Strict. Ou seja, pra publicar no Das Haus, você deveria fechar a tag. Já no email, é muito provável que seja interpretado como HTML, então não precisa.

rbp / August 1st, 2008, 12:59 pm / #

Deixe aqui seu comentário