in

Elemento de imagen HTML


El HTML <picture> El elemento le permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.



El elemento HTML

El HTML <picture> El elemento ofrece a los desarrolladores web más flexibilidad para especificar recursos de imágenes.

los <picture> elemento contiene uno o más <source> elementos, cada uno refiriéndose a diferentes imágenes a través de la srcset
atributo. De esta forma, el navegador puede elegir la imagen que mejor se adapte a la vista y / o dispositivo actual.

Cada <source> elemento tiene un
media atributo que define cuándo la imagen es la más adecuada.

Ejemplo

Muestra diferentes imágenes para diferentes tamaños de pantalla:



Inténtalo tú mismo «

Nota: Siempre especifique un <img> elemento como el último elemento hijo de la <picture> elemento. los <img> El elemento es utilizado por navegadores que no son compatibles con <picture> elemento, o si ninguno de los <source> coinciden las etiquetas.


Cuándo usar el elemento de imagen

Hay dos propósitos principales para la <picture> elemento:

1. Ancho de banda

Si tiene una pantalla o dispositivo pequeño, no es necesario cargar un archivo de imagen grande. El navegador utilizará la primera <source>
elemento con valores de atributo coincidentes e ignore cualquiera de los siguientes elementos.

2. Soporte de formato

Es posible que algunos navegadores o dispositivos no admitan todos los formatos de imagen. Usando el
<picture> , puede agregar imágenes de todos los formatos y el navegador utilizará el primer formato que reconozca e ignorará cualquiera de los siguientes elementos.

Ejemplo

El navegador utilizará el primer formato de imagen que reconozca:



Inténtalo tú mismo »

Nota: El navegador utilizará la primera <source> elemento con valores de atributo coincidentes e ignore los siguientes <source> elementos.


Etiquetas de imagen HTML

Etiqueta Descripción
Define una imagen
Define un mapa de imágenes
Define un área en la que se puede hacer clic dentro de un mapa de imágenes
Define un contenedor para múltiples recursos de imágenes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Crestron Electronics, Inc.

Que es AngularJS – javatpoint