Qual tag HTML ajuda a carregar diferentes imagens para diferentes resoluções de ecrã?

Para carregar diferentes imagens dependendo da resolução do ecrã em HTML, usa-se a tag <picture>. Dentro dela, pode-se especificar várias <source> com o atributo media, que define as condições para a escolha da imagem, e a tag <img> com uma imagem de reserva.

Exemplo:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Exemplo de imagem">
</picture>

Neste exemplo, o navegador escolherá large.jpg se a largura do ecrã for de 800px ou mais, medium.jpg para larguras entre 400px e 799px, e small.jpg para ecrãs menores.

Também, para casos simples, pode-se usar o atributo srcset na tag <img>, especificando diferentes imagens com os seus tamanhos.