20- 📸 Elementos de Imágenes en HTML: ¡Aprende Fácil!

Temas tratados en esta entrada

• Elementos de imagen en HTML
• Cuando usar el elemento "picture"

---

Elementos de imagen en HTML

Para mostrar diferentes imágenes en dispositivos como tablets, móviles, etc.

Usamos el elemento picture.

El elemento <picture> da a los desarrolladores más flexibilidad a la hora de incrustar las imágenes.

El elemento <picture> puede contener uno o más elementos <source>.

Cada elemento <source> a través de su srcset puede hacer referencia a los diferentes tamaños de imágenes.

De esta forma el navegador puede elegir la imagen que mejor se adapte a su dispositivo.

Ejemplo

Código del ejemplo

                                
  <picture>
  <source media="(min-width: 1200px)"
  srcset="https://cdn.pixabay.com/photo/2023/09/22/04/50/generated-8268031_1280.png">
  <source media="(min-width: 800px)"
  srcset="https://cdn.pixabay.com/photo/2024/06/21/10/51/ai-generated-8844132_1280.png">
  <img src="https://cdn.pixabay.com/photo/2024/06/14/21/19/summer-8830636_1280.jpg" style="height:600px">
  </picture>  
                                    

Cuando usar el elemento "picture"

El elemento <picture> es particularmente útil en situaciones donde la presentación de una imagen debe adaptarse a diferentes condiciones de visualización.

Utilizar el elemento <picture> puede mejorar la carga de imágenes y la experiencia del usuario, especialmente en dispositivos móviles y pantallas de diferentes resoluciones.

El uso del elemento <picture> permite a los desarrolladores especificar diferentes fuentes de imágenes para distintos tamaños de pantalla o tipos de dispositivo, optimizando así el rendimiento de la página.

Al implementar <picture>, los desarrolladores deben considerar los siguientes factores:

• Dimensiones de la pantalla del usuario.
• Conexiones de red y ancho de banda disponible.
• El diseño general de la página y cómo las imágenes afectan la carga y el rendimiento.

Ejemplo

Código del ejemplo

                                
  <picture>
  <source media="(min-width: 1200px)"
  srcset="https://cdn.pixabay.com/photo/2023/09/22/04/50/generated-8268031_1280.png">
  <source media="(min-width: 800px)"
  srcset="https://cdn.pixabay.com/photo/2024/06/21/10/51/ai-generated-8844132_1280.png">
  <img src="https://cdn.pixabay.com/photo/2024/06/14/21/19/summer-8830636_1280.jpg" alt="Descripción de la imagen" style="height:600px">
  </picture>
                                    

Ir al índice