Uma imagem inline é uma imagem gráfica inserida em uma página da web para adicionar apelo visual, fornecer informações ou representar um hiperlink. As imagens embutidas geralmente estão nos formatos GIF, JPEG ou PNG. Eles são incorporados a uma página da web usando o esquema de URI de dados.

Mulher fazendo parada de mão com um computador

Os URIs de dados permitem a incorporação de dados de pequeno porte que podem ser recuperados instantaneamente pelo navegador. As imagens embutidas são recuperadas pelo navegador junto com o HTML e exibidas como parte do documento da web. Para que o navegador seja capaz de recuperar e exibir as imagens sem muito tempo e problemas, é aconselhável usar imagens embutidas de tamanho pequeno.

Imagens maiores retardariam o tempo de carregamento e fazeriam com que o site demorasse muito para aparecer na tela. A maioria dos visitantes da web não tem paciência para esperar para ver isso acontecer. Isso afetaria negativamente o tráfego do site.

As imagens HTML embutidas são obtidas no servidor do site no qual serão exibidas ou incluídas em outros servidores externos. Usar imagens embutidas de fontes externas é uma questão de contenção, pois isso pode ser feito sem permissão. A tag img é usada para inserir imagens embutidas em parágrafos e cabeçalhos na página da web. A tag img não pode ser usada de forma flutuante. Ele deve ser colocado dentro de outro elemento.

O atributo obrigatório da tag img é o atributo src. O atributo src especifica o endereço da web ou URL a partir do qual o navegador pode recuperar o arquivo de imagem. Além do atributo src, as imagens HTML embutidas podem ser definidas por três atributos opcionais. Estes são alt, align e ismap.

O atributo alt fornece uma alternativa de texto de imagem embutida. Portanto, caso o navegador do visualizador não suporte gráficos, o visualizador verá o texto no lugar da imagem. Usar o atributo alt é altamente recomendado.

O valor do atributo alt pode ser uma string vazia. Por exemplo, se houver uma imagem decorativa, não é necessário fornecer um texto alternativo para ela. Portanto, o valor do atributo alt pode ser deixado em branco.

O estilo da imagem embutida pode ser definido com o atributo align. O atributo align informa ao navegador onde a imagem embutida deve aparecer em relação ao texto na página da web. A imagem embutida pode ser alinhada com a parte superior, central ou inferior do texto adjacente na página da web.

Com o atributo ismap, uma imagem embutida pode ser marcada como um mapa de imagem ativo . Isso significa que diferentes partes da imagem podem ser feitas para produzir ações diferentes sempre que alguém clica nas diferentes partes. Por exemplo, se houver uma imagem em linha mostrando a Terra e Saturno, clicar na Terra pode levar a informações sobre a Terra e clicar em Saturno pode levar a informações sobre Saturno.

Ao contrário dos atributos alt e align, o atributo ismap não funciona por mera inclusão na tag img. Requer alguma configuração feita no servidor. Também pode ser necessário algum conhecimento de programação.