Formato nuevo
Enlace de imagen: cómo hacer una imagen clicable
Un enlace de imagen es una foto que lleva a una URL al hacer clic: un banner, el logo del header, una preview de galería. En HTML es `<a href="…"><img …></a>`.
Abajo: cuándo usarlo, cómo marcar el código, qué atributos importan y en qué se diferencia un enlace de imagen de uno de texto para SEO y UX. Lo básico de tipos de enlace está en piezas relacionadas.
Por qué se usan enlaces de imagen
Lo visual atrapa la mirada más rápido que el texto: logo a la home, preview de producto a una ficha, mapa a contactos, banner promo a un landing.
Para los crawlers pesan más las anclas de texto y la estructura. Las imágenes sostienen la UX; no cuelgues de ellas todo el enlazado interno del sitio.
Buenos escenarios:
- logo → homepage
- preview en un catálogo o blog
- banner promo → landing
- lightbox/galería (el clic abre más grande — UX, no necesariamente un ancla SEO)
HTML: wrapper a + img
Plantilla básica: `<a href="/catalog/"><img src="/images/banner.webp" alt="Catálogo de bombas" width="600" height="200"></a>`.
En un CMS suele: seleccionar la imagen → «insertar enlace» → fijar la URL. Comprueba que el href esté completo y vaya donde debe (https, sin typos).
Atributos útiles de img:
- `src` — path al archivo en tu hosting
- `alt` — sentido para lectores de pantalla y si el archivo falla
- `width` / `height` — proporciones en el layout
- `loading="lazy"` — para banners below-the-fold (no para el hero LCP)
Tus propios archivos y el peso
Sube las imágenes a tu servidor o CDN. El hotlink ajeno se rompe cuando el donante cambia la URL o bloquea peticiones externas.
Comprime: WebP/AVIF donde el pipeline lo soporte, tamaño correcto para el hueco (no 4000px en una columna de 300px). Los atributos width/height no sustituyen la optimización del archivo.
Checklist de peso:
- creativos propios
- compresión sin emborronar el texto del banner
- no apiles una docena de banners pesados en una página
- revisa el ancho en móvil
Higiene de UX y SEO
El pie de foto y el alt deben cuadrar con el destino del enlace. «Clic aquí» en una imagen sin alt es un patrón flojo.
Efectos hover (sombra, opacity) están bien si no estorban en touch: el tap target tiene que ser lo bastante grande.
Reglas de colocación:
- moderación: los banners no tapan texto ni formularios
- que cuadre con el tema de la página
- para menús y CTAs clave añade también un enlace de texto cerca
- no presentes ads como «solo una foto» donde haga falta etiquetado
Resumen corto
Un enlace de imagen viene bien para saltos visuales: envuelve img en `<a>`, pon alt y sirve un archivo ligero desde tu hosting. Para sentido y SEO, los enlaces de texto son más fuertes — combínalos; no sustituyas toda la navegación por imágenes.
FAQ
¿Un enlace de texto es mejor que una imagen para SEO?
Para pasar el sentido del ancla — suele sí: el texto es inequívoco. Una imagen necesita alt claro y contexto. La navegación del menú es más a menudo texto.
¿El alt es obligatorio?
Sí para accesibilidad y claridad cuando la imagen lleva sentido. Si es puramente decorativa — alt="" vacío, pero entonces no las hagas el único camino a una sección importante.
¿Puedo enlazar a la imagen de otro por URL?
Técnicamente sí (hotlink); en la práctica mal: derechos, velocidad, su CDN puede servir un stub. Aloja los archivos tú y optimízalos.
¿Width y height aceleran el sitio?
Reservan espacio en el layout (menos shifts). El archivo en sí no se aligera — hace falta compresión, formato moderno y un tamaño en píxeles sensato.
¿Un enlace de imagen es lo mismo que un banner?
Un banner es un caso especial: un creativo de ads con enlace. Las mismas reglas: peso del archivo, oferta clara, no tapar el contenido.
¿Banners pesados o imágenes sin alt que no llevan a ningún sitio?
Revisamos markup a+img, peso WebP y alt con sentido — sin hotlink ni lazy en el LCP.
Hablar del proyecto
