Também podemos definir o tamanho da imagem com base na altura. Para isso, utilizamos o atributo height. Assim como ocorre com o width, se não atribuirmos nenhum valor a ele, o ajuste será automático para que a imagem não fique distorcida. Vale ressaltar que tanto a altura quanto a largura da imagem podem ser definidas por meio de estilos CSS.
O atributo longdesc é utilizado quando queremos adicionar uma descrição maior ao elemento <img>, além do que já está definido no atributo alt. Trata-se de um recurso útil para descrever a imagem e, assim, garantir maior acessibilidade ao conteúdo. Entretanto, esse recurso não está mais disponível em HTML5.
O atributo referrerpolicy determina uma série de políticas de segurança que podem ser aplicadas durante a realização de requisições HTTP ao utilizar imagens em uma página HTML. Seu uso está vinculado ao campo opcional referer do cabeçalho HTTP.
Na prática, quando utilizamos esse recurso e fazemos uma requisição HTTP, o endereço de origem é enviado junto com a requisição e armazenado no campo referer. Na tag <img> utilizamos o atributo referrpolicy para dizer ao navegador quais informações serão enviadas.
A utilização desse recurso ajuda a evitar a entrada de código maliciosos na página e, portanto, oferecem mais segurança. Existem diferentes valores que podem ser adicionados a esse atributo, são eles:
no-referrer-when-downgrade: indica que será enviado o endereço de origem quando as requisições forem do mesmo nível ou se elevam, como entre requisições HTTP para HTTP ou HTTPS. Já se a requisição for de HTTPS para HTTP, o valor não será enviado;
strict-origin: envia a referência completa em requisições de mesma origem, porém, entre o mesmo nível de protocolo, como HTTP para HTTP ou HTTPS para HTTPS;
strict-origin-when-cross-origin: envia a referência completa entre requisições HTTPS e não envia nada se a requisição for entre HTTPS para HTTP.
Uma preocupação constante em pessoas que desenvolvem aplicações front-end é construir páginas responsivas que possam ser acessadas por qualquer dispositivo sem o comprometimento da qualidade. O atributo sizes ajuda a definir o espaço disponível na página que será utilizado para a imagem.
Uma das unidades de medida do atributo sizes é a vw — viewport width — que significa largura da janela de visualização. Vale ressaltar que se nenhum valor para sizes for informado, é considerado o padrão de 100vw, que significa 100% da área. O atributo sizes deve ser utilizado em conjunto com o atributo srcset, que falaremos mais adiante.
Conforme mencionamos, o atributo src é utilizado para definir o local de origem da imagem, que tanto pode ser uma pasta quanto um link externo.
O atributo srcset é utilizado para relacionar as imagens em diferentes tamanhos que podem ser utilizadas na página. Por meio da validação do conteúdo informado no atributo sizes, o navegador realiza uma série de cálculos para escolher a imagem mais apropriada para o dispositivo da pessoa usuária.
O atributo ismap é utilizado para enviar ao lado do servidor qual a posição da imagem foi clicada, ou seja, quais as coordenadas x e y correspondentes à área da imagem que a pessoa usuária clicou. Para isso, é preciso que a imagem seja clicável. Portanto, ela deve ser utilizada em conjunto com a tag <a>.
Podemos utilizar uma imagem e dividi-la em várias áreas clicáveis, assim, ela pode ser usada para a construção de menus, acessar links ou para executar funções JavaScript, por exemplo. Para isso, é preciso utilizar o atributo usemap em conjunto com o elemento <map>, que define o que será realizado em cada área. Veja o algoritmo abaixo:
O elemento <img> pode ser utilizado com imagens de diferentes formatos. Entretanto, não existe um padrão definido para todos os navegadores. Dessa forma, é preciso avaliar se a imagem utilizada é compatível com a ferramenta. Confira quais imagens são compatíveis com o navegador Firefox: