Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Insertar imágenes HTML: Aprende a poner imágenes en tu sitio web con este tutorial

Categorías:  Autor: Diego C Martin 
referencia relativa a una imagen en la misma carpeta

Aprender a insertar imágenes HTML en tu página web es fundamental para mejorar su aspecto visual y atraer visitas. Con HTML, puedes utilizar diversos atributos para personalizar la imagen y optimizar su tamaño y peso para mejorar la accesibilidad.

También puedes ajustar el tamaño de la imagen y usar diferentes formatos de imagen para crear una experiencia más rica y agradable para el usuario. Además, puedes utilizar CSS para insertar imágenes de fondo en tu página.

Cómo insertar una imagen en HTML

Para insertar una imagen en tu página web, debes seguir los siguientes pasos:

  • Abre el archivo HTML donde quieres insertar la imagen con un editor de texto o de código.
  • Ubica el lugar donde deseas que aparezca la imagen.
  • Asegúrate que la imagen que deseas insertar esté almacenada en tu equipo o en la web.
  • Escribe el siguiente código para insertar la imagen en tu archivo HTML:
    <img src=”ruta-de-tu-imagen”>

Recuerda sustituir “ruta-de-tu-imagen” con la ubicación de tu imagen. Si tienes la imagen en la misma carpeta que tu archivo HTML, puedes poner simplemente el nombre de tu archivo de imagen.

Más adelante te cuento todo sobre las rutas de archivo.

Por tanto, para poner la imagen en una página web con HTML debemos utilizar la etiqueta img con la siguiente sintaxis:

<img src="imagen.jpg" alt="texto descriptivo">
img viene de image
src viene de source
alt viene de alternative

Generalmente, la imagen se encontrará en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos de imagen más habituales son los archivos con extensiones gif, jpg, png, webP o svg. Lo vemos en detalle más adelante.

En el ejemplo de arriba el archivo de imagen estaría ubicado en la misma carpeta en la que se encuentra el fichero en el que estamos escribiendo el código, que en la estructura de árbol de la captura se llamaría “articulo1.html”.

Aunque el formato svg es un tipo de archivo de imagen vectorial y no se puede ver con cualquier visor de imágenes, los navegadores modernos son compatibles y permiten utilizarlos y visualizarse correctamente.

Se suele emplear para el logo en el HTML debido a que ocupa poco espacio en disco.

Atributos necesarios para insertar imágenes en HTML

Además de la ruta de tu imagen, hay otros atributos que debes tener en cuenta al momento de insertar imágenes en HTML, de forma que tenemos:

  • src: define la ruta al recurso, en este caso, el archivo de imagen que se desea mostrar. Es el único obligatorio para que la etiqueta funcione.
  • Alt: este atributo describe la imagen para personas con discapacidad visual. Si la imagen no carga, el atributo alt mostrará el texto alternativo en su lugar.
  • Height/Width: estos atributos definen el tamaño de la imagen en píxeles. Es recomendable usarlos para que la página cargue más rápido.

Para añadir estos atributos a tu código HTML, puedes escribirlos así:

<img src="ruta-de-tu-imagen" alt="texto alternativo" width="ancho" height="alto">

Atributo src de una img HTML

En el atributo src indicamos la url de la imagen, es decir, ruta al recurso (por ello lo de source en inglés) y el nombre del archivo de imagen.

Es muy recomendable no emplear ni espacios, ni símbolos, ni tildes, ni eñes, ni mayúsculas en los nombres de archivo para evitar dificultades.

Si la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo es suficiente.

En este caso, como se ve en el ejemplo básico de arriba, no es necesario emplear ninguna ruta de carpetas.

Atributo alt de una img HTML

El atributo alt, de texto alternativo, lo usamos para especificar un texto que verán los usuarios cuando la imagen no se pueda mostrar.

También es lo que lee una aplicación de lectura de pantalla como las que usan las personas deficientes visuales e invidentes, de modo que el texto debe describir el contenido de la imagen.

Con estos simples pasos y atributos, puedes insertar una imagen en tu página web utilizando HTML. ¡Recuerda siempre utilizar atributos alt y tamaño para una mejor accesibilidad y velocidad de carga!

Insertar imágenes desde un archivo

Cuando queremos añadir una imagen a nuestra página web, podemos hacerlo de dos maneras: insertando la imagen desde el mismo directorio donde se encuentra nuestra página web o desde otro directorio en el lado del servidor.

