Guía completa: Cómo agregar imágenes en HTML con la etiqueta

HTML es un lenguaje de marcado utilizado para crear páginas web. Una de las características esenciales de una página web es la inclusión de imágenes, ya que estas pueden transmitir información visual y mejorar la apariencia de una página. En HTML, la etiqueta <img> se utiliza para agregar imágenes a una página web.

Te enseñaremos cómo utilizar la etiqueta <img> para agregar imágenes en HTML. Veremos cómo especificar la ubicación de la imagen en el atributo src, cómo establecer el tamaño de la imagen con los atributos width y height, y cómo agregar texto alternativo con el atributo alt. También exploraremos otras opciones, como agregar imágenes enlazadas y utilizar imágenes responsivas.

Aprende la sintaxis básica de la etiqueta

La etiqueta <img> es una de las más utilizadas en HTML para agregar imágenes a una página web. Aprender la sintaxis básica de esta etiqueta es fundamental para poder insertar imágenes de manera efectiva en tu sitio.

Sintaxis básica

La sintaxis básica de la etiqueta <img> es la siguiente:

• src: especifica la ruta de la imagen que se va a mostrar en la página. Puede ser una ruta relativa o una URL completa.
• alt: proporciona un texto alternativo que se mostrará si la imagen no se carga correctamente. También es útil para las personas con discapacidad visual que utilizan lectores de pantalla.
• width: establece el ancho de la imagen en píxeles. Puedes utilizar un número absoluto o porcentajes.
• height: define la altura de la imagen en píxeles. Al igual que con el ancho, se puede especificar un número absoluto o porcentajes.

Un ejemplo de la etiqueta <img> con la sintaxis básica sería:

<img src="ruta-de-la-imagen.jpg" alt="Texto alternativo" width="500" height="300">

En este ejemplo, la imagen se encuentra en la ruta "ruta-de-la-imagen.jpg". Si la imagen no se carga correctamente, se mostrará el texto alternativo "Texto alternativo". Además, la imagen tendrá un ancho de 500 píxeles y una altura de 300 píxeles.

Atributos adicionales

Además de los atributos básicos mencionados anteriormente, la etiqueta <img> también admite otros atributos opcionales, como:

• title: proporciona un texto que se mostrará cuando el usuario pase el cursor sobre la imagen.
• class: permite asignar una clase CSS a la imagen para aplicar estilos personalizados.
• style: se utiliza para agregar estilos en línea a la imagen.

Estos atributos adicionales se agregan a la etiqueta <img> de la siguiente manera:

<img src="ruta-de-la-imagen.jpg" alt="Texto alternativo" width="500" height="300" title="Título de la imagen" class="imagen-estilo" style="border: 1px solid black;">

En este ejemplo, se ha agregado el atributo title con el valor "Título de la imagen", la clase CSS imagen-estilo y un estilo en línea que establece un borde de 1 píxel sólido de color negro.

Recuerda que la etiqueta <img> no tiene una etiqueta de cierre, ya que se considera una etiqueta vacía.

Especifica la ruta de la imagen en el atributo src

Para agregar imágenes en HTML, debes utilizar la etiqueta <img>. Esta etiqueta es una etiqueta de autocierre, lo que significa que no necesita una etiqueta de cierre.

La etiqueta <img> necesita tener un atributo src para especificar la ruta de la imagen que deseas agregar. Este atributo debe contener la URL o la ruta relativa de la imagen.

Ejemplo:

<img src="ruta_de_la_imagen.jpg" alt="Descripción de la imagen">

En el ejemplo anterior, el atributo src contiene la ruta de la imagen. Puedes utilizar una URL completa si la imagen se encuentra en otro servidor o una ruta relativa si la imagen se encuentra en el mismo directorio que tu archivo HTML.

El atributo alt es opcional, pero se recomienda agregarlo. Este atributo proporciona un texto alternativo para la imagen, que se muestra si la imagen no se carga correctamente o si el usuario utiliza un lector de pantalla.

Añade un texto alternativo en el atributo alt

Una buena práctica al agregar imágenes en HTML es incluir un texto alternativo en el atributo alt. Esto permite que las personas con discapacidad visual o que tienen problemas para cargar las imágenes puedan comprender el contexto de la imagen mediante el texto descriptivo.

Define el ancho y alto de la imagen con los atributos width y height

Para definir el ancho y alto de una imagen en HTML, puedes utilizar los atributos width y height en la etiqueta <img>.

Estos atributos te permiten especificar las dimensiones de la imagen en píxeles. Por ejemplo, si deseas que la imagen tenga un ancho de 500 píxeles y un alto de 300 píxeles, puedes agregar los atributos de la siguiente manera:

<img src="mi-imagen.jpg" alt="Mi imagen" width="500" height="300">

Es importante tener en cuenta que especificar el ancho y alto de una imagen con estos atributos puede provocar distorsiones si las dimensiones originales de la imagen no se mantienen. Por lo tanto, es recomendable utilizar imágenes que ya tengan las dimensiones deseadas o redimensionarlas previamente con un software de edición de imágenes.

Utiliza el atributo title para agregar un texto descriptivo

Al agregar imágenes en HTML utilizando la etiqueta <img>, es importante incluir el atributo title. Este atributo permite agregar un texto descriptivo que se mostrará cuando el usuario pase el cursor sobre la imagen.

Aplica estilos a la imagen con CSS

Una de las ventajas de utilizar la etiqueta <img> en HTML es que te permite aplicar estilos personalizados utilizando CSS. Esto significa que no estás limitado a la apariencia predeterminada de la imagen y puedes modificarla según tus necesidades.

