» » Built-in Soporte del navegador para Imágenes Responsive

Built-in Soporte del navegador para Imágenes Responsive

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 javascript  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.

Selección basada Dispositivo-pixel-ratio
¿El dispositivo tiene una pantalla de alta DPI? Cargue una imagen de mayor resolución.

Selección basada en Viewport
¿La imagen pretende siempre llenar una proporción fija de la ventana? Cargar imágenes en relación con el área de visualización.

Selección basada formato de imagen
¿Pueden los tipos de apoyo navegador adicionales de archivo de imagen que ofrecen mejoras de rendimiento, tales como archivos de menor tamaño? Carga un archivo de imagen alternativa como WebP.

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.

Built-in Soporte del navegador para Imágenes Responsive

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.

Built-in Soporte del navegador para Imágenes Responsive

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.

Built-in Soporte del navegador para Imágenes Responsive

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.png"<span class="tag" style="color: rgb(137, 189, 255);" >>="" <source 
    media="(min-width: 465px)"    srcset="images/kitten-sitting.png"<span class="tag" style="color: rgb(137, 189, 255);" >>="" <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten"

Nota cómo no hay javascript 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:

srcset (requerido)

Acepta una sola ruta de archivo de imagen (por ejemplo srcset ="kitten.png").

O una lista delimitada por comas de las rutas de archivos de imagen con descriptores densidad de píxeles (por ejemplo srcset = "kitten.png, kitten@2X.png 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 altatributo.

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.png,
            images/kitten-stretching@1.5x.png 1.5x,  
            images/kitten-stretching@2x.png 2x"<span class="tag" style="color: rgb(137, 189, 255);" >>="" <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.png,
            images/kitten-sitting@1.5x.png 1.5x
            images/kitten-sitting@2x.png 2x"<span class="tag" style="color: rgb(137, 189, 255);" >>="" <img 
    src="images/kitten-curled.png" 
    srcset="images/kitten-curled@1.5x.png 1.5x,
            images/kitten-curled@2x.png 2x"    alt="a cute kitten"

Combine con descriptores de ancho

Fundamentos Web cubre los nuevos atribuyen tamaños para la <img> elemento en profundidad:

"Cuando no se conoce el tamaño final de la imagen, puede ser difícil especificar un descriptor de densidad para las fuentes de imagen. Esto es especialmente cierto para las imágenes que abarcan un ancho proporcional del navegador y son fluidos, dependiendo del tamaño de el navegador.

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.jpg" alt="lighthouse"     sizes="80vw"     srcset="lighthouse-160.jpg 160w, 
             lighthouse-320.jpg 320w,        
             lighthouse-640.jpg 640w,
             lighthouse-1280.jpg 1280w"<span class="tag" style="color: rgb(137, 189, 255);" >>

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:

 

Built-in Soporte del navegador para Imágenes Responsive

 

Por ejemplo, la ventana gráfica de la izquierda es de aprox. 800px de ancho.El navegador cargará faro-640.jpg menos que la proporción de píxeles dispositivo cuyo caso, faro-1280.jpg se cargará lugar en 2x.
 

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.jpg 640w,
                  lighthouse-landscape-1280.jpg 1280w,
                  lighthouse-landscape-2560.jpg 2560w"<span class="tag" style="color: rgb(137, 189, 255);" >>="" <img src="lighthouse-160.jpg" alt="lighthouse"       sizes="80vw"       srcset="lighthouse-160.jpg 160w,
               lighthouse-320.jpg 320w,
               lighthouse-640.jpg 640w,
               lighthouse-1280.jpg 1280w"

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:

 

Built-in Soporte del navegador para Imágenes Responsive

 

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"<span class="tag" style="color: rgb(137, 189, 255);" >>="" <img src="images/butterfly.jpg" alt="a butterfly"

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


Categorias: Noticias / Tutorial / html5 / CSS3 / Html
Añadir Comentario
Información
Usuarios que están en este grupo no pueden dejar comentarios en la página