Las imágenes llaman la atención. Las imágenes correctas en su sitio web pueden captar el interés de los clientes, fomentar las visitas recurrentes y aumentar las posibilidades de una conversión de ventas exitosa. Pero también pueden tener un propósito secundario al actuar como enlaces a contenido crítico, información interesante o recursos externos.
Pero, ¿cómo convertir una imagen en un enlace? En esta publicación, exploraremos las posibles razones para la interconexión de imágenes/enlaces, las mejores prácticas al vincular una imagen y ofreceremos una guía paso a paso sobre cómo convertir una imagen en un enlace utilizando HTML simple.
¿Por qué convertir una imagen en un enlace?
Los enlaces de imágenes tienen dos propósitos principales en una página web: captar la atención de los usuarios y proporcionar un área más grande para que los usuarios hagan clic o toquen.
Captar la atención
Las imágenes siempre llaman más la atención que el texto. Es por eso que los artículos de noticias ofrecen imágenes de eventos clave, por qué las tiendas de aplicaciones usan capturas de pantalla y por qué los sitios de comercio electrónico incluyen imágenes de productos junto con descripciones.
También hay datos para respaldar esto: según la investigación, las publicaciones en redes sociales y blogs con imágenes frecuentes tienen un mayor compromiso y participación que las publicaciones sin imágenes, y es más probable que los humanos retengan información si se combinan con imágenes. A medida que evoluciona el diseño web, las imágenes llegaron para quedarse.
Esto no quiere decir que el texto sea irrelevante. sin embargo. Los motores de búsqueda buscan continuamente contenido de texto contextual en su sitio web, y las imágenes son tradicionalmente más difíciles de analizar para determinar el impacto en el sitio, lo que hace que las descripciones basadas en texto de productos o servicios sean esenciales para un SEO efectivo.
Para muchos sitios, sin embargo, es la combinación de estos dos tipos de medios lo que ofrece el mejor resultado. El ejemplo más familiar es una página de producto que incluye una imagen de lo que se vende junto con una descripción clara que incluye características clave, componentes específicos y precios.
Área más grande en la que se puede hacer clic
Aquí hay otro caso de uso común que combina imágenes y texto: descripciones de categorías que incluyen múltiples productos. En este caso, la información que se ofrece es mínima: los visitantes normalmente ven la descripción del artículo junto con su precio y una imagen de alta calidad. Esta combinación se repite una y otra vez en la página para otros productos en la misma categoría o en un rango de precio similar.
Situaciones como esta ofrecen el argumento más convincente para convertir una imagen en un enlace porque ayuda a agilizar la interacción con el cliente. Considere una página con múltiples productos que contengan cada uno un enlace de texto debajo de la imagen. En la mayoría de los casos, el texto del enlace ocupa mucho menos espacio que la imagen, lo que significa que los usuarios deben trabajar más para hacer clic en él.
Esto es especialmente desafiante para los usuarios que acceden a sitios web no optimizados en dispositivos móviles. Si las imágenes y el texto no se escalan correctamente, a los usuarios les resultará difícil tocar con precisión el enlace que desean.
Al aprovechar los enlaces de imágenes, los propietarios de los sitios se aseguran de que tanto las imágenes como las descripciones de texto conduzcan al mismo lugar, lo que a su vez reduce las posibilidades de errores de clic que resultan en páginas inesperadas y el abandono del sitio a medida que los usuarios se sienten frustrados.
Tome este ejemplo de Briogeo: cada lista de productos presenta una imagen grande que también sirve como enlace a la página del producto.
Cómo convertir una imagen en un enlace usando HTML
Si ha decidido convertir una imagen en un enlace, hay una siguiente pregunta obvia: ¿Cómo?
Aquí está nuestra guía paso a paso para convertir una imagen en un enlace usando HTML:
Paso 1: selecciona tu imagen.
Primero, encuentra la imagen que quieres usar. Si se trata de una imagen de un producto en su sitio web, es probable que ya tenga varias imágenes; use la que ofrezca la vista más limpia y clara.
Si no tiene una foto, puede tomar y cargar una foto de alta calidad o usar una imagen web existente. Sin embargo, cuando se trata de reutilizar imágenes que ya están en la web, asegúrese de pagar los derechos de imagen o utilizar imágenes de stock sin licencia.
Paso 2: optimizar el tamaño y la escala.
Antes de subir su foto a su servidor de alojamiento web, vale la pena optimizar el tamaño y la escala. Los tamaños de archivo de imagen más grandes ralentizarán los tiempos de carga y es posible que no se escalen correctamente, por lo que vale la pena mirar el tamaño de las imágenes actuales para informar las nuevas pautas de tamaño de imagen y reducir su imagen con compresión.
Por ejemplo, en el blog de HubSpot usamos aplastar, una herramienta de compresión gratuita de Google. Después de cargar su imagen, puede ajustar la calidad en función del tamaño final del archivo y elegir el formato de salida. En general, el formato JPEG es mejor para imágenes con muchos detalles (como fotografías), mientras que los PNG son más adecuados para iconos, imágenes de texto y gráficos.
Squoosh también le permite comparar directamente la calidad de su imagen sin comprimir con la calidad de su imagen comprimida. Como puede ver en el ejemplo anterior, es posible que nuestra foto comprimida no sea tan nítida, pero es probable que los visitantes no lo noten si el enlace de la imagen es lo suficientemente pequeño en la pantalla.
En última instancia, usted decide cuánto quiere comprimir su imagen, pero normalmente evitará una pixelación significativa manteniendo la calidad por encima del 70%.
Paso 3: Cargue su imagen y obtenga la URL.
A continuación, debe cargar su imagen en su servidor web. Esto puede ser un sistema de administración de contenido o un creador de sitios web, pero independientemente de cómo se aloje su imagen, debe cargarse en la web para que pueda crear su URL de ubicación, el lugar donde su código HTML «buscará» para que se muestre su imagen. eso.
Paso 4: Especifique su URL de destino.
A continuación, necesita una URL de destino, que especifica a dónde enviará su enlace a los usuarios cuando hagan clic en su imagen, como un producto específico o una página de pago en su sitio web. Para nuestro ejemplo, hagamos que la URL de destino sea «https://www.hubspot.com/».
Paso 5: Crea tu HTML.
Ahora es el momento de crear su código HTML. Aquí está la estructura básica:
<a href="https://www.hubspot.com/">
<img src="https://blog.hubspot.com/website/ImageURL" alt="text describing the image">
</a>
Las etiquetas y indican la presencia de un enlace, mientras que la etiqueta hace referencia a su imagen específica. En el ejemplo anterior, la URL de ubicación de tu imagen reemplaza «http://blog.hubspot.com/website/ImageURL».
También es una buena idea completar la descripción del texto alternativo, que pueden leer los lectores de pantalla que usan los usuarios con problemas de visión, y también se mostrará si la imagen no se puede cargar. Como resultado, el texto alternativo simple y preciso es una parte fundamental de los enlaces de imágenes HTML.
Paso 6: pegue su código según sea necesario.
Con su código HTML personalizado, ahora puede pegar su imagen vinculada en cualquier página a la que tenga acceso de administrador y que admita HTML. Si siguió los pasos correctamente, el resultado debería ser una imagen en la que se pueda hacer clic que lleve a los usuarios a una URL de destino.
Sight Unseen: mejores prácticas de vinculación de imágenes
Los humanos generalmente prefieren el camino de menor resistencia. Es por eso que queremos un Internet más rápido y por qué los algoritmos de contenido están diseñados para brindarnos el contenido que queremos, cuando lo queremos.
Estas expectativas de bajo esfuerzo también se aplican a los sitios web: los sitios que son estéticamente agradables, fáciles de navegar y simples de entender tienen la mejor oportunidad de captar el interés de los visitantes y aumentar la posibilidad de conversión de ventas.
Mientras tanto, para los enlaces como imágenes, la naturaleza humana sugiere cuatro mejores prácticas:
Mantenlo simple
Los enlaces y las imágenes deben estar conectados lógicamente: la imagen debe indicar a los usuarios a dónde los llevará el enlace antes de que hagan clic.
Por ejemplo, si su imagen es una imagen de una prenda específica pero el enlace lleva a los usuarios a la categoría general, los clientes potenciales pueden sentirse frustrados. En su lugar, considere usar una imagen que contenga varias prendas de vestir para que sirva como enlace a una página de categoría.
Aquí, la regla para los enlaces como imágenes es simple: lo que ves es lo que obtienes.
Ofrecer un enlace de respaldo
Los hipervínculos de texto clásicos parecen algo obsoletos hoy en día, gracias a su llamativo color azul y subrayado.
¿La captura? A pesar de las mejoras sustanciales en HTML y otros lenguajes de marcas que hacen posibles enlaces mucho más sutiles y simplificados, muchos usuarios están condicionados a reconocer el formato de enlace azul tradicional de inmediato.
¿El resultado? Vale la pena ofrecer una copia de seguridad familiar basada en texto para cualquier enlace de imagen que los usuarios entiendan al instante.
Limite sus enlaces
Agregar demasiados enlaces a una página significará un desastre, y esto se duplica para las imágenes. No todas las imágenes necesitan su propio enlace porque no todo el contenido de su sitio necesita un enlace a otras páginas o recursos.
En este caso, el propósito es la prioridad: antes de convertir cualquier imagen en un enlace, haz una pregunta simple: ¿Por qué? Si no hay una razón de peso, no haga el cambio.
Revisar regularmente
Por último, pero no menos importante: revise periódicamente sus enlaces para asegurarse de que siguen siendo relevantes. Por ejemplo, si las líneas de productos o los precios cambian, los enlaces antiguos pueden estar desactualizados y enviar a los usuarios a páginas que ya no son relevantes o devolver errores 404.
Esto se aplica a todos los enlaces de su página, no solo a los enlaces de imágenes o de texto. La revisión regular ayuda a garantizar que los enlaces estén siempre activos y aplicables.
Sin enlaces perdidos
Agregar enlaces a sus imágenes es una excelente manera de mejorar el acceso de los usuarios y garantizar que puedan encontrar lo que necesitan, cuando lo necesitan en su sitio web. ¿La advertencia? Asegúrese de que sus enlaces sean consistentes, concisos y actualizados regularmente para reflejar el contenido actual.
Nota del editor: esta publicación se publicó originalmente en diciembre de 2020 y se actualizó para que sea más completa.