El elemento PICTURE de HTML explicado!! (cómo poner Imágenes)

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

Elemento Picture

Nos permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.

<picture>

HTML5 introdujo el elemento <picture>

Este elemento contiene elementos <source> y cada uno de estos hace referencia a una imagen diferente. Y el navegador escoge una de ellas según la pantalla o el dispositivo.

En los atributos del source se describe cuando se tiene que usar cada imagen.

Es importante poner un <img> como último hijo, por si el navegador no soporta el <picture> o no encuentra el source adecuado, entonces carga el <img>

En ejemplo de abajo si redimensionas la ventana del navegador verás como va cambiando de una imagen a otra.

See the Pen HTML | 1.18 - El elemento picture - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Cuándo utilizarlo

Normalmente se usa en dos casos:

  • Ancho de banda: para dispositivos con pantallas pequeñas no hace falta cargar imágenes muy grandes.
  • Soporte de formatos: algunos navegadores no soportan todos los formatos de imagen, usando <picture> el navegador cogerá la primera imagen del formato que reconozca.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats