Actualmente, internet está plagado de contenido multimedia: videos, música, GIF, imágenes, animaciones, entre otros. Es normal que al entrar a cualquier página web nos encontremos con este tipo de recursos, pero no cabe duda que uno de los que más utilizamos al momento de crear una página web son las imágenes.

Si estás planeando diseñar o rediseñar tu sitio web, es importante conocer cómo insertar una imagen con HTML, y es justamente lo que te enseñaremos a hacer en este artículo. ¡Vamos!

    << [Comienza ya] Gestiona tu contenido de una manera fácil con el software  CMS gratuito de HubSpot>>   

La URL de la imagen puede ser relativa o absoluta. ¿Cuál es la diferencia?

  • Una URL relativa indica la ruta donde está almacenada la imagen tomando como base el directorio donde está almacenado el archivo HTML desde el cual se está insertando la imagen.
  • Una URL absoluta indica la ruta completa donde está almacenada la imagen, que puede ser un directorio de la computadora (C://Users/User1/Desktop/imagen.png) y donde se visualiza la página HTML, o una dirección completa de internet (https://test.com/images/imagen.png).

La recomendación es utilizar siempre URL relativas al directorio de tu proyecto HTML, ya que eso optimiza la carga de la página al no tener que ir a cada sitio a descargar la imagen solicitada. Adicional a esto, Google recomienda almacenarlas en el subdirectorio «/images» para facilitar la indexación y posicionamiento en buscadores.

Después de todo, así podemos insertar una imagen en HTML:

<img src="images/imagen.png">

Usando una URL absoluta quedaría así:

<img src="https://test.com/images/imagen.png">

Ejemplo de imagen HTML

Otro atributo que da mucho valor conocer es alt. Este atributo define una descripción textual de la imagen que se pretende insertar para aquellas situaciones en que la imagen no pueda ser mostrada o tarde demasiado en mostrarse por una lenta conexión.

<img src="images/imagen.png" alt="Esta es una descripcion alternativa de la imagen para cuando no se pueda mostrar">

Descripción alternativa de imagen en HTML

¿Cómo redimensionar el tamaño de una imagen en HTML?

Para redimensionar el tamaño de una imagen en HTML tenemos disponibles las etiquetas width (ancho) y height (alto) que permiten especificar la anchura y altura de la imagen.

<img src="images/imagen.png" alt="Esta es una descripcion alternativa de la imagen para cuando no se pueda mostrar" width="480" height="380" />

La recomendación al momento de redimensionar imágenes con HTML es no utilizar estas etiquetas (width y height) ya que, si la imagen no tiene una buena resolución, al redimensionarla podría mostrarse pixelada o borrosa.

Lo mejor es preparar la imagen con un editor de imágenes para que cubra las necesidades de la página web y, si aun así es totalmente necesario redimensionar la imagen, se recomienda usar CSS o JavaScript para asegurar la proporcionalidad o para redimensionar dinámicamente.

¿Cómo poner una imagen al lado de un texto en HTML?

La etiqueta <img> también soporta el atributo align que puede tener los valores left (izquierda) y right (derecha).

<img src="images/imagen.png" alt="Esta es una descripcion alternativa de la imagen para cuando no se pueda mostrar" width="150" height="150" align="right"/>

Ejemplo de imagen HTML con texto a la derecha

<img src="images/imagen.png" alt="Esta es una descripcion alternativa de la imagen para cuando no se pueda mostrar" width="150" height="150" align="left"/>

Ejemplo de imagen HTML con texto a la izquierda

Como puedes ver, este proceso es sencillo. Visita nuestra guía sobre HTML para conocer más funciones.

New Call-to-action
 CMS Hub

Publicado originalmente el Oct 5, 2022 7:00:00 AM, actualizado el 20 de enero de 2023

Topics:

HTML