Presentación del Elemento <picture>
El elemento <picture> ofrece un enfoque declarativo hacia la carga recurso de imagen. Los desarrolladores web ya no necesitarán CSS o jаvascript para manejar las imágenes en diseños sensibles. Y los usuarios se benefician de forma nativa optimizando recurso de imagen de carga, especialmente importante para los usuarios de conexiones de móviles de Internet más lentas.
Junto a la nueva srcset y tamaños (sizes) atributos recientemente añadidos a <img>, el elemento <picture> da a los desarrolladores web más flexibilidad en la especificación de los recursos de imagen. Escribe el marcador en HTML y dejar que el navegador haga el trabajo de detectar cualquiera de los siguientes escenarios, tiempos de carga, solos o en combinación, para apoyar diseños sensibles y mejorar:
- Selección basada dirección-Art
¿Es esto un dispositivo móvil que tuvo lugar en una orientación vertical o un amplio monitor de escritorio? Cargue una imagen que está optimizado para las dimensiones de la pantalla dadas.
El uso para la dirección de arte
El uso más común del elemento <picture> será de "dirección de arte" en diseños sensibles. En lugar de tener una imagen que se escala hacia arriba o abajo basándose en el ancho de visualización, las imágenes múltiples pueden ser diseñados para llenar más apropiadamente la ventana del navegador.
El resultado de la utilización de una sola imagen que se escala hacia arriba o hacia abajo dependiendo de la anchura de la ventana gráfica.
Utilice varias imágenes diferentes para llenar más apropiadamente la ventana del navegador.
Mejorar el rendimiento de carga de recursos
Al usar <picture> o <img> con el srcset y tamaños de atributos, el navegador sólo se descargará la imagen que explícitamente para el escenario de juego. Esta aplicación nativa es compatible con programas de análisis de HTML y puede tomar ventaja de la imagen de caché del navegador y habilidades de precarga.
Vea una demostración en vivo
Es un hecho que Internet fue creado para albergar imágenes de gatos. Usando<picture> podemos emular la sorprendente capacidad de los gatos para ajustar al espacio que se les da, no importa cuán grande o pequeño.
Abra la demo en una nueva pestaña con Cromo 38 o superior. Cambiar el tamaño de la ventana para ver el gato en acción.
Como punto de partida, esta demo sólo muestra fuera el mínimo de características que <picture> tiene para ofrecer. Vamos a profundizar en la sintaxis ahora.
El sintaxis <picture>
El siguiente fragmento de código HTML y CSS es todo lo que se utiliza para implementar la demo:
<style>
img {display: block; margin: 0 auto;}
</style>
<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.webp">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.webp">
<img
src="images/kitten-curled.webp"
alt="a cute kitten">
</picture>Nota cómo no hay jаvascript involucrados y las bibliotecas no-terceros. El CSS <style> bloque se utiliza sólo para estilizar el elemento de la imagen y no contiene preguntas de los medios. La implementación nativa del <picture> elemento significa que usted puede declarar sus imágenes sensibles utilizando sólo HTML.
Utilizar con <fuente> elementos
El <picture> elemento no tiene atributos únicos de su propia. La magia sucede cuando <picture> se utiliza como contenedor de <origen>.
El <source> elemento, que se utiliza para los medios de carga, tales como video y audio, se ha actualizado para una imagen de carga y se han añadido estos nuevos atributos:
Acepta una sola ruta de archivo de imagen (por ejemplo srcset ="kitten.webp").
O una lista delimitada por comas de las rutas de archivos de imagen con descriptores densidad de píxeles (por ejemplo srcset = "kitten.webp, kitten@2X.webp 2x"), donde se asume un descriptor 1x cuando se deja fuera. Consulte Combinar con descriptores densidad de píxeles para este en uso.
los medios de comunicación (opcional)
Acepta cualquier consulta de medios válida que normalmente se encuentra en una CSSmedia selector (por ejemplo = medios de
comunicación "(max-width: 30em)"). Consulte la anterior <picture> sintaxis ejemplo de esto está en uso.
Tamaños (opcional)
Acepta un solo descriptor de ancho (por ejemplo, tamaños = "100vw") o una sola consulta de medios con descriptor de ancho (por ejemplo, tamaños = "(max-width: 30em) 100vw"). O una lista delimitada por comas de las consultas de los medios de comunicación con un descriptor de ancho (por ejemplo, tamaños = "(max-width: 30em) 100vw, (max-width: 50em) 50vw, Calc (33vw -100px)") en el que el último elemento la lista se utiliza como valor predeterminado.
Consulte Combinar con descriptores ancho de este en uso.
Tipo (opcional)
Acepta un tipo compatible MIME (por ejemplo, type = "image / webp" otype = "image / vnd.ms-foto"). Consulte Carga de formatos de archivo de imagen alternativos para este en uso.
El navegador utilizará los consejos para pasar como valores de atributo la carga del recurso de imagen más apropiada. La orden de la lista de etiquetas importa!, El navegador usará la primera <source> elemento con un toque a juego e ignorar cualquier siguientes <source> etiquetas.
Añadir una etiqueta <img> elemento final
El <img> elemento también se ha actualizado para ser utilizado dentro de <picture> como el de reserva en caso de un navegador no soporta el elemento de imagen o si no hay etiquetas de elemento de origen se corresponden. Usando <img> dentro de <picture> es un requisito -si se le olvida, no hay imágenes se mostrarán.
Utilice <img> para declarar la imagen predeterminada que se utiliza dentro de un <picture> bloque. Lugar <img> como el último hijo de <picture> desde el navegador ignorará cualquier <fuente> declaraciones que se producen después de un <img> se encuentra la etiqueta. La etiqueta de la imagen es también donde se debe adjuntar un texto alternativo mediante el elemento de imagen alt atributo.
Combine con descriptores densidad de píxeles
Añadir soporte para pantallas de alta resolución utilizando descriptores densidad de píxeles como 1x, 1.5x, 2x, 3x y. El nuevo atributo srcset aplica tanto <img> y <fuente> elementos.
El siguiente ejemplo es compatible 1x, 1.5x, y 2x pantallas de resolución:
<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.webp,
images/kitten-stretching@1.5x.webp 1.5x,
images/kitten-stretching@2x.webp 2x">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.webp,
images/kitten-sitting@1.5x.webp 1.5x
images/kitten-sitting@2x.webp 2x">
<img
src="images/kitten-curled.webp"
srcset="images/kitten-curled@1.5x.webp 1.5x,
images/kitten-curled@2x.webp 2x"
alt="a cute kitten">
</picture>Combine con descriptores de ancho
Fundamentos Web cubre los nuevos atribuyen tamaños para la <img> elemento en profundidad:
En lugar de suministrar tamaños de imagen fija y densidades, el tamaño de cada imagen suministrada se puede especificar mediante la adición de un descriptor de anchura a lo largo con el tamaño del elemento de imagen, permitiendo que el navegador para calcular automáticamente la densidad de píxel efectivo y elegir la mejor imagen para descargar. "
He aquí un ejemplo del uso de los tamaños de atributos para establecer la proporción de una imagen para llenar siempre el 80% de la ventana gráfica. Se combina con el srcset atributo para abastecer cuatro versiones de la misma foto del faro en anchos de 160px, 320px, 640px y 1280px de ancho:
<img src="lighthouse-160.webp" alt="lighthouse"
sizes="80vw"
srcset="lighthouse-160.webp 160w,
lighthouse-320.webp 320w,
lighthouse-640.webp 640w,
lighthouse-1280.webp 1280w">El navegador utilizará estos consejos para elegir el recurso de imagen más adecuada para servir en base a la resolución de ancho de la ventana gráfica y la pantalla de hardware:
Con la adición de <picture>, los tamaños de atributos se pueden aplicar a ambos <img> y <fuente> elementos:
<picture>
<source media="(min-width: 800px)"
sizes="80vw"
srcset="lighthouse-landscape-640.webp 640w,
lighthouse-landscape-1280.webp 1280w,
lighthouse-landscape-2560.webp 2560w">
<img src="lighthouse-160.webp" alt="lighthouse"
sizes="80vw"
srcset="lighthouse-160.webp 160w,
lighthouse-320.webp 320w,
lighthouse-640.webp 640w,
lighthouse-1280.webp 1280w">
</picture>Basándose en el ejemplo anterior, cuando la ventana está a 800px y por encima, el navegador le servirá una versión paisaje de la versión de faro en su lugar:
La ventana de la izquierda está por encima de 800px de ancho por lo que se mostrará una versión paisaje de la foto del faro.Cargar formatos de archivo de imagen alternativos
El tipo de atributo de <origen> se puede utilizar para cargar formatos de archivo de imagen alternativos que podrían no ser compatibles con todos los navegadores. Por ejemplo, puede servir una imagen en formato WebP para navegadores que lo soportan, mientras que cae de nuevo a un JPEG en otros navegadores:
<picture>
<source type="image/webp" srcset="images/butterfly.webp">
<img src="images/butterfly.webp" alt="a butterfly">
</picture>Ejemplos de código adicionales
Consulte Imágenes Responsive: Casos de Uso y documentados fragmentos de código para empezar en el blog Dev.Opera de una lista exhaustiva de ejemplos combinando <picture> y <img> con los srcset, medios de comunicación, tamaños y tipo de atributos.
Pruébelo hoy
Ver la demo del elemento <picture>
El <picture> elemento es actualmente disponible de Chrome 38. Pruébalo con emulación de pantalla en los DevTools Chrome.
Si tiene comentarios acerca de esta nueva característica, envíanos una línea en el error de seguimiento de Chrome.
Si usted está listo para empezar a aplicar <picture> hoy, sino también querer añadir soporte para imágenes de respuesta en los navegadores adicionales, consulte esta muestra del elemento <picture> para el uso de <picture> con un polyfill.
Asegúrese también de comprobar hacia fuera la guía para imágenes en Fundamentos Web de ejemplos de mejores prácticas de implementación de imágenes en la web. Fuente en ingles
Comentarios