Imagens no HTML

Para colocar uma única imagem em uma página da web, usamos o elemento <img>. Isso é um elemento vazio (quer dizer que não possui conteúdo de texto ou tag de fechamento) que requer no mínimo um atributo para ser útil — src (às vezes pronunciado como seu título completo, source). O atributo src contém um caminho apontando para a imagem que você deseja incorporar na página, que pode ser uma URL relativa ou absoluta, da mesma maneira que o valores de atributo href no elemento <a>.

Por exemplo, se sua imagem for chamada dinossauro.jpg, e está no mesmo diretório de sua página HTML, você poderia inserir a imagem assim:

<img src="dinossauro.jpg" />

Se a imagem estivesse em um subdiretório de images, que estivesse dentro do mesmo diretório da página HTML (que o Google recomenda para fins de indexição/SEO), então você a incorporaria da seguinte maneira:

<img src="images/dinossauro.jpg" />

E assim por diante.

Você pode incorporar a imagem usando seu URL absoluto, por exemplo:

<img src="https://www.example.com/images/dinosaur.jpg" />

Mas isso é inútil, pois apenas faz o navegador trabalhar mais, pesquisando o endereço IP do servidor DNS novamente, etc. Você quase sempre manterá as imagens do seu site no mesmo servidor que o HTML.

Nosso código acima nos daria o seguinte resultado:

O próximo atributo que veremos é alt. Seu valor deve ser uma descrição textual da imagem, para uso em situações em que a imagem não pode ser vista/exibida ou leva muito tempo para renderizar devido a uma conexão lenta à Internet. Por exemplo, nosso código acima pode ser modificado da seguinte maneira:

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

A maneira mais fácil de testar seu texto alt é digitar incorretamente seu nome de arquivo. Se, por exemplo, o nome da nossa imagem estivesse escrito dinosooooor.jpg, o navegador não exibiria a imagem, mas exibiria o texto alternativo:

Então, por que você veria ou precisaria de texto alternativo? Pode ser útil por vários motivos:

• O usuário é deficiente visual e usa um leitor de tela para ler a web para eles. De fato, ter o texto alternativo disponível para descrever imagens é útil para a maioria dos usuários.
• Como descrito acima, você pode ter digitado o nome do arquivo ou caminho errado.
• O navegador não suporta o tipo de imagem. Algumas pessoas ainda usam navegadores somente de texto, como Lynx, que alternativamente exibe o texto alternativo das imagens.
• Você pode fornecer texto para os mecanismos de pesquisa utilizarem. Por exemplo, os mecanismos de pesquisa podem corresponder o texto alternativo às consultas de pesquisa.
• Os usuários desativaram as imagens para reduzir o volume e as distrações de transferência de dados. Isso é especialmente comum em telefones celulares e em países onde a largura de banda é limitada e cara.

O que exatamente você deve escrever dentro do seu atributo alt? Depende do por que a imagem está lá em primeiro lugar. Em outras palavras, o que você perde se sua imagem não aparecer:

• Decoração. Se a imagem é apenas decoração e não faz parte do conteúdo, adicione um espaço em branco alt="". Por exemplo, um leitor de tela não perde tempo lendo conteúdo que não é essencial para o usuário. Imagens decorativas realmente não pertencem ao seu HTML. CSS background images deve ser usado para inserir decoração, mas se for inevitável, alt="" é o melhor caminho a percorrer.
• Conteúdo. Se sua imagem fornecer informações significativas, forneça as mesmas informações em um breve alt texto. Ou melhor ainda, no texto principal que todos podem ver. Não escreva redundante alt texto. O quão irritante seria para um usuário que enxerga se todos os parágrafos fossem escritos duas vezes no conteúdo principal? Se a imagem for descrita adequadamente pelo corpo do texto principal, você pode simplesmente usar alt="".
• Link. Se você colocar uma imagem dentro das tags <a>, para transformar uma imagem em um link, você ainda deve fornecer links acessíveis. Nesses casos, você também pode escrevê-lo no mesmo elemento <a>, ou dentro do atributo alt da imagem. O que funcionar melhor no seu caso.
• Texto. Você não deve colocar seu texto em imagens. Se o cabeçalho principal precisar de uma sombra projetada, por exemplo, use CSS para isso, em vez de colocar o texto em uma imagem. No entanto, se você realmente não puder evitar fazer isso, deve fornecer o texto dentro do atributo alt.

Essencialmente, a chave é oferecer uma experiência utilizável, mesmo quando as imagens não podem ser vistas. Isso garante que todos os usuários não estejam perdendo nenhum conteúdo. Tente desativar as imagens no seu navegador e veja como as coisas ficam. Você logo perceberá como o texto alternativo é útil se a imagem não puder ser vista.

Você pode usar os atributos width e height, para especificar a largura e altura da sua imagem. Você pode encontrar a largura e a altura da sua imagem de várias maneiras. Por exemplo, no Mac, você pode usar Cmd + I para exibir as informações do arquivo de imagem. Voltando ao nosso exemplo, poderíamos fazer isso:

<img
  src="images/dinosaur.jpg"
  alt="A cabeça e o tronco de um esqueleto de dinossauro;
          tem uma cabeça grande com dentes longos e afiados"
  width="400"
  height="341" />

Isso não resulta em muita diferença para a tela, em circunstâncias normais. Mas se a imagem não estiver sendo exibida, por exemplo, o usuário acabou de navegar para a página e a imagem ainda não foi carregada, você notará que o navegador está deixando um espaço para a imagem aparecer:

É uma coisa boa a fazer, resultando no carregamento da página mais rápido e sem problemas.

No entanto, você não deve alterar o tamanho das suas imagens usando atributos HTML. Se você definir o tamanho da imagem muito grande, terá imagens granuladas, confusas ou muito pequenas e desperdiçando largura de banda ao fazer o download de uma imagem que não atenda às necessidades do usuário. A imagem também pode ficar distorcida, se você não mantiver a proporção de tela. Você deve usar um editor de imagens para colocar sua imagem no tamanho correto antes de colocá-la em sua página da web.

Como nos links, você também pode adicionar o atributo title nas images, para fornecer mais informações de suporte, se necessário. No nosso exemplo, poderíamos fazer isso:

<img
  src="images/dinosaur.jpg"
  alt="A cabeça e o tronco de um esqueleto de dinossauro;
          tem uma cabeça grande com dentes longos e afiados"
  width="400"
  height="341"
  title="Um T-Rex em exibição no Museu da Universidade de Manchester" />

Isso nos dá uma dica de ferramenta, assim como os títulos dos links:

Os títulos das imagens não são essenciais para incluir. Geralmente, é melhor incluir essas informações de suporte no texto principal do artigo, em vez de anexá-las à imagem. No entanto, eles são úteis em algumas circunstâncias; por exemplo, em uma galeria de imagens quando você não tem espaço para legendas.

Agora é sua vez de jogar! Esta seção de aprendizado ativo o ajudará a executar com um simples exercício de incorporação. Você é fornecido com um básico <img> tag; gostaríamos que você incorporasse a imagem localizada no seguinte URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Anteriormente, dissemos para nunca vincular as imagens a outros servidores, mas isso é apenas para fins de aprendizado; portanto, deixaremos você de fora dessa vez.

Também gostaríamos que você:

• Adicione algum texto alternativo e verifique se ele funciona incorretamente com o URL da imagem.
• Defina a imagem correta width e height (dica; isto é 200px largo e 171px altura), experimente outros valores para ver qual é o efeito.
• Defina um title na imagem.

Se você cometer um erro, sempre poderá redefini-lo usando o botão Reset. Se você realmente ficar preso, pressione o botão Show solution para ver a resposta:

<h2>Input</h2>
<textarea id="code" class="input"><img></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

.input,
.output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function () {
  textarea.value =
    '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum">';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Por falar em legendas, existem várias maneiras de adicionar uma legenda para acompanhar sua imagem. Por exemplo, não haveria nada para impedi-lo de fazer isso:

<div class="figure">
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

Está tudo bem. Isso contém o conteúdo que você precisa e é bem estiloso usando CSS. Mas há um problema aqui: não há nada que vincule semanticamente a imagem à sua legenda, o que pode causar problemas para os leitores de tela. Por exemplo, quando você tem 50 imagens e legendas, qual legenda combina com qual imagem?

Uma solução melhor, é usar os elementos do HTML5 <figure> e <figcaption>. Eles são criados exatamente para esse propósito: fornecer um contêiner semântico para figuras e vincular claramente a figura à legenda. Nosso exemplo acima, pode ser reescrito assim:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

O elemento <figcaption> informa aos navegadores e à tecnologia de assistência que a legenda descreve o outro conteúdo do elemento <figure>.

Uma figura não precisa ser uma imagem. É uma unidade de conteúdo independente que:

• Expressa seu significado de maneira compacta e fácil de entender.
• Pode ir em vários lugares no fluxo linear da página.
• Fornece informações essenciais de suporte ao texto principal.

Uma figura pode ser várias imagens, um trecho de código, áudio, vídeo, equações, uma tabela ou outra coisa.

Nesta seção de aprendizado ativo, gostaríamos que você pegasse o código finalizado da seção de aprendizado ativo anterior e o transformasse em uma figura:

• Envolve em um elemento <figure>.
• Copie o texto do atributo title, remova o atributo title, e coloque o texto dentro de um elemento <figcaption> abaixo da imagem.

Se você cometer um erro, sempre poderá redefini-lo usando o botão Reset. Se você realmente ficar preso, pressione o botão Show solution para ver a resposta:

<h2>Input</h2>
<textarea id="code" class="input"></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

.input,
.output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function () {
  textarea.value =
    '<figure>\n  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171">\n  <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Você também pode usar CSS para incorporar imagens em páginas da web (e JavaScript, mas isso é outra história). A propriedade background-image do CSS, e outras propriedades background-*, são usados para controlar o posicionamento da imagem de fundo. Por exemplo, para colocar uma imagem de plano de fundo em cada parágrafo de uma página, você pode fazer o seguinte:

p {
  background-image: url("images/dinosaur.jpg");
}

A imagem incorporada resultante é sem dúvida mais fácil de posicionar e controlar do que as imagens HTML. Então, por que se preocupar com imagens HTML? Como sugerido acima, as imagens de plano de fundo CSS são apenas para decoração. Se você quiser adicionar algo bonito à sua página para melhorar o visual, tudo bem. No entanto, essas imagens não têm significado semântico. Eles não podem ter nenhum equivalente de texto, são invisíveis para os leitores de tela, etc. É hora das imagens HTML brilharem!

Resumindo: se uma imagem tiver significado, em termos de seu conteúdo, você deverá usar uma imagem HTML. Se uma imagem é puramente decorativa, você deve usar imagens de plano de fundo CSS.

É tudo por agora. Cobrimos imagens e legendas em detalhes. No próximo artigo, avançaremos, analisando como usar HTML para incorporar vídeo e áudio em páginas da web.

• Menu: Multimídia e Incorporação
• Próxima