Ejemplo de Cómo Colocar Imágenes Con HTML

Inicio » HTML » Cómo colocar imágenes con HTML

¿Te has preguntado cómo se colocan imágenes tan atractivas en las páginas web que visitas? Hoy vamos a resolver ese misterio. En este artículo, exploraremos cómo colocar imágenes en tu página web usando HTML. 

Uso de la etiqueta <img>

Para agregar una imagen a una página web en HTML, se utiliza la etiqueta <img>. Esta etiqueta es autocerrada, lo que significa que no requiere una etiqueta de cierre. Aquí está la sintaxis básica de cómo se usa:

<img src="ruta_de_la_imagen.jpg">

En este código, ruta_de_la_imagen.jpg es la ubicación de la imagen que se desea mostrar.

Atributos de la etiqueta <img>

La etiqueta <img> puede mejorarse con el uso de varios atributos, como alt y title.

El atributo alt se utiliza para proporcionar una descripción textual de la imagen, lo que es útil para la accesibilidad web. Si la imagen no puede ser cargada por alguna razón, el texto alternativo se mostrará en su lugar.

El atributo title se utiliza para proporcionar información adicional sobre la imagen. Este texto aparecerá cuando el usuario pase el cursor sobre la imagen.

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

Dimensionado de las imágenes

Se pueden definir el ancho y la altura de la imagen utilizando los atributos width y height respectivamente.

<img src="ruta_de_la_imagen.jpg" alt="Descripción de la imagen" title="Información de la imagen" width="500" height="600">

Es importante mantener la proporción original de la imagen para evitar la distorsión.

Ruta de la imagen

La ruta de la imagen puede ser absoluta o relativa. Una ruta absoluta es una URL completa como: 

https://www.ejemplode.com/design/v3/images/logo.png

Mientras que una ruta relativa es la ruta a un archivo dentro de las carpetas del sitio web.

/design/v3/images/logo.png

Si la imagen está en el mismo directorio que el archivo HTML, simplemente se puede utilizar el nombre del archivo de la imagen. Por ejemplo:

<img src="logo.png">

Si la imagen está dentro de una carpeta en el directorio, se debe incluir el nombre de la carpeta en la ruta.

<img src="/carpeta/logo.jpg">

Formatos aceptados de imágenes en HTML

  1. JPEG o JPG: Este formato es ideal para fotografías o imágenes con muchos colores. El formato JPEG utiliza un algoritmo de compresión que reduce el tamaño del archivo, pero puede provocar una pérdida de calidad en las imágenes.

  2. PNG: El formato PNG es ideal para imágenes con áreas de color sólido y alta claridad, como logotipos o gráficos. Este formato también admite transparencias.

  3. GIF: El formato GIF se utiliza principalmente para imágenes animadas, pero también puede utilizarse para imágenes estáticas. Al igual que el PNG, también admite transparencias y colores sólidos, pero está limitado a una paleta de 256 colores.

  4. SVG: SVG o Gráficos Vectoriales Escalables son un formato de imagen que utiliza XML para describir gráficos bidimensionales. A diferencia de los formatos anteriores, las imágenes SVG son imágenes vectoriales, lo que significa que puedes escalarlas a cualquier tamaño sin perder calidad. Son ideales para iconos, logotipos y otros gráficos que necesitan ser escalados.

Ejemplo de página HTML con imagen

<!DOCTYPE html>
<html>
<head>
<title>Página con imágen</title>
</head>
<body>
<h1>Bienvenido</h1>
<p>Aquí está el logo de ejemplode.com:</p>
<img src="https://www.ejemplode.com/design/v3/images/logo.png" alt="Una imagen" title="Una imagen" width="500" height="600">
</body>
</html>

En este ejemplo, la imagen logo.png está en una ruta absoluta dentro del servidor de la página ejemplode.com.

¿Cómo citar? & Del Moral, M. (s.f.). Ejemplo de Cómo Colocar Imágenes Con HTML.Ejemplo de. Recuperado el 26 de Septiembre de 2023 de https://www.ejemplode.com/17-html/81-ejemplo_de_como_colocar_imagenes_con_html.html

Escrito por:
Mauricio del Moral Durán
Mauricio del Moral, fundador y creador de Ejemplo de, es un experto en enseñanza y un apasionado del ámbito educativo desde el año 2007. Ha dedicado una considerable parte de su vida profesional al estudio y al desarrollo de contenidos educativos en formatos digitales de alta calidad. Poseedor de una Licenciatura en Ciencias de la Comunicación, Mauricio es egresado de la prestigiosa Universidad Intercontinental.
Última modificación: 2023-05-15

Últimos 10 comentarios

  1. Esa etiqueta IMG no funciona en la web cuando la foto está en una URL externa. Por ejemplo, cuando quiero insertar la foto desde Flickr.

    Con el tag EMBED, sí se consigue insertar imagen externa, pero cuando pinchas en la foto no te permite dirigirla a la página que quiero.

    ¿Hay alguna solución para eso?
    Por Pedro 2018-06-28 a las 10:44:19
  2. Muy bueno, me ayudó.
    Por Andrea 2018-02-15 a las 22:19:05
  3. Hola, tengo un proyecto de crear una agenda de contactos, necesito ayuda, en la parte de agregar un contacto, me resulta interesante que se pueda agregar una foto del contacto, ya sé que es con input type file, pero ¿Después como puedo visualizar o imprimir en pantalla la misma?
    Por Miry 2017-05-13 a las 20:22:23
  4. Directo desde tu PC.
    Por Morris 2016-08-05 a las 0:24:44
  5. Hola, mi consulta es para subir a mercado libre. Debo subir la imagen a un hosting y luego colocar en donde iría el nombre de la imagen, escribir la URL de la imagen? O la subo directo de mi pc? Gracias
    Por Daniel 2016-08-03 a las 18:48:06
  6. Eso quiere decir que la ruta de la imagen está mal, no la encuentra. Saludos.
    Por Morris 2016-06-10 a las 13:40:42
  7. Buenas qué pasa si hago lo que dices y me aparece la imagen de que esta cargando mi imagen,me explico se da de cuenta de que va una imagen pero no la coloca.
    Por Leonardo 2016-06-09 a las 19:28:57
  8. Cómo puedo insertar la imagen si la tengo en mi usb, ya que no me permite anexar la imagen insertando el código correcto.
    Por david 2015-05-07 a las 19:40:30
  9. Bien muy bueno, me ayudó bien, gracias.
    Por /rock> 2014-10-04 a las 16:24:08
  10. Me gustó mucho cómo explicaron el tema, es la página que lo explica mejor que todas.
    Por Maris ☺♥☻ 2014-05-17 a las 3:23:00

Deja un comentario


Acepto la política de privacidad.