{"id":688,"date":"2024-04-19T21:30:06","date_gmt":"2024-04-20T00:30:06","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=688"},"modified":"2025-11-06T00:03:27","modified_gmt":"2025-11-06T03:03:27","slug":"imagens-no-html-parte-1","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-1\/","title":{"rendered":"Imagens no HTML parte 1"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Imagens no HTML<\/strong>: As imagens s\u00e3o elementos cruciais para a experi\u00eancia do usu\u00e1rio, pois transmitem informa\u00e7\u00f5es de forma r\u00e1pida e tornam o conte\u00fado mais envolvente. No HTML, a tag <img><\/code><\/strong> \u00e9 a porta de entrada para a m\u00eddia visual.<\/p>\n\n\n\n

No entanto, em um mundo de dispositivos e larguras de banda variadas, usar imagens corretamente vai al\u00e9m de apenas inserir a tag. \u00c9 preciso entender a sem\u00e2ntica<\/strong>, a acessibilidade<\/strong> e, crucialmente, o desempenho<\/strong>.<\/p>\n\n\n\n

Neste artigo, vamos explorar a tag <img><\/code> e as t\u00e9cnicas avan\u00e7adas de otimiza\u00e7\u00e3o que garantem que suas imagens sejam carregadas de forma inteligente e eficiente.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. A Tag <img><\/code>: O Essencial<\/h2>\n\n\n\n

A tag <img><\/code> \u00e9 um elemento vazio<\/strong> (n\u00e3o possui tag de fechamento) e se comporta como um elemento em linha<\/strong> (ou replaced element<\/em>).<\/p>\n\n\n\n

Sintaxe e Atributos Fundamentais<\/h3>\n\n\n\n
Atributo<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Import\u00e2ncia<\/strong><\/td><\/tr><\/thead>
src<\/code><\/strong><\/td>Source (Fonte):<\/strong> Especifica o endere\u00e7o (URL ou caminho local) da imagem a ser carregada.<\/td>Obrigat\u00f3rio<\/strong> para exibir a imagem.<\/td><\/tr>
alt<\/code><\/strong><\/td>Texto Alternativo:<\/strong> Fornece uma descri\u00e7\u00e3o concisa da imagem.<\/td>Crucial<\/strong> para Acessibilidade (leitores de tela) e SEO (indexa\u00e7\u00e3o da imagem).<\/td><\/tr>
width<\/code> \/ height<\/code><\/strong><\/td>Define a largura e altura da imagem em pixels.<\/td>Essencial<\/strong> para Performance! Evita o Cumulative Layout Shift (CLS)<\/em>, reservando espa\u00e7o antes que a imagem carregue.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Exemplo B\u00e1sico e Sem\u00e2ntico:<\/strong><\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<img src=\"caminho\/para\/logo.png\" alt=\"Logotipo da Empresa [Nome]\" width=\"100\" height=\"100\"><\/code><\/pre>\n\n\n\n\"Logotipo\n\n\n\n
<\/div>\n\n\n\n
2. Otimiza\u00e7\u00e3o de Carregamento (loading<\/code>)<\/h2>\n\n\n\n
Controlar quando o navegador come\u00e7a a baixar uma imagem \u00e9 vital para a performance. O atributo loading<\/code> permite implementar o lazy loading<\/em> nativo.<\/p>\n\n\n\n
Valor do loading<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Quando Usar<\/strong><\/td><\/tr><\/thead>
eager<\/code><\/strong><\/td>(Padr\u00e3o):<\/strong> O navegador baixa a imagem imediatamente (ideal para logotipos ou imagens acima da dobra).<\/td>Para imagens cruciais \u00e0 visualiza\u00e7\u00e3o inicial.<\/td><\/tr>
lazy<\/code><\/strong><\/td>Carregamento Pregui\u00e7oso:<\/strong> A imagem s\u00f3 \u00e9 baixada quando est\u00e1 prestes a entrar na \u00e1rea vis\u00edvel (viewport<\/em>).<\/td>Ideal<\/strong> para imagens em galerias, rodap\u00e9s ou se\u00e7\u00f5es abaixo da dobra.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Exemplo:<\/strong><\/p>\n\n\n\n
HTML<\/p>\n\n\n\n
<img src=\"galeria-01.jpg\" alt=\"Foto da paisagem\" loading=\"lazy\"><\/code><\/pre>\n\n\n\n\"Logotipo\n\n\n\n
<\/div>\n\n\n\n
3. Imagens Responsivas e Condicionais (srcset<\/code> e sizes<\/code>)<\/h2>\n\n\n\n
Para garantir que um dispositivo m\u00f3vel n\u00e3o baixe uma imagem gigante desnecessariamente, o HTML5 introduziu os atributos srcset<\/code> e sizes<\/code>, que trabalham em conjunto para permitir que o navegador escolha a melhor fonte de imagem.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. srcset<\/code> (Fontes de Imagem)<\/strong><\/h3>\n\n\n\n