Insertar imágenes desde el mismo directorio

referencia relativa a una imagen en la misma carpeta
En esta imagen se representa la estructura de carpetas en forma de árbol de directorios en la que la barra representa la carpeta en la que nos encontramos.

Si la imagen que queremos insertar en nuestra página web se encuentra en el mismo directorio donde se encuentra nuestra página, simplemente podemos utilizar la siguiente sintaxis para que la imagen se muestre en nuestro sitio web: <img src="nombre-de-la-imagen.jpg"> En este caso, “nombre-de-la-imagen.jpg” hace referencia al nombre del archivo de imagen que queremos insertar.

Rutas relativas. Posibilidades frecuentes con ejemplos

Si la imagen se encontrara en una subcarpeta llamada imagenes, la ruta para obtenerla sería:

<img src="imagenes/imagen.jpg" alt="Imagen">
Ruta relativa a una imagen en una carpeta
El cuadro azul llamado imágenes representa una carpeta o directorio, que contiene el fichero de imagen

Es decir, anteponemos al nombre del archivo de la imagen el nombre de la carpeta y la barra /.

Ten en cuenta que las rutas relativas y absolutas son la manera de referenciar archivos, de modo que se pueden usar en otros tipos de etiqueta, como los enlaces o hipervínculos.

Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML, la sintaxis será:

<img src="../imagen.jpg" alt="imagen">
subir un nivel de carpetas con rutas relativas

Es decir, le anteponemos .. y la barra / al nombre del archivo de la imagen.

Los dos puntos seguidos, por tanto, sirven para dirigirnos a una capeta padre. De tal modo que si tuviéramos que subir dos niveles quedaría así:

<img src="../../imagen.jpg" alt="imagen">
subir dos carpetas con rutas relativas

En la imagen anterior nos encontramos en articulo1.html y debemos subir dos niveles para llegar a la imagen.

Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imágenes y el archivo HTML desde el que referenciamos en otra carpeta que está al mismo nivel que la de imágenes, primero deberíamos subir un nivel y luego acceder a la carpeta imágenes, quedando del siguiente modo:

<img src="../imagenes/imagen.jpg" alt="imagen">
Arbol de archivos y carpetas de un proyecto web HTML

Esta forma de emplear rutas de archivos es por referencias relativas, es decir, que determinamos la ruta respecto al elemento desde el que solicitamos el recurso externo.

Esto mismo lo aplicaremos más adelante cuando por ejemplo queramos referenciar un archivo de estilos css o un script js.

A continuación puedes ver esto explicado en vídeo. Este vídeo forma parte de mi Curso Online de HTML5.

¡Accede para ver todos los detalles y más clases de acceso gratuito!

Rutas absolutas. Aquí te enlazo un vídeo para que lo entiendas mejor

Otra forma de referenciar archivos es mediante rutas absolutas. Las rutas absolutas tienen como referencia la raíz del sistema de archivos en el que nos encontremos.

Si por ejemplo, tenemos un proyecto en una carpeta llamada blog en la unidad C del disco, siguiendo con los ejemplos anteriores, la ruta absoluta en un sistema Windows sería la siguiente:

<img src="C:/blog/imagen.jpg" alt="texto descriptivo">

Cuando trabajamos con archivos no es recomendable emplear rutas absolutas, ya que si moviéramos el proyecto por ejemplo a una unidad de almacenamiento externa como un pendrive USB, la ruta absoluta dejaría de funcionar, ya que la letra de la unidad cambiaría. Mientras que mediante relativas no tendríamos ese problema.

Por el contrario, cuando trabajamos en servidores web, se suelen emplear rutas absolutas que parten del nombre de dominio como elemento raíz.

Esta sería la ruta absoluta del logotipo de esta web:

http://diegocmartin.com/wp-content/uploads/2016/08/logo-diego-004-e1499697890812.png

Podemos perfectamente emplear una URL completa como esta como valor del atributo src de la etiqueta img.

Aquí puedes ver otro vídeo gratuito de mi curso de HTML5 sobre rutas absolutas.

Insertar imágenes desde otro directorio en el lado del servidor

Si queremos insertar una imagen que se encuentra almacenada en otro servidor, podemos hacerlo utilizando la siguiente sintaxis mediante rutas absolutas:

<code><img src="http://direccion-del-servidor.com/ruta-de-la-imagen/nombre-de-la-imagen.jpg">
</code> 

En este caso, “http://direccion-del-servidor.com” hace referencia a la dirección donde se encuentra alojada la imagen y “ruta-de-la-imagen/nombre-de-la-imagen.jpg” hace referencia a la ubicación de la imagen en el servidor.

Es importante tener en cuenta que, al utilizar esta forma de inserción de imágenes, se crea una dependencia entre nuestra página web y el servidor donde se encuentra alojada la imagen. Si la imagen es eliminada o renombrada en el servidor, nuestra página web dejará de mostrarla.

Ajustando el tamaño de las imágenes en HTML

Hemos visto que la etiqueta img tiene 2 atributos, src alt obligatorios, pero puede tener más. Dos muy útiles son width height, con los que podemos controlar la anchura y la altura respectivamente.

Estos atributos nos sirven para mostrar las imágenes al tamaño que queramos independientemente de las dimensiones que tenga el archivo.

Normalmente utilizaremos uno sólo de los atributos, ya que de esta forma el navegador re-calculará la otra dimensión de forma proporcional para que la imagen no se vea distorsionada.

<img src="logo.png" alt="Esto es mi logo" width="150px">

Como se puede observar, estamos expresando la medida en px, píxels.

También es usual emplear el porcentaje % como unidad de media. De esta forma, el tamaño de la imagen se ajustará al espacio disponible según el tamaño de la pantalla. Veremos más sobre esto en CSS.

Para ajustar el tamaño de una imagen en HTML, se pueden utilizar los atributos width y height en la etiqueta de imagen. Por ejemplo, para establecer un ancho de imagen de 500 píxeles y una altura de 300 píxeles, se puede utilizar el siguiente código:

También se pueden utilizar porcentajes para establecer el tamaño de la imagen en relación con su contenedor. Por ejemplo, para establecer que la imagen ocupe el ancho completo del contenedor, se puede utilizar el siguiente código:

<img src="ruta-imagen.png" alt="texto descriptivo" width="100%" height="50%">

Ejercicios prácticos de atributos width y height en imágenes

A continuación, te propongo algunos ejericicios prácticos del uso de los atributos width y height para ajustar el tamaño de las imágenes en HTML:

  • Para establecer un ancho de imagen de 400 píxeles y una altura de 200 píxeles
  • Para establecer que la imagen tenga un ancho del 50% del contenedor
  • Para establecer un ancho máximo de imagen de 800 píxeles

Hay que tener en cuenta que el tamaño de las imágenes no solo afecta el rendimiento de la página web, sino también la accesibilidad. Por lo tanto, es importante utilizar estos atributos de manera efectiva y optimizada para mejorar tanto la experiencia del usuario como el SEO del sitio web.

¿Imagen con enlace o enlace con imagen? con ejemplo descargable

Es una pregunta que me gusta hacer a mis alumnos. ¿Qué piensas tú? ¿Cómo construimos una imagen que al ser clicada vaya a otro lugar?

Hipervínculo con una imagen. <a> e <img>

Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página, ahora podemos crear hipervínculos que muestren imágenes.

La solución consiste en colocar la etiqueta img entre las cláusulas de apertura y cierre del enlace (<a>), en sustitución del texto ancla habitual.

A continuación un ejemplo de una página que muestra dos imágenes (foto1.jpg y foto2.jpg) como hipervínculos. Al hacer clic irán a otra página.

Las imágenes se suponen colocadas en una carpeta llamada imágenes:

Para que el ejemplo funcione al abrirlo en el navegador, debes tener una estructura de archivos y carpetas como la que se propone, es decir, los archivos html juntos en una carpeta junto con otra carpeta que contenga a las imágenes.

Puedes descargar este ejemplo comentado sobre imágenes y enlaces:

Ejemplo de imágenes y enlaces2

Cómo poner una imagen de fondo con CSS

Para poner imágenes como fondo en HTML es necesario recurrir a código CSS. Mediante el uso de la propiedad background, entre muchas otras cosas podemos especificar la url con la ruta a al archivo de imagen que queremos emplear.

Este sería un ejemplo del código CSS:

background: url('imagen1.jpg');

Si no tienes claras las nociones básicas del funcionamiento de CSS, empieza por aquí.

Y aqui tienes un ejemplo en el que pongo un fondo con 4 imágenes a la vez, cada cual en una zona.

Puedes hacer estas cosas también dentro de otros elementos como formularios.

Propiedades CSS para imágenes de fondo

