El nuevo elemento
Al margen de los nuevos atributos srcset y sizes definidos recientemente para los elementos
La elección del mejor archivo de imagen depende de muchos factores:
El uso más habitual del elemento
Izquierda: la misma imagen se escala para todos los tamaños de ventana. Derecha: diferentes imágenes en función del tamaño de la ventana del navegador.
Cuando se utiliza el nuevo elemento
Como sabes, Internet se inventó para mostrar fotos de gatitos, así que vamos a utilizar el elemento
Abrir la demo en una nueva pestaña del navegador. Para ver el elemento
Esta demo es muy básica porque es una primera toma de contacto con las posibilidades del nuevo elemento
El siguiente código HTML y CSS muestra todo lo necesario para crear la anterior demo:
Como puedes ver, no se utiliza ni código JavaScript ni ninguna otra librería externa. El bloque de código CSS se utiliza para aplicar unos estilos básicos a la imagen y de nuevo puedes ver que no se utilizan hacks ni media queries. Cuando el navegador soporta el elemento
El elemento
El elemento
Indica la ruta de la imagen a la que se hace referencia (ejemplo srcset="kitten.png").
También se puede indicar una lista de rutas separadas por comas y que incluyan el sufijo que indica la densidad de píxeles (ejemplo srcset="kitten.png, kitten@2X.png 2x"). Para la densidad de píxeles normales de 1 no hace falta añadir el descriptor 1x.
Lee la sección Seleccionando la imagen en función de la densidad de píxeles para saber cómo utilizarlo en la práctica.
Permite indicar cualquier media query que sea válido en el selector @media de CSS (ejemplo media="(max-width: 30em)").
Acepta cualquier valor que describa la anchura de la imagen (ejemplo sizes="100vw") o un media query que defina la anchura de la imagen (ejemplo sizes="(max-width: 30em) 100vw").
También se puede indicar una lista ed media queries separadas por comas y que describan varias anchuras de la imagen (ejemplo sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"). En este caso se utiliza por defecto el último de los valores definidos.
Acepta como valor cualquier tipo MIME estándar (ejemplo type="image/webp" o type="image/vnd.ms-photo").
Lee la sección Seleccionando diferentes formatos de imagen para saber cómo utilizarlo en la práctica.
El navegador utiliza el valor de todos los atributos anteriores para determinar qué imagen se debe cargar de entre todas las variantes definidas. Ten en cuenta que el orden de las etiquetas es muy importante, ya que el navegador siempre utilizará el primer elemento
El elemento
Añadir un elemento
La imagen definida por el elemento
Utiliza los descriptores 1x, 1.5x, 2x y 3x para añadir soporte para pantallas de alta densidad de píxeles, como por ejemplo las de los smartphones. El atributo srcset que permite indicar estos descriptores ahora se soporta tanto en el elemento
El siguiente ejemplo muestra cómo soportar las pantallas de tipo 1x, 1.5x y 2.x:
Cuando se desconoce el tamaño definitivo de una imagen, no es posible indicar el descriptor relacionado con la densidad de píxeles mencionado en la sección anterior. Así que en vez de definir imágenes de anchura fija, se puede añadir un descriptor de su anchura para que el navegador calcule automáticamente la densidad de píxeles y así descargue la mejor imagen en cada caso.
En este ejemplo se utiliza el atributo sizes para definir que la imagen siempre ocupe el 80% de la anchura de la ventana del navegador. Además, se combina con el atributo srcset para definir cuatro versiones diferentes de la misma foto de un faro, cada una con una anchura específica: 160px, 320px, 640px y 1280px:
El navegador utiliza este descriptor de la anchura para elegir la mejor imagen en función de la anchura del navegador y de la resolución de la pantalla:
En este ejemplo, la ventana de la izquierda tiene aproximadamente 800px de ancho, por lo que el navegador carga la imagen lighthouse-640.jpg. No obstante, si el dispositivo tiene una densidad de píxeles de 2x, entonces se carga la imagen lighthouse-1280.jpg.
Al añadir
Siguiendo con este mismo ejemplo, cuando el navegador tiene una anchura de 800px o superior, se carga la imagen panorámica del faro:
La anchura del navegador de la izquierda es mayor que 800px, por lo que se muestra la versión panorámica de la imagen.
El atributo type del elemento
Puedes consultar el artículo Responsive Images: Use Cases and Documented Code Snippets to Get You Started del blog para desarrolladores de Opera.com para obtener la lista completa de ejemplos de uso de los elementos
El elemento
Este artículo fue publicado originalmente por Pearl Chen y ha sido traducido con permiso por Javier Eguiluz.
, el nuevo elemento
Seleccionando la imagen en función de criterios artísticos
Mejorando el rendimiento al cargar las imágenes
con los atributos srcset y sizes, el navegador solamente descarga la imagen adecuada para el navegador y las condiciones de acceso del usuario (tamaño del navegador, densidad en píxeles de la pantalla, formatos soportados por el navegador, etc.) La ventaja de que este comportamiento sea nativo del navegador es que se pueden aprovechar todas las funcionalidades de los navegadores, como la caché de contenidos y la precarga de imágenes.
El elemento
La sintaxis del elemento
Uso de
Atributo srcset (obligatorio)
Atributo media (opcional)
Atributo sizes (opcional)
Atributo type (opcional)
Añade un elemento
al final
también se ha actualizado para poder utilizarlo dentro del elemento
dentro del elemento
será la que utilizará el elemento
como último elemento hijo de
. Si defines un texto alternativo para la imagen mediante el atributo alt, asegúrate de añadir ese atributo en la etiqueta
, no en
Seleccionando la imagen en función de la densidad de píxeles
como en los elementos
Seleccionando la imagen en función de su anchura
como en los elementos
Seleccionando diferentes formatos de imagen
Ejemplos adicionales
junto con los atributos srcset, media, sizes y type.
Soporte de los navegadores actuales
Sobre el autor