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

En este ejemplo que a continuación les traemos, cambiar el tamaño del navegador para ver las diferentes versiones de la carga de la imagen en diferentes tamaños de ventana gráfica. El navegador busca el primero elemento <source> en la consulta coincide con los medios de comunicación actual anchura ventana gráfica del , y obtiene la imagen especificada en el srcset Elemento de ese atributo <source> 4102f

En el segundo ejemplo de abajo, el navegador mostrará una imagen WebP en lugar de un archivo JPG cuando el navegador es compatible con WebP.

El elemento <img> Se requiere como el último hijo anidado de la etiqueta <picture> dado que esta bloquea la declaración de los elemento <img> en cambio esta ultima actuará como el recurso de imagen por defecto y También el repliegue para los navegadores que no son compatibles con el elemento <picture> .