Ejemplo de imagen en el mismo directorio
Ejemplo de imagen en el directorio img
Ejemplo de imagen con semántica visual - <figure> y <figcaption>
Ejemplo de imagen cargada desde otra página web
Ejemplo de imagen responsive y adaptativa - <picture> y <source> con atributo 'media'
1. Imagen según tamaño de pantalla:
El navegador elige qué tamaño de imagen descargar basándose en el ancho de la pantalla usando el
descriptor `w`, evitando gastar recursos o tiempo de descarga innecesario en dispositivos más pequeños.
2. Imagen con distinto formato según el navegador:
El navegador intenta cargar formatos de nueva generación más ligeros (como AVIF o WEBP).
Si no los soporta, recurre al formato tradicional (JPEG) indicado al final como salvavidas.
3. Imagen según requisitos específicos (media queries y densidad):
Cambia drásticamente la imagen dependiendo de las reglas de diseño o media queries.
Además, ofrece diferentes versiones para adaptarse a la densidad de píxeles de la pantalla (usando `2x` o `3x`).