Para aplicar estilos a una imagen, primero debes agregar un atributo class a la etiqueta <img> y luego definir los estilos correspondientes en tu archivo CSS.

A continuación, se muestra un ejemplo de cómo agregar una clase a una etiqueta <img>:

<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen" class="estilo-imagen">

En este ejemplo, hemos agregado la clase "estilo-imagen" a la etiqueta <img>. Ahora, vamos a definir los estilos correspondientes en nuestro archivo CSS:

.estilo-imagen {
  width: 300px;
  border: 1px solid #000;
  border-radius: 5px;
}

En este caso, hemos definido que la imagen tenga un ancho de 300 píxeles y tenga un borde sólido de 1 píxel con un color negro (#000). Además, le hemos aplicado un radio de borde de 5 píxeles para redondear las esquinas de la imagen.

Recuerda que puedes personalizar los estilos según tus preferencias y necesidades. Puedes cambiar el ancho, el color del borde, el radio de borde y muchos otros estilos más.

También puedes agregar más de una clase a una etiqueta <img> para aplicar múltiples estilos. Simplemente separa las clases con un espacio, como se muestra en el siguiente ejemplo:

<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen" class="estilo-imagen estilo-borde">

En este ejemplo, hemos agregado tanto la clase "estilo-imagen" como la clase "estilo-borde" a la etiqueta <img>. Ahora, podemos definir los estilos correspondientes para ambas clases en nuestro archivo CSS:

.estilo-imagen {
  width: 300px;
}

.estilo-borde {
  border: 1px solid #000;
  border-radius: 5px;
}

De esta manera, la imagen tendrá un ancho de 300 píxeles y un borde sólido de 1 píxel con un color negro (#000), además de tener las esquinas redondeadas.

Recuerda que, al utilizar CSS para aplicar estilos a una imagen, puedes lograr resultados visualmente atractivos y personalizados que se ajusten a tus necesidades y preferencias.

Asegúrate de que la imagen esté en el formato correcto (JPEG, PNG, etc.)

Antes de agregar una imagen en HTML, es importante asegurarse de que la imagen esté en el formato correcto. Los formatos más comunes son **JPEG**, **PNG** y **GIF**. Estos formatos son compatibles con los navegadores web modernos y garantizan una visualización óptima de la imagen.

Usa la etiqueta para agregar la imagen

La etiqueta es la forma más común de agregar imágenes en HTML. Esta etiqueta es una etiqueta de autocierre, lo que significa que no tiene una etiqueta de cierre correspondiente.

La sintaxis básica de la etiqueta es la siguiente:

<img src="ruta_de_la_imagen" alt="texto_alternativo" />

Explicación de los atributos:

• src: especifica la ruta de la imagen. Puede ser una URL (para imágenes en línea) o una ruta relativa o absoluta (para imágenes locales).
• alt: proporciona un texto alternativo para la imagen. Este texto se muestra si la imagen no se carga correctamente o si el usuario utiliza un lector de pantalla.

Ejemplo de uso de la etiqueta

Aquí tienes un ejemplo de cómo se vería la etiqueta en acción:

<img src="imagen.jpg" alt="Mi imagen" />

En este ejemplo, la imagen "imagen.jpg" se mostrará en la página y se mostrará el texto "Mi imagen" si la imagen no se carga correctamente.

Consideraciones adicionales

Al agregar imágenes en HTML, es importante considerar algunas cosas adicionales:

1. Siempre especifica el ancho y el alto de la imagen utilizando los atributos width y height. Esto evita que la página se reorganice mientras se carga la imagen.
2. Utiliza imágenes optimizadas para web para mejorar el rendimiento de la página. Puedes utilizar herramientas de compresión de imágenes para reducir el tamaño de los archivos de imagen sin comprometer demasiado la calidad.
3. Asegúrate de tener los derechos de autor o la autorización adecuada para utilizar imágenes en tu sitio web. Si no tienes imágenes propias, puedes utilizar bancos de imágenes gratuitos o de pago.

Con esta guía básica, ahora puedes agregar imágenes en HTML utilizando la etiqueta de manera efectiva. Recuerda seguir las mejores prácticas y optimizar tus imágenes para ofrecer la mejor experiencia visual a tus usuarios.

Guarda la imagen en una carpeta accesible desde tu archivo HTML

Para poder agregar una imagen en tu página HTML, primero debes asegurarte de tener la imagen guardada en una carpeta accesible desde tu archivo HTML. Esto significa que la carpeta donde tienes guardada la imagen debe estar en la misma ubicación o en una ubicación relativa al archivo HTML donde deseas agregarla.

Verifica que la ruta de la imagen sea correcta

Antes de agregar la etiqueta <img> en tu código HTML, es importante verificar que la ruta de la imagen sea correcta. La ruta debe indicar la ubicación exacta del archivo de imagen en tu servidor o en un servidor externo.

Asegúrate de que la imagen esté visible en todos los navegadores

Para asegurarte de que la imagen sea visible en todos los navegadores, debes utilizar la etiqueta <img> de HTML. Esta etiqueta permite agregar imágenes a tu página web. Aquí te mostraremos cómo utilizarla correctamente.

Preguntas frecuentes

¿Cuál es la sintaxis correcta para agregar una imagen en HTML?

La sintaxis correcta es:

¿Qué atributos puedo usar en la etiqueta ?

Los atributos más comunes son: src para especificar la ruta de la imagen, alt para agregar una descripción alternativa y width/height para ajustar el tamaño de la imagen.

Si quieres conocer otros artículos parecidos a Guía completa: Cómo agregar imágenes en HTML con la etiqueta puedes visitar la categoría Desarrollo y Programación.