Verificação HTML: O atributo "name" no elemento "img" está obsoleto. Use o atributo "id" em vez disso.

Sobre este problema HTML

O atributo name era historicamente usado em elementos img para referenciar imagens através da coleção document.images do JavaScript ou via document.getElementsByName(). No HTML inicial, o name servia como identificador para vários elementos antes do atributo id ser amplamente adotado. O padrão HTML atual (WHATWG) agora marca o name como obsoleto em elementos img, significando que não deve mais ser usado em conteúdo novo.

Isto é importante por várias razões:

Conformidade com padrões: Usar atributos obsoletos significa que o seu HTML não está em conformidade com a especificação atual, o que pode causar erros de validação e pode levar a comportamentos inesperados em versões futuras dos navegadores.
Consistência: O atributo id é o mecanismo universal para identificar unicamente qualquer elemento HTML. Usar id em vez de name mantém a sua marcação consistente e previsível.
Direcionamento com JavaScript e CSS: APIs modernas como document.getElementById() e document.querySelector() funcionam com id, não com name em elementos de imagem. Os seletores CSS também direcionam elementos por id (por exemplo, #myImage), tornando o id a escolha mais versátil.
Ligação por fragmento: O atributo id permite-lhe ligar diretamente a um elemento usando um fragmento de URL (por exemplo, page.html#myImage), enquanto que o atributo obsoleto name em img não serve este propósito.

Para corrigir esta questão, simplesmente substitua name por id nos seus elementos img. Tenha em mente que os valores de id devem ser únicos dentro de todo o documento — dois elementos não podem partilhar o mesmo id. Se tiver código JavaScript que referencia a imagem por nome (por exemplo, document.images["myImage"] ou document.getElementsByName("myImage")), atualize essas referências para usar document.getElementById("myImage") ou document.querySelector("#myImage") em vez disso.

Exemplos

Incorreto: usando o atributo obsoleto `name`

<img src="photo.jpg" name="heroImage" alt="A sunset over the ocean">

Isto desencadeia o erro de validação porque name já não é um atributo válido em img.

Correto: usando o atributo `id`

<img src="photo.jpg" id="heroImage" alt="A sunset over the ocean">

O atributo name é substituído por id, e o elemento pode agora ser direcionado com document.getElementById("heroImage") ou o seletor CSS #heroImage.

Atualizando referências JavaScript

Se o seu código existente referencia a imagem por name, atualize-o adequadamente.

Antes (dependendo do name):

<img src="logo.png" name="siteLogo" alt="Company logo">
<script>
  var logo = document.images["siteLogo"];
  logo.style.border = "2px solid blue";
</script>

Depois (usando id):

<img src="logo.png" id="siteLogo" alt="Company logo">
<script>
  var logo = document.getElementById("siteLogo");
  logo.style.border = "2px solid blue";
</script>

Várias imagens que anteriormente partilhavam um `name`

Como os valores de id devem ser únicos, você não pode dar o mesmo id a vários elementos. Se anteriormente usava o mesmo name em várias imagens e as selecionava como um grupo, mude para uma class partilhada em vez disso:

<img src="slide1.jpg" class="gallery-image" alt="Mountain landscape">
<img src="slide2.jpg" class="gallery-image" alt="Forest trail">
<img src="slide3.jpg" class="gallery-image" alt="River valley">
<script>
  var images = document.querySelectorAll(".gallery-image");
  images.forEach(function(img) {
    img.style.borderRadius = "8px";
  });
</script>

Esta abordagem está em conformidade com os padrões e dá-lhe uma seleção de elementos flexível e moderna usando class para grupos e id para elementos únicos.