Para poder establecer una imagen de fondo en CSS, se utilizan las siguientes propiedades:

  • background-image: define la imagen de fondo.
  • background-repeat: si se establece la imagen de fondo se puede colocar como cascada (repeat), solo mostrarla una vez (no-repeat), o ajustarse a la imagen (repeat-x o repeat-y).
  • background-position: determina la posición de la imagen de fondo.
  • background-attachment: define si la imagen de fondo se desplaza con el contenido o queda fija en su lugar.
  • background-size: establece el tamaño de la imagen de fondo.

Ejemplos prácticos de imágenes de fondo CSS

A continuación, se muestran algunos ejemplos de cómo utilizar la propiedad CSS de background-image para añadir imágenes de fondo a un sitio web:

  • Establecer una imagen de fondo en tamaño completo:
    body { background-image: url(‘imagen-de-fondo.jpg’); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; }
  • Crear un patrón de fondo con una imagen:
    body { background-image: url('patron-de-fondo.jpg'); background-repeat: repeat; background-position: 0 0; background-attachment: fixed; }
  • Aplicar una imagen de fondo a una sección en particular:
    .seccion { background-image: url('imagen-de-fondo.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; }

Con estas propiedades, tendremos una gran variedad de opciones para personalizar el aspecto de nuestra página web mediante imágenes de fondo CSS.

Para saber cosas avanzadas te invito a visitar la sección Fondos con imágenes múltiples de mi artículo Estilar elementos HTML específicos con CSS3 con ejemplos.

Mejorando la accesibilidad de nuestras imágenes en HTML

Las imágenes son una parte importante de cualquier sitio web, y deben estar optimizadas no sólo para su visualización, sino también para su accesibilidad.

La importancia del atributo alt

El atributo alt de una imagen es muy importante para la accesibilidad, ya que es utilizado por los lectores de pantalla para describir la imagen a los usuarios con discapacidad visual. Por ello, es importante siempre agregar un atributo alt descriptivo a cada imagen que se utilice en la página.

Cómo añadir un atributo alt a una imagen

Para agregar un atributo alt a una imagen debe utilizarse el atributo “alt” y especificar el texto que describa la imagen.

<img src="imagen.jpg" alt="texto descriptivo">

Este atributo no es obligatorio, pero es altamente recomendado para mejor accesibilidad.

Alternativas de texto para contenido gráfico o multimedia

En caso de que el contenido sea visualmente complejo o contenga información importante que no está presente en el texto acompañante, se puede utilizar un texto alternativo para describir mejor el contenido gráfico o multimedia, como los videos.

Para ello, debe agregarse el atributo “longdesc” en el elemento HTML indicando la ruta donde se encuentra el texto alternativo.

También se puede integrar el contenido multimedia en la página de manera que sea accesible para aquellos que no pueden ver el material original.

Otras consideraciones para mejorar la accesibilidad de nuestras imágenes

Además de lo mencionado, hay otras consideraciones importantes a tener en cuenta cuando se trabajan con imágenes para mejorar su accesibilidad.

Es importante proporcionar descripciones claras y concisas de las imágenes, utilizar imágenes que tengan un propósito claro y necesario para la comprensión del contenido, asegurarse de que las imágenes estén en el formato correcto y optimizadas para web, y evitar utilizar imágenes que puedan ser perjudiciales o discriminatorias.

Siguiendo estas consideraciones, podemos mejorar significativamente la accesibilidad de nuestras imágenes en HTML y, por ende, mejorar la experiencia de navegación de todos los usuarios.

Formatos de imágenes compatibles con HTML

Formatos comunes de imágenes

Los formatos de imagen más comunes utilizados en HTML son JPEG, PNG y GIF. Cada uno de estos formatos tiene sus propias características y es importante considerar su uso dependiendo del contexto en el que se quieren utilizar.

  • JPEG es ideal para fotografías ya que conserva una alta calidad de imagen con un tamaño de archivo relativamente pequeño.
  • PNG es útil para gráficos con áreas transparentes y para imágenes que requieren una calidad de imagen más alta que la que se obtiene con JPEG.
  • GIF es ideal para imágenes animadas con fondo transparente.

Vectores y su compatibilidad con HTML

A diferencia de las imágenes rasterizadas, los vectores no pierden calidad cuando se escalan ya que están basados en fórmulas matemáticas en lugar de píxeles. Por lo tanto, son ideales para logotipos e iconos. SVG (Scalable Vector Graphics) es un formato de imagen basado en vectores que es compatible con HTML.

Al utilizar SVG en lugar de imágenes rasterizadas, se asegura una calidad de imagen óptima a cualquier escala.

Imágenes de nueva generación WebP

Las imágenes de nueva generación como el formato WebP, son nuevos tipos de archivo de imagen soportados por los nuevos navegadores que comprimen aún más las imágenes, de forma que los tiempos de carga se reducen.

Desde hace un tiempo Google recomienda usarlas para mejorar el SEO de nuestas páginas, pero como no son compatibles con navegadores no actualizados, debemos tener cuidado al usarlas.

En la actualidad, para gestores de contenido como WordPress, hay plugins que nos generan versiones webp de nuestras imágenes y las sirven exclusivamente a los usuarios que pueden visualizarlas, de esta forma evitamos el problema de las incompatibilidades.

Dos ejemplos de plugins que hacen esto son WPRocket y SG Optimizer de Siteground.

Iconos HTML

Para agregar iconos en HTML se puede usar cualquier etiqueta que muestre imágenes, aunque normalmente se usa la etiqueta span o i.

<i class="fa fa-cloud"></i>

El ejemplo anterior sería la forma habitual de insertar un icono en nuestro código HTML usando la librería de iconos Font Awesome, una de las más populares.

Adicionalmente, si quieres poner el favicon (el icono que aparece en la pestaña del navegador), tienes que usar la etiqueta link en el head de la página de la forma que verás justo en la sección que te indico de mi artículo Favicon. Qué es y cómo crearlo e instalarlo.

Cómo centrar imágenes en HTML

Para centrar imágenes hay que tener en cuenta que es un elemento inline, por lo que se ubica por defecto a continuación del texto, no en una nueva línea, por lo que un truco es simplemente ponerla en un nuevo párrafo, que sí es un elemento de bloque y en consecuencia te la pasa a una nueva línea.

Una vez hecho eso, tendremos que recurrir a CSS para centrarla con la propiedad text-align y el valor “center”.

<p style="text-align: center">
    <img src="image.jpg" alt="imagen centrada">

Tambien podemos emplear el truco del auto centrado con los márgenes en CSS:

<div>
    <img style="margin: 0 auto" src="image.jpg" alt="imagen centrada">
</div>

Poner imágenes con etiquetas avanzadas de HTML5

Debes saber que existen otras etiquetas un poco más avanzadas para insertar imágenes en el documento HTML.

La etiqueta figure está pensada para agregar diversos elementos gráficos como imágenes, fotografías, gráficos, etc. Va a acompañada de la etiqueta figcaption, para especificar el título o descripción del elemento visual.

<figure>
  <img src="imagen.jpg" alt="descripción">
  <figcaption>Título de la imagen.</figcaption>
</figure>

También existe la etiqueta picture, con la que tenemos mayor control de los elementos y es similar a video o audio, que fueron incorporadas en HTML5, por lo que lo puedes encontrar en este apartado de mi artículo Novedades y estructura de páginas web HTML5.

Echa un vistazo al Curso Online de HTML5

Aquí puedes ver algunas clases del Curso de HTML5 gratis.

4 comments on “Insertar imágenes HTML: Aprende a poner imágenes en tu sitio web con este tutorial”

  1. hola como puedo ver con un link las fotos que estan en una carpeta en mi hosting pero que ese codigo no tenga img1.jpg img2.jpg .. asi no,,,,,,,, sino ke las mueste todas. si llega una imagen nueva que la muestre igual

  2. Buenas tardes Diego,…

    Tengo un archivo.html como sliders y tengo en la carpeta de mi unidad c:

    Cual sería la ruta para que puede ser leer en otros dispositivos tanto en el smarthphone o Ipads.

    Esperando recibir tus noticias en breve,

    Un cordial saludo,

    Iñi

    1. Hola Iñigo,
      Lo ideal es trabajar con rutas relativas, así si mueves el archivo sigue funcionando.
      Tienes en el artículo varios ejemplos con rutas relativas, trata de encontrar el que más se adapte a tu caso y si quieres me das más detalles y te ayudo. Con la información que aportas no entiendo muy bien lo que quieres hacer.
      ¿Te refieres a cargar imágenes en tu slider que estén en otro dispositivo?
      Eso será complicado y requiere de programación. Lo mejor es ubicar los archivos en el mismo lugar.

Responder a Diego C Martin Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram