18-imagenes en html

Temas tratados en esta entrada

• Sintaxis de la etiqueta <img>
• El atributo SRC
• El atributo ALT
• Tamaño de la imagen
• Imágenes flotantes
• Alineación de imágenes
• Imágenes responsivas
• Formatos de imagen en la web

---

Sintaxis de la etiqueta <img>

Para incrustar una imagen en una página se utiliza la etiqueta <img>, la cual no requiere un cierre.

Código del ejemplo

  <img src="https://cdn.pixabay.com/photo/2024/04/09/22/28/trees-8686902_1280.jpg" alt="Árboles" class="img-fluid"> 
                                    

...

El atributo SRC

El atributo src especifica la ruta donde se encuentra la imagen.

Código del ejemplo

  <img src="https://cdn.pixabay.com/photo/2024/09/03/08/56/dairy-cattle-9018750_1280.jpg" alt="Ganado" class="img-fluid">
                                    

El atributo ALT

El atributo alt proporciona un texto alternativo para la imagen, útil en caso de que la imagen no cargue.

Código del ejemplo

  <img src="https://cdn.pixabay.com/photo/2024/08/06/10/43/wine-8949009_1280.jpg" alt="Botella de vino" class="img-fluid">
                                    

Tamaño de la imagen

Para definir el tamaño de la imagen, puedes usar los atributos `width` y `height` o definirlo mediante CSS.

En el ejemplo tenemos una imagen de 500px de ancho por 600px de alto

Código del ejemplo

  <img src="https://cdn.pixabay.com/photo/2023/06/22/06/53/beautiful-girl-8080757_1280.jpg" alt="Chica" style="width:500px;height:600px;">
                                    

Imágenes flotantes

Las imágenes flotantes permiten que el texto se ajuste a su alrededor. Para lograrlo, utilizamos la propiedad float de CSS.

Este es un ejemplo de imagen flotante a la derecha. El texto se ajusta a su alrededor para ilustrar la funcionalidad de la propiedad float.

Este es un texto dentro de la caja. La imagen estará a la derecha.

Código del ejemplo

    <img src="https://cdn.pixabay.com/photo/2019/12/21/10/41/penguins-4710224_1280.jpg" alt="Pingüino" style="float-end; width:250px; height:250px;">
    <p>Este es un ejemplo de imagen flotante a la derecha...</p>
                                    

Las imágenes flotantes permiten que el texto se ajuste a su alrededor. Para lograrlo, utilizamos la propiedad float de CSS.

Este es un ejemplo de imagen flotante a la derecha. El texto se ajusta a su alrededor para ilustrar la funcionalidad de la propiedad float.

Este es un texto dentro de la caja. La imagen estará a la izquierda.

Código del ejemplo

    <img src="https://cdn.pixabay.com/photo/2019/12/21/10/41/penguins-4710224_1280.jpg" alt="Pingüino" style="float-start; width:250px; height:250px;">
    <p>Este es un ejemplo de imagen flotante a la derecha...</p>
                                    

Alineación de imágenes

En esta sección aprenderás a alinear imágenes utilizando HTML. Puedes alinear imágenes a la izquierda, al centro y a la derecha utilizando el atributo `align` y estilos CSS.

Alineación a la Izquierda

Para alinear una imagen a la izquierda, podemos usar el atributo HTML `align` con el valor `left`. Esto posicionará la imagen a la izquierda, permitiendo que el texto fluya a su alrededor.

Esta imagen está alineada a la izquierda. El texto fluye a su alrededor.

Código del ejemplo

    <div style="border: 2px solid; padding: 20px;">
    <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg" alt="Gato" 
         align="left" style="width: 300px; height: 300px; margin-right: 15px;">
    <p>Esta imagen está alineada a la izquierda. El texto fluye a su alrededor.</p>
</div>
                                    

Alineación al Centro

Para centrar una imagen, podemos usar el atributo HTML `align` con el valor `center`. Esto centrará la imagen dentro del contenedor.

Esta imagen está alineada al centro.

Código del ejemplo

    <div style="text-align: center; border: 2px solid; padding: 20px;">
    <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg" alt="Gato" 
         align="center" style="width: 300px; height: 300px;">
    <p>Esta imagen está alineada al centro.</p>
                                    

Alineación a la Derecha

Para alinear una imagen a la derecha, utilizamos el atributo HTML `align` con el valor `right`. Esto posicionará la imagen a la derecha, permitiendo que el texto fluya a su alrededor.

Esta imagen está alineada a la derecha. El texto fluye a su alrededor.

Código del ejemplo

    <div style="border: 2px solid; padding: 20px;">
    <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg" alt="Gato" 
         align="right" style="width: 300px; height: 300px; margin-left: 15px;">
    <p>Esta imagen está alineada a la derecha. El texto fluye a su alrededor.</p>
</div>
                                    

Imágenes responsivas

En HTML, para hacer que una imagen sea completamente flexible y se ajuste a cualquier tamaño de pantalla, puedes usar el atributo CSS `max-width` con el valor `100%` y `height: auto`.

Código del ejemplo

 <img src="https://cdn.pixabay.com/photo/2019/01/20/03/17/garnet-ghost-town-montana-3943047_1280.jpg" 
     alt="Montaña" style="max-width: 100%; height: auto;">
                                    

Formatos de imagen en la web

Los formatos de imagen más comunes son JPG, PNG, SVG y WebP. Cada uno tiene diferentes ventajas según el tipo de imagen y la optimización deseada.

Código del ejemplo

<img src="https://cdn.pixabay.com/photo/2024/02/06/07/05/ai-generated-8556247_1280.png" alt="Arquitectura" class="img-fluid">
                                    

Ir al índice