Cómo añadir una URL a una imagen (gráficamente y en HTML)

Añade una URL a una imagen si esta representa una página web o sitio completo. Las empresas a menudo incluyen URLs en imágenes de producto para que los consumidores sepan dónde encontrar más información con solo ver la imagen. Puedes incrustar la URL dentro de la propia imagen (para visualización offline) o como enlace interactivo al pasar el ratón o hacer clic (para web).

1. Añadir URL gráficamente (en la propia imagen)

Paso 1

Abre la imagen en un programa de diseño gráfico (Photoshop, GIMP, Paint.NET, Canva, etc.).

Paso 2

Haz clic cerca del borde superior o inferior donde quieras insertar la URL. Elige una zona que solo contenga fondo, ya que el texto la tapará. En una foto exterior, por ejemplo, usa la zona del cielo.

Paso 3

Selecciona la herramienta Texto (suele ser un icono con “T”).

Paso 4

Elige un color de texto que contraste con el fondo. En foto nocturna con fondo oscuro, usa blanco.

Paso 5

Escribe la URL. Ajusta el tamaño para que ocupe gran parte del fondo sin invadir los detalles principales de la imagen.

Paso 6

Guarda la imagen con un nombre nuevo (p. ej., foto-URL.jpg) para no sobrescribir el original.

2. Añadir URL en HTML (para web)

Paso 1

Abre el código HTML de la página donde quieras insertar la imagen.

Paso 2: Insertar la imagen

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

Sustituye tu-imagen.jpg por el nombre/ruta real de tu imagen.

Paso 3: Tooltip al pasar ratón (atributo title)

<img src="tu-imagen.jpg" alt="Descripción" title="https://tusitio.com">

Al pasar el ratón, el navegador muestra la URL como tooltip.

Paso 4: Imagen como enlace clicable (etiqueta <a>)

<a href="https://tusitio.com">
  <img src="tu-imagen.jpg" alt="Descripción" title="Visita nuestro sitio">
</a>

Al hacer clic en la imagen, se abre la URL en el navegador. Combina ambos para tooltip y enlace.