¿Qué etiqueta HTML ayuda a cargar diferentes imágenes para diferentes resoluciones de pantalla?

Para cargar diferentes imágenes según la resolución de la pantalla en HTML, se utiliza la etiqueta <picture>. Dentro de ella, se pueden especificar varias <source> con el atributo media, que establece las condiciones para la selección de la imagen, y la etiqueta <img> con una imagen de reserva.

Ejemplo:

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

En este ejemplo, el navegador elegirá large.jpg si el ancho de la pantalla es de 800px o más, medium.jpg para anchos entre 400px y 799px, y small.jpg para pantallas más pequeñas.

También, para casos simples, se puede usar el atributo srcset en la etiqueta <img>, especificando diferentes imágenes con sus tamaños.