Inserción de imágenes

1.1 Elemento <img>

El multimedia en HTML juega un papel importante en mejorar la percepción visual de las páginas web. La inserción de imágenes es uno de los aspectos clave del multimedia en HTML. Generalmente, para esto se utiliza el elemento <img>. Veámoslo con más detalle:

El elemento <img> está diseñado para insertar imágenes en una página web. Es un elemento vacío: no tiene una etiqueta de cierre y solo incluye atributos.

Sintaxis

    <img src="URL_de_la_imagen" alt="Descripción" width="Ancho" height="Altura">
  

    
      <img src="images/photo.jpg" alt="Descripción de la imagen" width="500" height="300">
    
  

Vamos a ver los atributos del elemento <img> un poco más a fondo

1.2 Atributo src

El nombre completo del atributo src es source (fuente).

El atributo src indica la ruta al archivo de imagen que debe mostrarse en la página. Puede ser tanto una ruta absoluta como relativa.

Ejemplos:

URL absoluto:

    
      <img src="https://example.com/images/photo.jpg">
    
  

Ruta relativa:

    
      <img src="images/photo.jpg">
    
  

La URL absoluta contiene la dirección completa a la imagen, incluyendo el protocolo (http o https), el dominio y la ruta. La ruta relativa indica la localización del archivo en relación al documento actual, lo cual es útil al trabajar con archivos locales.

1.3 Atributo alt

Nombre completo: alternative text (texto alternativo)

El atributo alt proporciona una descripción textual de la imagen. Este texto se muestra si la imagen no se puede cargar, y se utiliza para mejorar la accesibilidad, ya que los lectores de pantalla lo usan para describir la imagen a usuarios con discapacidad visual.

Ejemplos:

    
      <img src="images/sunset.jpg" alt="Foto de un hermoso atardecer">
    
  

Un texto alternativo bien elaborado ayuda a los usuarios a comprender el contenido de la imagen si no está disponible, y contribuye a mejorar el SEO (optimización para motores de búsqueda) de la página.

1.4. Atributo width

El atributo width establece el ancho de la imagen en píxeles. Si el atributo height no está especificado, la imagen mantiene sus proporciones al cambiar el ancho.

Ejemplos:

    
      <img src="images/photo.jpg" width="500">
    
  

Usar un ancho fijo puede ser útil para controlar el tamaño de la imagen, pero es importante considerar la adaptabilidad del diseño.

1.5 Atributo height

El atributo height establece la altura de la imagen en píxeles. Si el atributo width no está especificado, la imagen mantiene sus proporciones al cambiar la altura.

Ejemplos:

    
      <img src="images/photo.jpg" height="300">
    
  

Similar al atributo width, usar una altura fija puede ser útil, pero es importante considerar la adaptabilidad.

Ejemplo de uso de los atributos juntos

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="Foto de un hermoso atardecer" width="500" height="300">
    
  

En este ejemplo, la imagen se cargará del archivo images/sunset.jpg, se mostrará con un ancho de 500 píxeles y una altura de 300 píxeles, y si la imagen no se carga, se mostrará el texto "Foto de un hermoso atardecer".