Imágenes responsive con CSS
Se recomienda utilizar la etiqueta <picture></picture> como contenedor de la imagen. Además se recomienda tener diferentes imágenes con diferentes dimensiones de tamaño para que se carguen en la medida que se observa la página web en dispositivos grandes.
Es decir, si se abre en un dispositivo móvil, colocar una imagen con el tamaño y optimizada para ese tamaño. Esto implica que generes versiones diferentes de una misma imagen donde su diferencia es su tamaño en píxeles y peso en KB.
Ejemplo
Documento HTML
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive images</title> <link rel="stylesheet" href="./style.css"></head><body> <main> <picture> <source media="(min-width: 800px)" srcset="./large.jpg"> <source media="(min-width: 600px)" srcset="./medium.jpg"> <img src="./small.jpg" alt="Es una imagen de ejemplo"> </picture> </main></body></html>Utilizamos la etiqueta <picture></picture> como contenedor de la imagen y dentro de esta, existe otra etiqueta < source> la cual indica dónde está la imagen a cargar dependiendo del viewport.
Estas imágenes en <source> deben cargarse de mayor a menor como está en el documento .html. Para observar qué imagen está cargando según el tamaño de pantalla, damos clic en inspeccionar > Network.
Documento CSS
img { width: 100%;}
