Una imagen tiene dimensiones fijas, por lo que, si es más grande que la ventana gráfica, creará una barra de desplazamiento. Una forma común de solucionar este problema es dar a todas las imágenes un max-width del 100%, esto hará que la imagen se encoja para ajustarse al espacio disponible, tal como se lo explicamos en el siguiente vídeo:
Imágenes fluidas con CSS, código realizado con JSFiddle. Puede ingresar al siguiente enlace: https://jsfiddle.net/InaWeb/aLoj08gc/14/
Según el sitio web web.dev (2024): “Para brindar una buena experiencia del usuario, los sitios deben esforzarse por tener un CLS de 0.1 o menos para al menos el 75% de las visitas a la página.” Entiéndase CLS como el: “.. cambio de diseño acumulado (CLS) que es una de las tres Métricas web esenciales y mide la inestabilidad del contenido mediante la suma de las puntuaciones de los cambios de diseño que no ocurren dentro de los 500 milisegundos de la entrada del usuario”.
Otros de los métodos es crear imágenes fluidas con CSS srcset:
Para crear imágenes fluidas con CSS y srcset, puedes aprovechar la capacidad de la propiedad srcset de HTML5 para proporcionar varias versiones de una imagen con diferentes tamaños y resoluciones. Esto es útil para asegurar que los navegadores seleccionen la imagen más adecuada según el tamaño y la densidad de píxeles de la pantalla del dispositivo del usuario. Aquí hay un ejemplo:
Imágenes fluidas con CSS srcset, código realizado con JSFiddle. Puede ingresar al siguiente enlace: https://jsfiddle.net/InaWeb/fdyvbmzc/24/
En el ejemplo anterior podemos observar que:
- srcset proporciona una lista de imágenes con sus tamaños en píxeles (w). El navegador seleccionará la imagen más adecuada según la resolución de la pantalla del usuario.
- sizes indica al navegador cómo escalar la imagen en diferentes tamaños de pantalla. En este caso, la imagen se mostrará con un tamaño de 280px si la pantalla tiene un ancho máximo de 320px, 440px si el ancho es máximo de 480px, y así sucesivamente.
Recuerde que debe tener versiones de sus imágenes en diferentes tamaños para que este método funcione correctamente. Puede generar estas versiones utilizando herramientas como ImageMagick o servicios en línea.
Este enfoque ayuda a mejorar el rendimiento y la eficiencia al cargar imágenes, ya que solo se descarga la versión necesaria según las características de la pantalla del usuario.
Recurso directo: https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
...