Los sitios web no se parecen a ningún medio de comunicación anterior a ellos. Una de las principales características que diferencian a los sitios web de los formatos de medios de comunicación anteriores, como la prensa escrita, la radio e incluso la televisión, es el concepto de «hipervínculo».

Los hipervínculos, también conocidos como «enlaces», son los que hacen que la Web sea tan dinámica. A diferencia de una publicación impresa que puede hacer referencia a otro u otros recursos, los sitios web pueden utilizar estos enlaces para enviar a los visitantes a esas otras páginas y recursos. Ningún otro medio de difusión puede hacer esto. Usted puede escuchar un anuncio en la radio o ver en la televisión, pero no hay hipervínculos que le pueden llevar a las empresas en esos anuncios de la manera que el sitio web puede hacer fácilmente. Los enlaces son realmente una herramienta de comunicación e interacción asombrosa!

A menudo, los enlaces que se encuentran en un sitio web son contenidos de texto que dirigen a los visitantes a otras páginas de ese mismo sitio. La navegación de un sitio web es un ejemplo de enlaces de texto en la práctica, pero no es necesario que los enlaces estén basados en texto. También puede vincular fácilmente imágenes en su sitio web. Veamos cómo se hace esto, seguido de algunos casos en los que usted querría usar hipervínculos basados en imágenes.

Cómo vincular una imagen

Lo primero que tendrá que hacer es colocar la imagen en su documento HTML. Un uso común de un enlace basado en imágenes es el gráfico del logotipo del sitio, que luego se vincula a la página principal del sitio. En el siguiente código de ejemplo, el archivo que estamos utilizando es un SVG para nuestro logotipo. Esta es una buena opción, ya que permitirá que nuestra imagen se adapte a diferentes resoluciones, manteniendo al mismo tiempo la calidad de la imagen y un pequeño tamaño general del archivo.

Cómo colocar su imagen en el documento HTML:

Alrededor de la etiqueta de la imagen, ahora añadiría el enlace del ancla, abriendo el elemento ancla antes de la imagen y cerrando el ancla después de la imagen. Esto es similar a cómo enlazaría el texto, sólo que en lugar de envolver las palabras que desea que sean un enlace con las etiquetas de anclaje, usted envuelve la imagen. En nuestro ejemplo a continuación, estamos enlazando de nuevo a la página de inicio de nuestro sitio, que es "index.html".
Cuando agregue este HTML a su página, no ponga ningún espacio entre la etiqueta ancla y la etiqueta de imagen. Si lo hace, algunos navegadores añadirán pequeñas marcas al lado de la imagen, lo que parecerá extraño.
La imagen del logotipo ahora también actuaría como un botón de página principal, que es más o menos un estándar de la web en estos días. Note que no incluimos ningún estilo visual, como el ancho y alto de la imagen, en nuestro marcado HTML. Dejaremos estos estilos visuales a CSS y mantendremos una separación limpia entre la estructura HTML y los estilos CSS.
Una vez que llegue a CSS, los estilos que escriba para apuntar a este gráfico del logotipo podrían incluir el tamaño de la imagen, incluidos los estilos de respuesta para imágenes amigables para múltiples dispositivos, así como cualquier otro material visual que desee agregar a la imagen/enlace, como bordes o sombras de caída de CSS. También puede dar su imagen o enlazar un atributo de clase si necesita "ganchos" adicionales para usar con sus estilos CSS.
  Casos de uso de enlaces de imágenes
Así que añadir un enlace de imagen es bastante fácil. Como acabamos de ver, todo lo que tiene que hacer es envolver la imagen con las etiquetas de anclaje apropiadas. Su siguiente pregunta podría ser "¿cuándo haría esto en la práctica además del ejemplo del logotipo/enlace a la página de inicio mencionado anteriormente?
He aquí algunas reflexiones:

Imágenes en miniatura en una galería que enlazan a versiones más grandes de esas imágenes.
Imágenes que se utilizan solas para representar contenido, como fotos de productos para un sitio web de comercio electrónico.
Las imágenes que forman parte de otro contenido, como un blog o un comunicado de prensa, que atraen a la gente a darse cuenta de que el contenido les da un área de destino para tocar o hacer clic para leer el contenido completo.
Imágenes de iconos que se utilizan como botones para conectarse a funciones o páginas específicas dentro del sitio.
Enlaces de medios sociales que utilizan los logotipos reconocibles de los diversos sitios de medios sociales que son importantes para ese sitio o empresa.
Las imágenes utilizadas como botones para ciertas funcionalidades, como las presentaciones de formularios (nota sobre las mejores prácticas: desde la perspectiva del rendimiento del sitio web, los botones diseñados exclusivamente con CSS son una mejor opción que los botones de imagen).

  Un recordatorio al usar imágenes
Las imágenes pueden jugar un papel importante en el éxito de un sitio web. Uno de los ejemplos mencionados anteriormente es el uso de imágenes junto con otros contenidos para llamar la atención sobre ese contenido y conseguir que la gente lo lea.
Al utilizar imágenes, usted debe ser consciente de la selección de la imagen correcta para sus necesidades, esto incluye el tema de la imagen correcta, el formato, y también asegurarse de que las imágenes que utiliza en su sitio web están debidamente optimizadas para la entrega del sitio web. Esto puede parecer mucho trabajo sólo para añadir imágenes, ¡pero la recompensa vale la pena! Las imágenes realmente pueden añadir mucho al éxito de un sitio.
No dude en utilizar imágenes apropiadas en su sitio, y enlazar esas imágenes cuando sea necesario para añadir algunas interactivamente a su contenido, pero también ser consciente de estas mejores prácticas de imagen y utilizar estos gráficos / enlaces correctamente y de manera responsable en su trabajo de diseño web.