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!
![<< [Plantilla gratuita] >> Plantillas de códigos de programación para HTML.](https://no-cache.hubspot.com/cta/default/53/bb3e5cad-5b6c-4956-a702-59b9da03864a.png){kind=small}
¿Cómo poner una imagen en HTML?
Para insertar una imagen en una página HTML se utiliza la etiqueta <img>. Es una etiqueta vacía que no contiene texto y que no necesita una etiqueta de cierre. Su atributo principal y el mínimo indispensable es el atributo src (por la palabra en inglés source) que, por medio de una URL, especifica el origen o la fuente de donde se obtendrá la imagen para ser mostrada en la página.
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">
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">
¿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"/>
<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"/>
Como puedes ver, este proceso es sencillo. Visita nuestra guía sobre HTML para conocer más funciones.
