HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
View in English Always switch to English
En este artículo, aprenderemos sobre el concepto de imágenes adaptables — imágenes que funcionan bien en dispositivos con una amplia diferencia de tamaños de pantalla, resoluciones y otras tantas características — y observaremos qué herramientas proporciona HTML para ayudar a implementarlas. Esto ayuda a mejorar el rendimiento en diferentes dispositivos.
Examinemos un escenario típico. Un sitio web típico puede contener una imagen de encabezado y algunas imágenes de contenido debajo del encabezado. Es probable que la imagen del encabezado abarque todo el ancho del encabezado y la imagen del contenido quepa en algún lugar dentro de la columna de contenido. He aquí un ejemplo:
Esto funciona bien en un dispositivo de pantalla ancha, como una computadora portátil o de escritorio (puedes ver el ejemplo en vivo y encontrar el código fuente en GitHub). No hablaremos mucho del CSS en esta lección, excepto para decir que:
Sin embargo, surgen problemas cuando comienzas a ver el sitio en un dispositivo de pantalla estrecha. El encabezado de abajo se ve bien, pero empieza a ocupar gran parte de la altura de la pantalla de un dispositivo móvil. Y a este tamaño, es difícil ver los rostros de las dos personas dentro de la primera imagen de contenido.
Una mejora sería mostrar una versión recortada de la imagen que muestre los detalles importantes cuando el sitio se ve en una pantalla estrecha. Se podría mostrar una segunda imagen recortada para un dispositivo de pantalla de ancho medio, como una tableta. Al problema general de querer servir diferentes imágenes recortadas de esta manera, para distintos diseños, se le conoce comúnmente como el problema de la dirección de arte.
Además, no es necesario incrustar imágenes tan grandes en la página si se está viendo en una pantalla móvil. Hacerlo puede desperdiciar ancho de banda; en particular, los usuarios de dispositivos móviles no quieren desperdiciar ancho de banda descargando una imagen grande destinada a usuarios de escritorio, cuando una imagen pequeña sería suficiente para su dispositivo. Por el contrario, una imagen rasterizada pequeña comienza a verse granulada cuando se muestra más grande que su tamaño original (una imagen rasterizada tiene un número determinado de píxeles de ancho y un número determinado de píxeles de alto). Idealmente, se pondrían a disposición del navegador web del usuario múltiples resoluciones. El navegador podría entonces determinar la resolución óptima a cargar según el tamaño de pantalla del dispositivo del usuario. Esto se denomina el problema del cambio de resolución.
Para hacer las cosas más complicadas, algunos dispositivos tienen pantallas de alta resolución que necesitan imágenes más grandes de las que cabría esperar para lucir bien. Esto es, esencialmente, el mismo problema, pero en un contexto ligeramente diferente.
Podrías pensar que las imágenes vectoriales resolverían estos problemas, y lo hacen hasta cierto punto — son pequeñas en tamaño de archivo y escalan bien, y deberías usarlas siempre que sea posible. Sin embargo, no son adecuadas para todos los tipos de imágenes. Las imágenes vectoriales son geniales para gráficos simples, patrones, elementos de interfaz, etc., pero se vuelve muy complejo crear una imagen basada en vectores con el nivel de detalle que encontrarías, por ejemplo, en una foto. Los formatos de imágenes rasterizadas, como los JPEG, son más adecuados para el tipo de imágenes que vemos en el ejemplo anterior.
Este tipo de problema no existía cuando la web se creó por primera vez, a principios y mediados de los noventa — en ese entonces, los únicos dispositivos que existían para navegar por la web eran los ordenadores de escritorio y portátiles, por lo que los ingenieros de navegadores y los redactores de especificaciones ni siquiera pensaban en implementar soluciones. Las tecnologías de imágenes adaptables se implementaron recientemente para resolver los problemas indicados anteriormente, permitiéndote ofrecer al navegador varios archivos de imagen, ya sea mostrando todos lo mismo pero conteniendo diferentes números de píxeles (cambio de resolución), o imágenes diferentes adecuadas para diferentes asignaciones de espacio (dirección de arte).
Nota: Las nuevas características discutidas en este artículo — srcset/sizes/<picture> — son compatibles con las versiones de lanzamiento de los navegadores de escritorio y móviles modernos.
En esta sección, veremos los dos problemas ilustrados anteriormente y mostraremos cómo solucionarlos usando las características de imágenes adaptables de HTML. Debes tener en cuenta que nos centraremos en elementos <img> en esta sección, tal como se muestra en el área de contenido del ejemplo anterior — la imagen del encabezado del sitio es solo decorativa y, por lo tanto, está implementada usando imágenes de fondo con CSS. CSS posee, sin duda, mejores herramientas para el diseño adaptable que HTML, y hablaremos sobre ellas en un futuro módulo de CSS.
Entonces, ¿qué queremos solucionar con el cambio de resolución? Queremos mostrar el mismo contenido de imagen, solo que más grande o más pequeño dependiendo del dispositivo — esta es la situación que tenemos con la segunda imagen de contenido de nuestro ejemplo. El elemento estándar <img> tradicionalmente solo te permite apuntar el navegador a un único archivo fuente:
Sin embargo, podemos utilizar dos atributos — srcset y sizes — para proporcionar varias imágenes de origen adicionales junto con sugerencias para ayudar al navegador a elegir la correcta. Puedes ver un ejemplo de esto en nuestro ejemplo responsive.html en GitHub (consulta también el código fuente):
Los atributos srcset y sizes parecen complicados, pero no son ta