Para conseguir que la imagen aparezca en el lado izquierdo, tener el texto en el lado derecho, y tener todo bien justificado y alineado verticalmente, tuve que estructurar todo dentro de una tabla HTML. El diseño de la tabla es un poco confuso para trabajar, ya que en realidad hay una tabla anidada dentro de otra tabla para lograr la alineación deseada. Este es el esqueleto de la tabla HTML (prepárate):
Imagen de cabecera
El elemento imagen está anidado dentro de un elemento de celda de tabla <td> y está centrado verticalmente en la tabla utilizando valign="middle" para el atributo y el valor del elemento de celda de tabla. También he añadido el atributo vertical-align: middle y el valor en el elemento de imagen en sí para una buena medida.
La fuente de la imagen está contenida dentro de mi propio Google Drive personal donde la imagen tiene la configuración de uso compartido que permite a cualquier persona ver la imagen. Como nota, tuve que cambiar el enlace para compartir proporcionado por Google para incluir uc?id= al principio de la solicitud GET en la URL. Esto permite una descarga directa desde Google Drive y asegura que la imagen aparezca correctamente en la firma del correo electrónico.
Para conseguir el efecto de imagen redondeada, he añadido border-radius: 100% como CSS en el elemento de la imagen.
Iconos y enlaces sociales
Los iconos de las redes sociales utilizados en la firma están formados por un elemento imagen envuelto por un elemento ancla que contiene el enlace a la página de la red social correspondiente. La anchura y la altura se especifican en los atributos de los elementos de imagen (25 píxeles es una buena anchura/altura). El atributo de fuente contiene un enlace a un archivo de icono en mi propio Google Drive, al igual que la imagen de la foto principal. Recuerde incluir uc?id= en su URL de origen cuando se enlaza a una imagen en Google Drive.
Los iconos sociales están todos estructurados como elementos de la lista dentro de una lista desordenada para ayudar a la accesibilidad (gracias Scott Vinkle por esta sugerencia). El CSS aplicado en el ul elimina las viñetas y el espacio extra que rodea toda la lista desordenada. El display: inline-block en el elemento de la lista permite que cada icono se muestre de lado a lado.